I'm drawing a doughnut chart using Chart.js Arc function. It worked fine for sometime. But recently it started throwing the above exception.

The exception is thrown at the following line in Chart.js Arc function :

ctx.arc(this.x, this.y, this.outerRadius, this.startAngle, this.endAngle);

Here the values are as follows :

x = 0, y = 0, outerRadius = -0.5, startAngle = 4.71XXX, endAngle = 4.71XXX

I guess the zero values for x and y or the negative value for outerRadius is causing the problem.

Strange thing is that it is working perfectly when I clear the browser cache and try for the same dataset. Though the dataset returned by the server is same, the above values are different.

x = 50, y = 25, outerRadius = 24.5, startAngle = 4.71XXX, endAngle = 4.71XXX

Might be the x and y calculations are done before the canvas is getting rendered in the former case.

Anyone else having similar issues? Thanks :-)

I'm drawing a doughnut chart using Chart.js Arc function. It worked fine for sometime. But recently it started throwing the above exception.

The exception is thrown at the following line in Chart.js Arc function :

ctx.arc(this.x, this.y, this.outerRadius, this.startAngle, this.endAngle);

Here the values are as follows :

x = 0, y = 0, outerRadius = -0.5, startAngle = 4.71XXX, endAngle = 4.71XXX

I guess the zero values for x and y or the negative value for outerRadius is causing the problem.

Strange thing is that it is working perfectly when I clear the browser cache and try for the same dataset. Though the dataset returned by the server is same, the above values are different.

x = 50, y = 25, outerRadius = 24.5, startAngle = 4.71XXX, endAngle = 4.71XXX

Might be the x and y calculations are done before the canvas is getting rendered in the former case.

Anyone else having similar issues? Thanks :-)

• javascript
• angularjs
• chart.js

• According to the specs for CanvasRenderingContext2d.arc: "Negative values for radiusX or radiusY must cause the implementation to throw an IndexSizeError exception." So your problem indeed es from here, now, you didn't provide enough info for us to know how this value is set. – Kaiido Commented Sep 21, 2015 at 13:25

1 Answer 1

This is because your chart doesn't have a finite size when it's being created (i.e. when Chart(ctx).Doughnut is being called). The chart width and height are 0 and the outerRadius bees -segmentStrokeWidth / 4 (this is 2 by default - hence the -0.5)

To fix this error make sure your canvas is visible and properly sized before creating the chart. For example, if the chart is in a tab, wait for the tab to be visible before creating the chart. If it is in an expanding panel, wait for it to be pletely expanded (putting it in the callback function of the animation would be the right way to go about this)

You can replicate the error by setting the canvas size to 0

<canvas id="myChart" width="0" height="0"></canvas>

What seems to be happening in your case is that clearing the browser cache delays the chart rendering so that the canvas has the right size by the time the chart is created. An easy way to verify this would be to wrap your chart creation in a setTimeout with some delay.