I am using chart.js library for showing graphs. I am trying to render a Doughnut graph. When i pass the data, where the values are grater than 0, it is showing the graph as the fiddle link /

Data i'm passing in this case is

{ value: 10, color:"#F7464A", highlight: "#FF5A5E", label: "Red" },
{ value: 70, color: "#46BFBD", highlight: "#5AD3D1", label: "Green" },
{ value: 80, color: "#FDB45C", highlight: "#FFC870", label: "Yellow" }

My concern is, when the values passed are all zeros, then it is not showing anything, as in this fiddle /. So the user will never know, what is missing in the page.

Data i'm passing in this case is

{ value: 0, color:"#F7464A", highlight: "#FF5A5E", label: "Red" },
{ value: 0, color: "#46BFBD", highlight: "#5AD3D1", label: "Green" },
{ value: 0, color: "#FDB45C", highlight: "#FFC870", label: "Yellow" }

I would like to show something like the below image, when all the values are zeros.

How can we achieve this, can someone help me on this?

I am using chart.js library for showing graphs. I am trying to render a Doughnut graph. When i pass the data, where the values are grater than 0, it is showing the graph as the fiddle link http://jsfiddle/rajeshwarpatlolla/9mby62w4/1/

Data i'm passing in this case is

{ value: 10, color:"#F7464A", highlight: "#FF5A5E", label: "Red" },
{ value: 70, color: "#46BFBD", highlight: "#5AD3D1", label: "Green" },
{ value: 80, color: "#FDB45C", highlight: "#FFC870", label: "Yellow" }

My concern is, when the values passed are all zeros, then it is not showing anything, as in this fiddle http://jsfiddle/rajeshwarpatlolla/9mby62w4/3/. So the user will never know, what is missing in the page.

Data i'm passing in this case is

{ value: 0, color:"#F7464A", highlight: "#FF5A5E", label: "Red" },
{ value: 0, color: "#46BFBD", highlight: "#5AD3D1", label: "Green" },
{ value: 0, color: "#FDB45C", highlight: "#FFC870", label: "Yellow" }

I would like to show something like the below image, when all the values are zeros.

How can we achieve this, can someone help me on this?

• javascript
• html
• css
• graph
• chart.js

• Why not detect that problem, and display a banner saying something like "No data to display!"? – Nisarg Shah Commented Sep 8, 2017 at 5:48
• May I know why are you using an old version of ChartJS?! This cloud be easily done with a plugin if you use the latest version.. – ɢʀᴜɴᴛ Commented Sep 8, 2017 at 8:53
• same issue with new version also. – Rajeshwar Commented Sep 8, 2017 at 9:00

2 Answers 2

Show chart when all data values are zero

This can be achieved in a more elegant way using the following chart plugin :

Chart.plugins.register({
   beforeInit: function(chart) {
      var data = chart.data.datasets[0].data;
      var isAllZero = data.reduce((a, b) => a + b) > 0 ? false : true;
      if (!isAllZero) return;
      // when all data values are zero...
      chart.data.datasets[0].data = data.map((e, i) => i > 0 ? 0 : 1); //add one segment
      chart.data.datasets[0].backgroundColor = '#d2dee2'; //change bg color
      chart.data.datasets[0].borderWidth = 0; //no border
      chart.options.tooltips = false; //disable tooltips
      chart.options.legend.onClick = null; //disable legend click
   }
});

^{* add this at the beginning of your script}

note: make sure to use the latest version of ChartJS, which is 2.6.0 atm.

see - working example

You can add some CSS that gives a background to the canvas when chart is not drawn onto it:

canvas {
  background: radial-gradient(circle at center, rgba(0,0,0,0) 0, rgba(0,0,0,0) 55%, rgba(0,0,0,0.2) 56%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.2) 64%, rgba(0,0,0,0) 65%,rgba(0,0,0,0) 100%);
}

Here's the fiddle: http://jsfiddle/Nisarg0/9mby62w4/7/

I would ideally apply the radial-gradient when I know for a fact that the values are zero - so the CSS selector would be something like canvas.no-data, and I would add the class .no-data to the canvas only when the values are zero.