How to change label color in - Donutchart Google API

Question

As you can see the image i just want to change color of 12.5 (as Green) and 25 (as red) according to donut arc color in google charts

Code :-

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

var observer = new MutationObserver(function () {
  $.each($('#chart_div path[stroke="#636363"]'), function (index, path) {
    $(path).attr('stroke', '#000');
  });

  $.each($('#chart_div text[fill="#9e9e9e"]'), function (index, label) {
     $(label).attr('fill', 'yellow');
  });
var options = {
      width: '360',
      height: '200',
      chartArea: {
          height: "94%",
          width: "94%"
      },
      colors: ['#e0440e', 'green', 'red', '#f3b49f', '#f6c7b6'],
      title: 'My Daily Activities',

      pieHole: 0.6,
      legend: {
          position: 'labeled',
          labeledValueText:'value',
          textStyle: {
            color: 'yellow',
          }
      },
      pieSliceText: 'none',

    };

Answer 1

there are no standard config options to change individual label colors.

option legend.textStyle will change the color of all the row labels,
just not the row amounts.
which is currently being used...

  legend: {
      textStyle: {
        color: 'yellow',
      }
  },

to color each label individually, first, remove the above option.
then we can use the default colors to determine if the text is...
a row label (#222222)
or row amount (#9e9e9e)

then we can manually change the color by finding the data row index the label represents,
using data table method getFilteredRows.
once we know the row index, we can use the colors option, to assign the color.

        // determine data column index based on default color
        var colIndex = 0;  // row label
        if (label.getAttribute('fill') === '#9e9e9e') {
          colIndex = 1;    // row amount
        }

        // determine row index label represents
        var rowIndex = data.getFilteredRows([{
          column: colIndex,
          test: function (value) {
            switch (colIndex) {
              case 0:
                // check row label
                return (value.indexOf(label.textContent) > -1);
                break;

              case 1:
                // check row amount
                return (value === parseFloat(label.textContent));
                break;
            }
          }
        }]);

        // change color based on row index using colors in chart options
        if (rowIndex.length > 0) {
          label.setAttribute('fill', options.colors[rowIndex[0]]);
        }

note: a MutationObserver must be used, or the chart will revert back to the default color,
when the label / slice is hovered.

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var container = document.getElementById('chart_div');
  var chart = new google.visualization.PieChart(container);

  var options = {
    width: 360,
    height: 200,
    chartArea: {
      height: "94%",
      width: "94%"
    },
    colors: ['#e0440e', 'green', 'red', '#f3b49f', '#f6c7b6'],
    title: 'My Daily Activities',
    pieHole: 0.6,
    legend: {
      position: 'labeled',
      labeledValueText:'value'
    },
    pieSliceText: 'none',
  };

  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours'],
    ['Moving to a new city', 25],
    ['Meeting new people', 12.5]
  ]);

  google.visualization.events.addListener(chart, 'ready', function () {
    // change label colors
    var observer = new MutationObserver(function () {
      // loop chart labels
      Array.prototype.forEach.call(container.getElementsByTagName('text'), function(label) {
        // determine data column index based on default color
        var colIndex = 0;  // row label
        if (label.getAttribute('fill') === '#9e9e9e') {
          colIndex = 1;    // row amount
        }

        // determine row index label represents
        var rowIndex = data.getFilteredRows([{
          column: colIndex,
          test: function (value) {
            switch (colIndex) {
              case 0:
                // check row label
                return (value.indexOf(label.textContent) > -1);
                break;

              case 1:
                // check row amount
                return (value === parseFloat(label.textContent));
                break;
            }
          }
        }]);

        // change color based on row index using colors in chart options
        if (rowIndex.length > 0) {
          label.setAttribute('fill', options.colors[rowIndex[0]]);
        }
      });
    });
    observer.observe(container, {
      childList: true,
      subtree: true
    });
  });

  chart.draw(data, options);
});

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