Google Graph DataTable + Piechart styling

Question

Trying to set the colour of each slice of the pie chart via the dataTable.addRow

Using the following code this should work apparently:

//[...]
dataTable.addColumn({type: 'string', role: 'style'});
dataTable.addRow([graphData[i], parseFloat(graphData[i + 1]), 'color: #000000;      fill-color:#000000'
//[...]

As per the style section found here: https://developers.google.com/chart/interactive/docs/roles#what-roles-are-available

Does anyone have any examples of doing this with a pie chart?

Cheers,

WhiteHat WhiteHat · Accepted Answer · 2016-06-29T12:52:48

according to the data format for a PieChart, the only optional role available is tooltip.

but you can use the colors configuration option, see following example...

google.charts.load('current', {
  callback: function () {
    new google.visualization.PieChart(document.getElementById('piechart')).draw(
      google.visualization.arrayToDataTable([
        ['Category', 'Hours'],
        ['Commute',   2],
        ['Eat',       2],
        ['Sleep',     6]
      ]),
      {
        colors: ['cyan', 'magenta', 'yellow'],
        pieSliceTextStyle: {
          color: 'black'
        }
      }
    );
  },
  packages: ['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart"></div>

Google Graph DataTable + Piechart styling

1 Answers