chartsgoogle-visualizationdonut-chart

Google Donut Chart (Visualization) - Percentage greater than 100

I am creating a donut chart using Google Visualization. Its an Monthly Revenue Goal chart. e.g. let say goal is set 1000 and 800 is the revenue then 80% will be shown as completed and 20% as remaining. What I want to do is that if revenue is 2000 then 200% should be shown. (Visually it can not be greater than 100 (whole donut) , I just want to see the 200%.

Is this possible?

Solution

  • we can use the formatted value to display anything we need.

    first, we need to set the following config option, to display the value of the data table column.

    pieSliceText: 'value'

    then when loading the data table, we use object notation to provide the formatted value, where v: is the value, and f: is the formatted value.

    {v: 2000, f: '2,000 - 200%'}

    with the config option above, we can display anything...

    see following working snippet...

    google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['category', 'amount'],
    ['goal', 1000],
    ['revenue', {v: 2000, f: '2,000 - 200%'}],
  ]);

  var options = {
    pieHole: 0.4,
    pieSliceText: 'value'
  };

  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});
    #chart_div {
  height: 600px;
  width: 800px;
}
    <script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

    NOTE: but you may need to disable or provide a custom tooltip to match...

    google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['category', 'amount', {role: 'tooltip', type: 'string'}],
    ['goal', 1000, '1,000'],
    ['revenue', {v: 2000, f: '2,000 - 200%'}, '2,000 - 200%'],
  ]);

  var options = {
    pieHole: 0.4,
    pieSliceText: 'value'
  };

  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});
    #chart_div {
  height: 600px;
  width: 800px;
}
    <script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>