Change the colors of the Google Stacked Bar Chart (Material Table)

Question

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 have a summary histogram and I want each of the colors to be different (gray, blue, green, orange). However, the colors of the partitions simply assume the first color (gray) in several brightnesses.

I also tried this in my options :

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

How can I get each batch of a different color?

Answer 1

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

Today, the series configuration option as an array of colored objects works fine. See the colors variable in the example below.

Code example:

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

The resulting graph:

Messing around with the code:
https://jsfiddle.net/p8bnfe2h

Configuration options

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

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

Answer 2

I managed to get the colors to work here

When creating the chart, I had to use: new google.visualization.ColumnChart(...) instead of new google.charts.Bar(...) , otherwise it will not fold properly.

---

You can also make sure that you are using the latest version of Google Chart. In the above script, I used samples from the developer docs that used: https://www.google.com/jsapi to automatically download all things.