CODEWITHSUNDEEP
angularjschartsgoogle-visualization
Sindhuja Govindaraju
Sindhuja Govindaraju

Reputation: 47

Zero value in google pie charts

I am using angularjs and Google charts.

How to include zero values in Google Pie Chart? I am able to show it in the legend by including sliceVisibilityThreshold: 0 see screenshot to see what I already have

But what I want is to display it in both legend and in the chart: display zero value in pie chart like this

Is there any way to achieve what I want? I searched in Google forums but couldn't find any solution. Thanks in advance.

Upvotes: 3

Views: 2082

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

use the option for legend.position: 'labeled' to show a line for the zero values 

  legend: {
    position: 'labeled'
  },

see following working snippet... 

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable({
      "cols": [
        {"label": "Country", "type": "string"},
        {"label": "# of Devices", "type": "number"}
      ],
      "rows": [
        {"c": [{"v": "Canada"}, {"v": 0}]},
        {"c": [{"v": "Mexico"}, {"v": 33}]},
        {"c": [{"v": "USA"}, {"v": 34}]}
      ]
    });

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

    chart.draw(data, {
      height: 400,
      legend: {
        position: 'labeled'
      },
      sliceVisibilityThreshold: 0,
      width: 600
    });
  },
  packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 1

Related Questions