Chart does not show - Failed to execute 'arc' on 'CanvasRenderingContext2D'

[danada]

If the dataset is changed on a doughnut chart with the responsive option set to true, an Uncaught IndexSizeError occurs when the container is resized (when resize() is called in Chart.js).

There is an issue open on the Chart.js repo: chartjs/Chart.js#592

However, the issue above states the problem happens upon resizing the initial chart. I am not experiencing the issue on the initial draw, but on subsequent chart creations. Should be able to post a sample soon, just wondering if there are any obvious answers before I get too deep into this one.

[danada]

Expanding on this- can only reproduce the problem if the chart that is to be resized has its dataset changed while it is not visible via ngShow or ngIf. If the chart is not displayed its dimensions cannot be accurately measured causing these negative angles.

[carlcraig]

This is interesting.

Would you be able to set up an example where we can replicate this problem?

Could potentially look at a way of catching the error? not sure if it will be possible though. Otherwise, could maybe add some way of not rendering the chart when it is hidden via ngshow/ngif ?

Let me know if you find out any more information on this.

[mbyrne00]

ng-if removes dom elements, so I doubt this would cause the problem, but thanks for the heads up because I noticed this problem with another chartjs angular plugin when using ng-show. With that plugin the workaround was to change the ng-show to an ng-if and it fixed my problem.

[danada]

The issue I was running into was that since the dataset was changing while
the chart was not visible OR present, certain attributes (such as heights)
weren't being correctly assigned to the chat object. Afterwards, when new
sizing is calculated, 0 is used for certain width / height values and
negative / invalid values are created (mainly with drawing arcs on
doughnuts).

Will be creating a fiddle for this when I get a chance.
On Oct 14, 2014 10:41 PM, "Matt Byrne" [email protected] wrote:

ng-if removes dom elements, so I doubt this would cause the problem, but
thanks for the heads up because I noticed this problem with another chartjs
angular plugin when using ng-show. With that plugin the workaround was to
change the ng-show to an ng-if and it fixed my problem.

—
Reply to this email directly or view it on GitHub
#9 (comment)
.

[popcorn245]

Okay here is the fix. I was beating my head against the wall on this one as well. It was as simple as adding a try / catch.

In Chart.js on line 1919 you will see the following:

if (instance.options.responsive){
    instance.resize(instance.render, true);
}

Change it to the following:

if (instance.options.responsive){
    try{
        instance.resize(instance.render, true);
    }catch(err){
        console.log(err.message);
    }
}

Hope this helps anyone else who is stuck and maybe it makes it into the code base. Thanks! ^_^

[danada]

This just prevents the error from stopping further script execution. I
think we need to figure out why the resize function is failing.

On Fri, 7 Nov 2014 11:27 popcorn245 [email protected] wrote:

Okay here is the fix. I was beating my head against the wall on this one
as well. It was as simple as adding a try / catch.

In Chart.js on line 1919 you will see the following:

if (instance.options.responsive){
instance.resize(instance.render, true);
}

Change it to the following:

if (instance.options.responsive){
try{
instance.resize(instance.render, true);
}catch(err){
console.log(err.message);
}
}

Hope this helps anyone else who is stuck and maybe it makes it into the
code base. Thanks! ^_^

—
Reply to this email directly or view it on GitHub
#9 (comment)
.

[beneshed]

+1

[phpPhil]

+10
At the moment this makes the library incompatible with mobile projects.

... or is there a temporary workaround for this?

[tricinel]

Same issue with tabs in bootstrap. If the chart is in a tab that is not active at the moment the page has loaded, the chart won't display at all.

I should add that this happens only for responsive charts, which makes sense since the tab is not shown at the moment. Perhaps adding an update() method to be able to manually update/redraw the chart would be a good option.

[ajgassner]

Another bad hack or workaround for meanwhile is to check if element is hidden, e.g.:

function isElementHidden(element) {
    return (element.offsetParent === null);
}

When element is hidden do nothing, when shown create/update chart.

[carlcraig]

Is anyone able to create an example that causes this to happen? Would be good so we can start looking for a solution. (have a basic setup here that you can fork and edit to replicate this problem http://jsfiddle.net/ovg2jrsd/1/ )

[phpPhil]

Here we go:
http://jsfiddle.net/phpPhil/cmac6rm7/2/

As in tricinel's comment, when the chart is located inside a container that is hidden at page load, the error is triggered and the chart is not rendered. When the container is showing and the window is resized the chart will render.

Note that in this fiddle the error is not thrown, but the incorrect behaviour can still be observed. This could possibly have to do with the chart type - I previously saw the error with bar and pie chart, not line chart as in the fiddle.

[lemex92]

I am experiencing this problem as well.

It's as simple as if you have a PIE chart and Doughnut chart and one is hidden.

The error is reproduced by doing the following:

• Load page with one of the two graph shown
• Change data that the graphs so
• Hide currently shown graph so other graph and it breaks

This error is also displayed every time the data is changed and one graph is hidden

[lemex92]

Uncaught IndexSizeError:
Failed to execute 'arc' on 'CanvasRenderingContext2D': The radius provided (-0.5) is negative.Chart.js:1206
Chart.Arc.Chart.Element.extend.drawChart.js:2477 (anonymous function)
Chart.js:181 helpers.eachChart.js:2468
Chart.Type.extend.drawChart.js:678 helpers.animationLoop.animationFrame

[lemex92]

Confirmed "ng-if" rather "ng-show"/"ng-hide" solves this issue and logically makes a lot of sense.

[rafialikhan]

I am getting a similar erorr Uncaught IndexSizeError in my angular implementation, the chart renders but still gives this error.

Chart.min.js:10 Uncaught IndexSizeError: Failed to execute 'arc' on 'CanvasRenderingContext2D': The radius provided (-0.5) is negative. Also when the charts are hidden and then loaded, it doesn't render at all.

But when i try to replicate the same, I am unable to do so here in jsfiddle.
I have 3 cases, 1 is ng-if, 2 is ng-show and 3rd is ng-include and everything works fine however chart only animates on ng-if and not the others.

Maybe this helps someone figure out a solution.
http://jsfiddle.net/o9ty4L62/

Reference Code - http://jsbin.com/ponumajuvo/1/edit

[mika76]

Also noticed this in bootstrap tab control

[jainanuj0812]

Facing the same error while using chart.js with ionic framework. Is any one get the solution or any type of hack?

[carlcraig]

Try putting the chart in a ng-if where it is only shown when the tab is visible.

[rafialikhan]

Thanks carlcraig - even though i didnt have tabs i still went ahead and used ng-if to show the charts only if data is loaded and ng-if worked - will test it in a few more scenarios and report back.

[DONSA]

I have the same problem using Visual Composer (that uses Bootstrap) on Wordpress.

[galcivar]

@rafialikhan how did you go about it? I don't use tabs either and I am struggling to determine if data is loaded as the chart is loaded only once and only happens when I navigate through the menu.

[krnlde]

If have the same issue here. It even throws when the site containing the chart isn't even active. The thing is I can't reproduce it deterministically, so I guess it's some kind of race condition. Sorry I can't provide a solution for now.

[JonahTurnquist]

I have the same issue when resizing a reactive pie chart

Options:
responsive: true,
maintainAspectRatio: false

[DanielMSchmidt]

same issue here, +1

[RWOverdijk]

👍 ..

[MyNameIsAlaa]

same issue here, +1

[jailandrade]

I don't know if it is the same issue but the chart doesn't show until I hover.

[daniel-seitz]

We use a modal. With Chart.js Version 1.0.1 included it works on normal templates. When included in a modal the error in this issues title shows up. Charts don't show up at all until I hover when we use 1.0.2 like @jailandrade said. That hover issue we have since tc-angular-chartjs after version 1.0.9 or so.

[daniel-seitz]

Our solution was as @mbyrne00 wrote: Change the ng-show to ng-if. The modal wasn't the problem but a parent element which had the ng-show attribute.

Also downloaded Chart.js 1.0.2 today and the 'Chart just shows on hover' problem is gone. @jailandrade you should try it now.

Attention: Here I could NOT get it solved with the main download link (Zip Download of Version 1.0.2) on https://github.com/nnnick/Chart.js. This one is gets the master branch as it seems. When you find commit 930b16a which is labeled as 'latest' of Version 1.0.2 on https://github.com/nnnick/Chart.js/releases THEN it works. That one has about 10 more lines of code. I didn't look up what the difference is. So anyone who has the problem, go with that commit and you should be fine.

[carlcraig]

I am going to close this.
I cannot replicate this in the new 2.X version which is using Chart.js 2.X

Please re-open if the issue still happens in 2.x.

[eighteen14k]

I'm seeing this error with 3.1.1 whilst attempt to build gauges (to show disk space used):

"Failed to execute 'arc' on 'CanvasRenderingContext2D': The radius provided (-2.4) is negative.

[eighteen14k]

But then with Chrome 57, I see a lot of errors with "SingleStat" when using the gauge.