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

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.<anonymous> (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

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

[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 😕