javascript - negative value in pie chart - Stack Overflow

admin管理员组

文章数量:1406052

Is it possible to represent negative values in google pie chart? I have data with negative values and it is showing "Negative values are invalid for a pie chart". Is there any way to represent negative values in a pie chart?

Is it possible to represent negative values in google pie chart? I have data with negative values and it is showing "Negative values are invalid for a pie chart". Is there any way to represent negative values in a pie chart?

• javascript
• reactjs

Share Improve this question Follow edited Nov 23, 2018 at 7:04 Rohan Dhar 1,83711 gold badge1212 silver badges2121 bronze badges asked Nov 23, 2018 at 5:53 KavyaKavya 2111 silver badge22 bronze badges 2

• How does one represent a negative value? – Blue Commented Nov 23, 2018 at 5:58
• 3 @kavya probably you should try using a histogram/bar chart with negative axes. I don't think it is a valid use case for a pie chart – Leela Venkatesh K Commented Nov 23, 2018 at 6:16

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

No - Google Pie Charts can not display negative values.

https://jsfiddle/dxtkfL7v/

  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',  -5],
      ['Watch TV', 2],
      ['Sleep',    7]
    ]);

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

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

    chart.draw(data, options);
  }

Google charts specifically show the error "Negative values are invalid for a pie chart." because they do not support this.

See https://ux.stackexchange./questions/89598/how-to-show-negative-values-in-a-pie-chart for some ideas on how you might display negative values in a pie chart. You could do some math and apply relevent styles to the charts so that they display like this - however this still does not change that the google charts PieChart does not support negative values directly.

No you can't. Pie chart is a plete circle which represents 100%. In a pie chart we are supposed to divide it into percentage of the surface area of the circle. Since percentage cannot be a negative value, so you cannot plot it on a pie graph. There is no such concept. Below is an example of a Pie chart. As you can see its in percentage and there cannot be any negative value.

If you want to plot negative values on a graph you should use bar graph or line graph with negative axis. Google provides good kind of charts. And there are other options also. One of the best chart in this category is https://gionkunz.github.io/chartist-js/

Wele to the Stack Overflow munity.

There is no way you can represent negative values in pie chart. However, there is a workaround for that. What you can do is that, you can use Donut Chart for the purpose you want to achieve. A Donut Chart has two parts inner part and outer part, both having a range from 0-100%, you can use one part for your negative values and the other one for positive values. The result is a visual representation of what is positive, negative, and how positive or negative overall the set is.

Have a look at the Donut Chart Plugin here.

Plus, there are several other ways to represent a negative value on your graph, you can use column chart, refer here.

I would personally suggest you to use Bar with negative stack, which particularly would suit your requirement.

Hope this Helps!

本文标签： javascriptnegative value in pie chartStack Overflow