Pie/Donut chart legend labeled line color

679 views
Skip to first unread message

Miller S.

unread,
Apr 5, 2019, 1:52:38 PM4/5/19
to Google Visualization API
I have a pie chart with the legend position to labeled. My objective is to make all the text and legend marker lines black. Right now the lines are gray and so are the values-and-percentage numbers. Is there any way to make these all black?

miller

unread,
Apr 8, 2019, 10:46:21 AM4/8/19
to Google Visualization API
Here is what I have for options for the legend and label settings:

var options = {
          pieHole: 0.5,
          pieSliceText: 'none', //value-and-percentage//
          textStyle:{color: 'black'},
          legend: {position:'labeled', labeledValueText: 'both', alignment:'center',
            textStyle: {
            color: 'black',
            fontSize: 12}, strokeColor: {color: 'black'}, 
},
       
         
        };

miller

unread,
Apr 13, 2019, 7:37:14 PM4/13/19
to Google Visualization API
Solved:

var container = document.getElementById('pie_chart');
    var chart = new google.visualization.PieChart(container);
    chart.draw(view, options, observer);

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

//And to the header:

<script src="//cdn.jsdelivr.net/npm/mutationobserver-shim/dist/mutationobserver.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Reply all
Reply to author
Forward
0 new messages