Chart.js: [ Polar Chart inside bootstrap's Tabs] Failed to execute 'arc' on 'CanvasRenderingContext2D': The radius provided (-190) is negative.

Created on 6 Apr 2017 · 7Comments · Source: chartjs/Chart.js

Seeing the following issue when using Polar Charts inside bootstrap tabs.

Scripts used along with their versions:
jquery.js - 2.2.1 version
Chart.bundle.min.js - 2.1.5 version
bootstrap.min.js - 3.3.7 version

Have 3 tabs - 1st & 2nd tab contains bar charts, 3rd has the polar chart
Do note that the data is fetched via Ajax call to the server.

Here is the Stack:-

_Uncaught DOMException: Failed to execute 'arc' on 'CanvasRenderingContext2D': The radius provided (-190) is negative.
at https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.5/Chart.bundle.min.js:15:16979
at Object.r.each (https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.5/Chart.bundle.min.js:13:18227)
at n.draw (https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.5/Chart.bundle.min.js:15:16701)
at t.Controller. (https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.5/Chart.bundle.min.js:13:10032)
at Object.r.each (https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.5/Chart.bundle.min.js:13:18227)
at t.Controller.draw (https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.5/Chart.bundle.min.js:13:10005)
at n.o.render (https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.5/Chart.bundle.min.js:13:9704)
at Object.startDigest (https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.5/Chart.bundle.min.js:13:5255)
at https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.5/Chart.bundle.min.js:13:4724_

A resize of window is required to render the graphs.

Strange thing being if i move the polar chart to the 1st tab, all works fine.

My JS looks like the following:

function drawBarChart() {
  var jsonData = $.ajax({
    url: location.origin+'/build-report-3.0.1/getBuildUsageStats/builduserstats',
    dataType: 'json',
  }).done(function (results) {
    var tempData = {
      labels: [],
      datasets: [{
          data : [],
          backgroundColor : [],
      }]
    };
    var ct =0;
    for (var key in results) {
        tempData.labels[ct] = key;
        tempData.datasets[0].data[ct] = results[key];
        tempData.datasets[0].backgroundColor[ct] = 'rgba(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',0.4)';
        ct++;
   }
    // Get the context of the canvas element we want to select
    var ctx = document.getElementById("userSuccessRate");
    // set the Options
    var option = {
       animation: {
               duration:5000
       },
       title: {
           display:true,
           text:" INDIVIDUAL DEVELOPER's RUN RATE "
       },
       legend: {
           position:'bottom'
       },         
       deferred: {
           xOffset: 150, 
           delay: 250
       }
    }; 
    //Chart.defaults.polarArea.scale.lineArc = true;
    // Instantiate a new chart
    var myBarChart = new Chart(ctx, {
       type: 'polarArea',
       data:tempData,
       options:option,    
    });
  });
}
drawBarChart();

Am i missing something or doing anything incorrectly?
Any help would be really appreciated.

Regards,
Sandip

help wanted duplicate bug

Source

sandip-stats

Most helpful comment

Using Chart.js the latest version 2.7.2.
Tried all those solution and this problem still exits.
Finally I modified the source file Chart.boundle.js which was downloaded from cdnjs.
and set every radius value before passed to arc function to be positive.
This way works perfectly fine.

ctx.arc(vm.x, vm.y, Math.abs(vm.outerRadius), sA, eA);
ctx.arc(vm.x, vm.y, Math.abs(vm.innerRadius), eA, sA, true);
ctx.arc(x, y, Math.abs(radius), 0, Math.PI * 2);
ctx.arc(scale.xCenter, scale.yCenter, Math.abs(radius), 0, Math.PI * 2);

MarciaLing on 22 Mar 2018

👍4

All 7 comments

I believe this is fixed in later versions. Can you try version 2.5.0?

etimberg on 7 Apr 2017

Hello Etimberg,
I get the same issue with Charts 2.5.0 version as well.

Here is the stack.

Chart.bundle.min.js:15 Uncaught DOMException: Failed to execute 'arc' on 'CanvasRenderingContext2D': The radius provided (-175) is negative.
at c (https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js:15:28854)
at https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js:16:299
at Object.r.each (https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js:13:24493)
at n.draw (https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js:16:159)
at t.Controller. (https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js:13:15524)
at Object.r.each (https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js:13:24493)
at t.Controller.draw (https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js:13:15497)
at n.l.render (https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js:13:15239)
at Object.startDigest (https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js:13:8349)
at https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js:13:7818

Regards,
Sandip

sandip-stats on 7 Apr 2017

Thanks for checking @sandip-stats. Is it possible to drop this in a fiddle so we can debug?

etimberg on 7 Apr 2017

Hello @etimberg
You can use the following - https://jsfiddle.net/sandybose/obuyoyq7/
You would notice if you change:

<div role="tabpanel" class="tab-pane fade in active" id="buildusage">
    ..
  </div>
  <div role="tabpanel" class="tab-pane fade" id="issuescaught">
    ..
  </div>
  <div role="tabpanel" class="tab-pane fade" id="developerstat">
    <canvas id="userSuccessRate"></canvas>
  </div>

<div role="tabpanel" class="tab-pane fade in active" id="buildusage">
    <canvas id="userSuccessRate"></canvas>
  </div>
  <div role="tabpanel" class="tab-pane fade" id="issuescaught">
    ..
  </div>
  <div role="tabpanel" class="tab-pane fade" id="developerstat">
    ...
  </div>

the chart works.

Do note this is just a mock up; so that the issue can be showcased. In my code the data is being fetched via an ajax call.

Regards,
Sandip

sandip-stats on 7 Apr 2017

This is nothing bootstrap specific. See this fiddle https://jsfiddle.net/L7k6Lxfb/

If the display style of the container around the canvas is "none" or "inline" the exception is thrown.
(Uncaught DOMException: Failed to execute 'arc' on...)

So you can't initialize a polar chart in a "collapsed" area :/