Legend circle radius Google Chart

Question

I am using Google visualization to draw a pie chart. I want to change the radius of the color circles in the legend.

Is that possible ?

The output from Google graph looks like this:

<circle cx="8" cy="8" r="8" stroke="none" stroke-width="0" fill="#de6913" style="
    width: 20px;
"></circle>

Its the r="8" I want to modify.

Here's a standard example of a Piechart:

  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     11],
      ['Eat',      2],
      ['Commute',  2],
      ['Watch TV', 2],
      ['Sleep',    7]
    ]);

    var options = {
      title: 'My Daily Activities'
    };

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

    chart.draw(data, options);
  }

WhiteHat · Accepted Answer · 2016-07-26T12:56:47.533

0

you can make modifications, once the 'ready' event fires on the chart

something like this would work

google.visualization.events.addListener(chart, 'ready', function () {
  var legendCircles = container.getElementsByTagName('circle');
  Array.prototype.forEach.call(legendCircles, function(circle) {
    circle.setAttribute('r', 10);
  });
});

but if you want the circles and labels to be consistent with each other,
use the legend.textStyle configuration option to increase the fontSize

see following working snippet...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Task',     'Hours per Day'],
      ['Percent',  10],
      ['Rest',     90],
    ]);

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

    chart.draw(data, {
      legend: {
        textStyle: {
          fontSize: 24
        }
      }
    });
  },
  packages:['corechart']
});

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

edited Jul 26 '16 at 12:56

answered Jul 26 '16 at 12:15

WhiteHat

59,912
7
51
133

Thanks WhiteHat. Yeah it helps with the circle radius. But as the label dont adjust accordingly, I would have to then change the x,y coordinates of all the text labels as well, to make sure the circles dont collide and to make padding on the label. – topstash Jul 26 '16 at 12:48
you can also use `legend.textStyle` to increase the `fontSize`, see edit to above answer... – WhiteHat Jul 26 '16 at 12:57
It helps, but In my case it completely messes up the layout if I adjust the font-size to reposition the elements. What I really need is to be able to only modify the circle radius and have the labels adjust accordingly. – topstash Aug 01 '16 at 09:23
only option is manual, unfortunately. but seems if you're increasing the radius by a certain amount, adjusting x, y to match wouldn't be too difficult – WhiteHat Aug 01 '16 at 11:25

Legend circle radius Google Chart

1 Answers1