CODEWITHSUNDEEP
javascriptcsscanvaschartschart.js
RGilkes
RGilkes

Reputation: 1052

Chart.js canvas cuts off doughnut stroke

I am using Chart.js to create a doughnut chart, but have ran into an issue where the stroke on the doughnut is getting cut off by the canvas object. Padding/margins on the canvas haven't solved the issue for me. Any ideas what is going on?

JSFiddle here

HTML

<canvas id="myChart" width="400" height="400"></canvas>

JS

var data = [{
    value: 30,
    color: "#F7464A"
}, {
    value: 50,
    color: "#E2EAE9"
}, {
    value: 100,
    color: "#D4CCC5"
}, {
    value: 40,
    color: "#949FB1"
}, {
    value: 120,
    color: "#4D5360"
}];

var options = {
    animation: true,
    segmentStrokeWidth : 5
};

var c = $('#myChart');
var ct = c.get(0).getContext('2d');
var ctx = document.getElementById("myChart").getContext("2d");

myNewChart = new Chart(ct).Doughnut(data, options);

Upvotes: 2

Views: 2437

Answers (1)

Spencer Wieczorek
Spencer Wieczorek

Reputation: 21575

Because the item you are drawing is larger than 400 pixels, this is actually a bug in ChartJS. The current Alpha of ChartJS 2.0.0 addresses and fixes this problem. The segmentStrokeWidth is not taken into account when drawing the chart on the canvas, that causes the it to be larger than the canvas.

A fix for this version would be to subtract the outerRadius of your graph by half the stroke width:

var strokeWidth = 5;

var options = {
    animation: true,
    segmentStrokeWidth : strokeWidth
};

...

myNewChart = new Chart(ct).Doughnut(data, options);
myNewChart.outerRadius -= (strokeWidth/2);

Fiddle Example

Upvotes: 4

Related Questions