Google chart point color

Question

Is it possible to change point color in Google chart api, something like this:

From this:

To this:

Thanks!

Answer 1

Try taking a look at this jsFiddle Example created by asgallant here

"There is no support in the API for making lines and data points have different colors in the same series. You can fake what you want, though, by using a DataView with your data repeated in two columns. Make the first series colored 'black' and the second colored 'red' with lineWidth = 0 and pointSize > 0."

From the Example:

var options = {
        title: 'Load vs Length',
        titlePosition: 'out',
        legend: {
            position: 'none'
        },
        hAxis: {
            title: 'Length (inch)',
            viewWindow: {
                min: 0
            },
            format: '#.000'
        },
        vAxis: {
            title: 'Load (pound)',
            viewWindow: {
                min: 0
            }
        },
        series: { //Create 2 separate series to fake what you want. One for the line             and one for the points
            0: {
                color: 'black',
                lineWidth: 2
            },
            1: {
                color: 'red',
                lineWidth: 0,
                pointSize: 5
            }
        }

Answer 2

Thank you for your suggestion. However, series 1 doesn't work for me: Following code, prints the line blue but doesn't show the points. If I switch 1 and 0. Then it does show the points in red, but there's no line. Before instead of series I just had pointSize: 4, right after the hAxis. That worked, except the points and the line where the same color.

{title: 'progress',

  vAxis: {
          title: 'Grade',  
          titleTextStyle: {color: 'red'}, 
          gridlines: {count: 7}, 
          viewWindow: { min: 0, 
                        max: 100, 
                        valueLabelsInterval: 20}
        },

  hAxis: {
          title: 'Q date',  
          titleTextStyle: {color: 'red'}, 
          slantedText: true
        },

  series: {
          0: {lineWidth: 2},
          1: {
             color: 'red',
             lineWidth: 0,
             pointSize: 4
           }
        }
}

Answer 3

I fixed the problem by adding an individual style column to each point, like this:

  var data_timeline = new google.visualization.DataTable();
  data_timeline.addColumn('string', 'Year'); // Implicit domain label col.
  data_timeline.addColumn('number', 'Students'); // Implicit series 1 data col.
  data_timeline.addColumn({type:'string', role:'annotation'}); // annotation role col.
  data_timeline.addColumn({type:'string', role:'style'}); // style col.      
  data_timeline.addRows([
    ['2010-2011', 85, '85', 'point { size: 7; shape-type: diamond; fill-color: #005b82; }'],
    ['2011-2012', 67, '67', 'point { size: 7; shape-type: diamond; fill-color: #005b82; }'],
    ['2012-2013', 34, '34', 'point { size: 7; shape-type: diamond; fill-color: #005b82; }'],
  ]);      

  var options_timeline = {
    hAxis: { textStyle: { color: '#444444'} },
    vAxis: { baselineColor: '#cccccc', textPosition: 'none', minValue: 0 },
    legend: {position: 'none'},
    lineWidth: 3,
    pointsVisible: true,
    colors: ['#b7c72a'],
  };

  var chart_timeline = new google.visualization.LineChart(document.getElementById('chart_timeline'));
  chart_timeline.draw(data_timeline, options_timeline);