legend indicator color not change with bar color in google charts

Question

I am working with Google charts. I wanted to change the bar colors in chart. So using series style I have changed the bar color. But at same time I wanted to change Legend indicator color also as per bar color. But I am unable to change legend indicator color. Please help me.

here is chart code:

 google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart3);
      function drawChart3() {
          var data = google.visualization.arrayToDataTable([
            ['Priority', 'Resolution(%)',{ role: 'annotation' },'ESL(%)',{ role: 'annotation' },{ role: 'style' }],
            ['P1', <%=P1_PERCENT %>,<%=P1_PERCENT%>,95,95,'color: #fcb441' ],
            ['P2', <%=P2_PERCENT%>,<%=P2_PERCENT%>,95,95,'color: #fcb441' ],
            ['P3 & P4', <%=P3_P4_PERCENT%>,<%=P3_P4_PERCENT%>,90,90,'color: #fcb441' ]
            ]);

        var options = {
          tooltip:{textStyle:{fontName:'"Arial"'}},
          title: 'Resolution(Priority Wise)',titleTextStyle:{fontName:'"Arial"'},
          hAxis: {title: 'Priority', titleTextStyle: {color: 'black',fontSize:'15',fontName:'"Arial"'}},
          vAxis: {minValue:0},
          legend:{position: 'bottom'},
          chartArea:{width:'88%'}
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('g4'));
        chart.draw(data, options);
      }

I am getting chart like this

Result chart

Legend color is determined by series color, which you are overriding by setting colors for individual bars. If you want all of the bars of a given series to be the same color, set the colors or series.<series index>.color options instead of using the style column. — asgallant

sica07 sica07 · Accepted Answer · 2014-03-25T14:09:48

As @asgallant explained in his comment, if you want the same colors for the bars and the legend, you have to overwrite the default color series and not the color of the bars. To do this, in the options object, add the color property which will contain your custom color series (array). In your case:

var options = {
      tooltip:{textStyle:{fontName:'"Arial"'}},
      title: 'Resolution(Priority Wise)',titleTextStyle:{fontName:'"Arial"'},
      hAxis: {title: 'Priority', titleTextStyle: {color: 'black',fontSize:'15',fontName:'"Arial"'}},
      vAxis: {minValue:0},
      legend:{position: 'bottom'},
      chartArea:{width:'88%'},
      colors: ['#fcb441', 'blue']
    };

legend indicator color not change with bar color in google charts

1 Answers