Google Charts: How Do I Change The Percentage Label Color?

I'm using Google Charts to display pie charts. In my options variable, I have the legend set this: legend: {position: 'labeled', textStyle: {color: 'white', fontSize: 24}} Now if y

Solution 1:

didn't see an option that will change the text style for the charts elements mentioned but the chart's svg can be modified manually

however, the chart will revert back to the default style, whenever there is activity, such as hovering a slice

as such, a MutationObserver can be used to override the styles

see following working snippet...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'x');
    data.addColumn('number', 'y');
    data.addRows([
       ['Moving to a new city', 25],
       ['Meeting new people', 12.5],
       ['Gaining independence', 62.5]
    ]);

    var container = document.getElementById('chart_div');
    var chart = new google.visualization.PieChart(container);

    var observer = newMutationObserver(function () {
      $.each($('#chart_div path[stroke="#636363"]'), function (index, path) {
        $(path).attr('stroke', '#ffffff');
      });
      $.each($('#chart_div text[fill="#9e9e9e"]'), function (index, label) {
        $(label).attr('fill', '#ffffff');
      });
    });
    observer.observe(container, {
      childList: true,
      subtree: true
    });

    chart.draw(data, {
      backgroundColor: '#1f618d',
      legend: {position: 'labeled', textStyle: {color: 'white', fontSize: 24}}
    });
  },
  packages: ['corechart']
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://www.gstatic.com/charts/loader.js"></script><divid="chart_div"></div>

Solution 2:

change the css:

g g g text
{
    fill: black;
}