javascript - Chart.js - IndexSizeError: Index or size is negative or greater than the allowed amount -

i'm drawing doughnut chart using chart.js arc function. worked fine sometime. started throwing above exception.

the exception thrown @ following line in chart.js arc function :

ctx.arc(this.x, this.y, this.outerradius, this.startangle, this.endangle); 

here values follows :

x = 0, y = 0, outerradius = -0.5, startangle = 4.71xxx, endangle = 4.71xxx

i guess 0 values x , y or negative value outerradius causing problem.

strange thing is working when clear browser cache , try same dataset. though dataset returned server same, above values different.

x = 50, y = 25, outerradius = 24.5, startangle = 4.71xxx, endangle = 4.71xxx

might x , y calculations done before canvas getting rendered in former case.

anyone else having similar issues? :-)

this because chart doesn't have finite size when it's being created (i.e. when chart(ctx).doughnut being called). chart width , height 0 , outerradius becomes -segmentstrokewidth / 4 (this 2 default - hence -0.5)

to fix error make sure canvas visible , sized before creating chart. example, if chart in tab, wait tab visible before creating chart. if in expanding panel, wait expanded (putting in callback function of animation right way go this)

you can replicate error setting canvas size 0

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

what seems happening in case clearing browser cache delays chart rendering canvas has right size time chart created. easy way verify wrap chart creation in settimeout delay.