CODEWITHSUNDEEP
javascriptapichartsgoogle-visualization
user928112
user928112

Reputation: 582

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 you look at the image below, the font color only applies to the label name, but not the percentage text or the label line. Is there anything I can do to change the color for the percentage text and the label line to white?

Pie chart

Upvotes: 3

Views: 3845

Answers (2)

Camilo Penagos
Camilo Penagos

Reputation: 21

change the css:

g g g text
{
    fill: black;
}

Upvotes: 2

WhiteHat
WhiteHat

Reputation: 61222

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 = new MutationObserver(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']
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 1

Related Questions