javascriptgoogle-visualizationgoogle-pie-chart

Legend circle radius Google Chart


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);
  }

Solution

  • 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>