Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

legend indicator color not change with bar color in google charts

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

like image 220
Sandeep Reddy K. Avatar asked Mar 14 '14 14:03

Sandeep Reddy K.


People also ask

How do I change the color of the bar in my Google bar graph?

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.

How do I customize my Google bar graph?

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.

How do I add color to a Google chart?

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.


1 Answers

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']
    };
like image 64
sica07 Avatar answered Oct 12 '22 11:10

sica07