CODEWITHSUNDEEP
javascriptchartsmaterial-design
Kenny Wyland
Kenny Wyland

Reputation: 21880

Changing Google Stacked Bar Chart colors (Material Bar Chart)

var data = google.visualization.arrayToDataTable(stats_data);

var options = {
    width: 1400,
    height: 400,
    legend: { position: 'top', maxLines: 3 },
    bar: { groupWidth: '75%' },
    isStacked: true,
    bars: 'vertical',
    colors:['#999','#346ac9', '#279423', '#fc9826'],
};

var chart = new google.charts.Bar(document.getElementById('chart-recent'));
chart.draw(data, google.charts.Bar.convertOptions(options));

I've got a stacked bar chart and I want each of the colors to be different (grey, blue, green, orange). However, the colors of the sections just take the first color (grey) in multiple brightnesses.

enter image description here

I also tried this in my options:

series: [
    {color: '#999'},
    {color: '#346ac9'},
    {color: '#279423'},
    {color: '#fc9826'}
]

How do I get each of the series to have a different color?

Upvotes: 7

Views: 5386

Answers (2)

Dem Pilafian
Dem Pilafian

Reputation: 6026

At the time of the original question, the Material Bar Chart probably did not yet support custom colors for stacked bar charts.

Today, the series configuration option as an array of color objects seems to work fine. See the colors variable in the example below.

Example code:

const data = [
   ['Sector',        'High', 'Medium', 'Low' ],
   ['Agriculture',   18,  9, 29],
   ['Education',      2, 14, 10],
   ['Healthcare',     4,  6, 41],
   ['Manufacturing', 36, 10,  3]
   ];
const colors = [
   { color: 'indianred' },  //high
   { color: 'khaki' },      //medium
   { color: 'seagreen' },   //low
   ];

const drawChart = () => {
   const options = {
      chart:   { title: 'Risk by sector' },
      legend:  { position: 'top' },  //not yet supported
      bars:    'horizontal',
      stacked: true,
      series:  colors
      };
   const chartData = google.visualization.arrayToDataTable(data);
   const elem = $('figure#health-chart')[0];
   const chart = new google.charts.Bar(elem);
   chart.draw(chartData, options);
   };

google.charts.load('current', { packages: ['bar'] });
google.charts.setOnLoadCallback(drawChart);

Resulting chart: Bar Chart

Fiddle with the code:
https://jsfiddle.net/p8bnfe2h

Configuration options

series
An array of objects, each describing the format of the corresponding series in the chart. To use default values for a series, specify an empty object {}. If a series or a value is not specified, the global value will be used.

Documentation:
https://developers.google.com/chart/interactive/docs/gallery/barchart#configuration-options

Upvotes: 3

segFault
segFault

Reputation: 4054

I was able to get the colors working here

When generating the graph I had to use: new google.visualization.ColumnChart(...) instead of new google.charts.Bar(...) otherwise it would not stack properly.

You may also want to make sure you are using the latest version of Google Charts. In the fiddle above, I used samples from the developer docs which were using: https://www.google.com/jsapi to autoload all the things.

Upvotes: 0

Related Questions