I'm facing an issue with Google Charts. I want a pie chart showing all values with a labeled legend, including very small values that are below 0.1%.

Say i have the following data:

    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     66],
      ['Sleep',    33.95],
      ['Eat', 0.05]
    ]);

(Total matches up to 100)

The problem now is that when calculating the percentages, Google Charts is rounding the values, causing 33.95 to bee 34 and thus 0.05 being 0.

Example here: /

Is there any way to let the Charts engine create percentages with 2 decimals instead of 1 decimal?

I'm facing an issue with Google Charts. I want a pie chart showing all values with a labeled legend, including very small values that are below 0.1%.

Say i have the following data:

    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     66],
      ['Sleep',    33.95],
      ['Eat', 0.05]
    ]);

(Total matches up to 100)

The problem now is that when calculating the percentages, Google Charts is rounding the values, causing 33.95 to bee 34 and thus 0.05 being 0.

Example here: https://jsfiddle/4qe7h21s/

Is there any way to let the Charts engine create percentages with 2 decimals instead of 1 decimal?

• javascript
• charts
• google-visualization
• pie-chart

2 Answers 2

since no option to change format or precision of the percentage

first, need to set
sliceVisibilityThreshold: 0.0001

so 'Eat' doesn't fall into 'Other'

next, provide custom formatted values in the data
{v: 66, f: '66.00%'}

set pieSliceText and tooltip.text to 'value'

since the slice for 'Eat' is so small, use
tooltip.trigger: 'selection'

see following example, slices show correct percentage

click on legend item for 'Eat' to see tooltip

google.charts.load('current', {
  callback: function () {
    new google.visualization.PieChart(document.getElementById('chart_div')).draw(
      google.visualization.arrayToDataTable([
        ['Task',  'Hours per Day'],
        ['Work',  {v: 66, f: '66.00%'}],
        ['Sleep', {v: 33.95, f: '33.95%'}],
        ['Eat',   {v: 0.05, f: '0.05%'}]
      ]),
      {
        height: 400,
        legend: {
          position: 'right'
        },
        pieSliceText: 'value',
        sliceVisibilityThreshold: 0.0001,
        title: 'My Daily Activities',
        tooltip: {
          showColorCode: true,
          text: 'value',
          trigger: 'selection'
        },
        width: 600
      }
    );
  },
  packages: ['corechart', 'table']
});

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

I needed to still show tooltip on hover, but not only on click, so I found the solution, using Handling Events API: https://developers.google./chart/interactive/docs/events. Here is a little improvement, works on both slice and legend hover:

function mouseOverHandler(selection) {
   chart.setSelection([selection]);
}

function mouseOutHandler() {
   chart.setSelection();
}

google.visualization.events
  .addListener(chart, 'onmouseover', mouseOverHandler);
google.visualization.events
  .addListener(chart, 'onmouseout', mouseOutHandler);

And here is a full working example (based on @WhiteHat's snippet):

google.charts.load('current', {
  callback: function () {
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(
      google.visualization.arrayToDataTable([
        ['Task',  'Hours per Day'],
        ['Work',  {v: 66, f: '66.00%'}],
        ['Sleep', {v: 33.95, f: '33.95%'}],
        ['Eat',   {v: 0.05, f: '0.05%'}]
      ]),
      {
        height: 400,
        legend: {
          position: 'right'
        },
        pieSliceText: 'value',
        sliceVisibilityThreshold: 0.0001,
        title: 'My Daily Activities',
        tooltip: {
          showColorCode: true,
          text: 'value',
          trigger: 'selection'
        },
        width: 600
      }
    );

    function mouseOverHandler(selection) {
       chart.setSelection([selection]);
    }

    function mouseOutHandler() {
       chart.setSelection();
    }

    google.visualization.events
      .addListener(chart, 'onmouseover', mouseOverHandler);
    google.visualization.events
      .addListener(chart, 'onmouseout', mouseOutHandler);
  },
  packages: ['corechart', 'table']
});

#chart_div svg g:last-child > g:last-child {
    pointer-events: none;
}

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