Google chart point color

Question

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

From this:

To this:

Thanks!

Mastrianni

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
            }
        }

Cosmopolite

thanks, a simple pointColor would be nice from Google, but anyway... cheers, works for me! – Mastrianni

Yeah, there should be a simpler way, but I suppose they didn't want to introduce any confusion for intersecting lines. Glad it helped! =) – Cosmopolite

Can we do the same for charts which have multiple lines ? – Rickrack

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
           }
        }
}

Nerva

Can we do the same for charts which have multiple lines ? – Rickrack

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);

Aalst