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

[sandip-stats]

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

[etimberg]

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

[sandip-stats]

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

[etimberg]

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

[sandip-stats]

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>

TO

<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

[nicdcs]

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 :/

[etimberg]

I think this is the same issue as #4397 which is already fixed

[MarciaLing]

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);