google pie charts with label(change the color of line of labels)

Question

I am new with Google pie charts. I want to change the style of label like line color of label match with the color of slice if slice is blue then line color should be blue.

And some slice are not showing its label like the yellow and purple slice.

 var data3 = google.visualization.arrayToDataTable(ClaimSubmissionStatus);

        var options = {
            legend: { textStyle: { color: 'black', fontSize: 14 }, position: 'labeled', alignemnt: 'center' },
            //is3D: true,
           // legend: { position: 'labeled' },
            chartArea: { backgroundColor: '#FFFFFF', left: '5%', top: '15', width: '85%' }

        };

        var charta = new google.visualization.PieChart(document.getElementById('divClaimSubmission'));
        charta.draw(data3, options);

        google.visualization.events.addListener(charta, 'select', function () {
            debugger;
            var selectedItem = charta.getSelection()[0];
            if (selectedItem) {
                var status = data3.getValue(selectedItem.row, 0);
                CLAIMSUBMISSIONSTATUSPIECHARTDetail(status);
            }


        });

Answer 1

there is no documented option for changing the color of the legend marker line,
but you can change manually on the chart's 'ready' event

also, the only solution for ensuring a line exists for each slice is to increase the height of the chart

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Billed', 19],
    ['Paid Up', 9],
    ['Not Billed', 2],
    ['Ready for Review', 15],
    ['Not Paid Up', 1]
  ]);

  var options = {
    chartArea: {
      left: 12,
      top: 12,
      width: '85%'
    },
    colors: ['#3366cc', '#dc3912', '#ff9900', '#109618', '#990099', '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722', '#795548', '#9e9e9e', '#607d8b', '#000000', '#ffffff'],
    legend: {
      position: 'labeled'
    }
  };

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

  google.visualization.events.addListener(chart, 'ready', function () {
    var observer = new MutationObserver(function () {
      var svg = container.getElementsByTagName('svg');
      if (svg.length > 0) {
        var legend = getLegend(svg[0]);
        // check number of markers
        if (legend.length !== data.getNumberOfRows()) {
          // increase height & redraw chart
          options.height = parseFloat(svg[0].getAttribute('height')) + 32;
          drawCount++;
          if (drawCount < drawMax) {
            chart.draw(data, options);
          }
        } else {
          // change legend marker colors
          var colorIndex = 0;
          legend.forEach(function (legendMarker) {
            legendMarker.path.setAttribute('stroke', options.colors[colorIndex]);
            if (legendMarker.hasOwnProperty('circle')) {
              legendMarker.circle.setAttribute('fill', options.colors[colorIndex]);
            }
            colorIndex++;
            if (colorIndex > options.colors.length) {
              colorIndex = 0;
            }
          });
        }
      }
    });
    observer.observe(container, {
      childList: true,
      subtree: true
    });
  });

  // get array of legend markers -- {path: pathElement, circle: circleElement}
  function getLegend(svg) {
    var legend = [];
    Array.prototype.forEach.call(svg.childNodes, function(child) {
      var group = child.getElementsByTagName('g');
      Array.prototype.forEach.call(group, function(subGroup) {
        var path = subGroup.getElementsByTagName('path');
        if (path.length > 0) {
          if (path[0].getAttribute('fill') === 'none') {
            var legendMarker = {
              path: path[0]
            };
            var circle = subGroup.getElementsByTagName('circle');
            if (circle.length > 0) {
              legendMarker.circle = circle[0];
            }
            legend.push(legendMarker);
          }
        }
      });
    });
    return legend;
  }

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

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

notes:
1) need to use custom colors in order to keep the slice and line color in sync
2) a MutationObserver is required, the chart will revert on interactions, such as hover or select
3) manual changes will not be reflected when using chart method getImageURI