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
To change the colors assigned to data series in a specific chart: Select that chart, then on the right, open the STYLE tab. In the Color by section, select Series order, Bar order, or Slice order, depending on the type of chart. Click a color box to set the color for each series.
Customize a bar chartChoose an option: Chart style: Change how the chart looks. Chart & axis titles: Edit or format title text. Series: Change bar colors, axis location, or add error bars, data labels, or trendline.
Changing the Color You can change the color of the lines that connect data points in Google Charts in two subtly different ways: with the colors option to change the chart palette, or with the series option to specify the color for particular series. In the following chart, we set the color of each series explicitly.
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']
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With