CODEWITHSUNDEEP
javascriptchart.js
Manolo
Manolo

Reputation: 26350

Use transparent stroke color with chartjs pie chart

Following the chart.js docs, I try to draw a transparent stroke line in a pie chart:

var options = { segmentStrokeColor: "rgba(255,255,255,0)" };

or 

var options = { segmentStrokeColor: "transparent" };

But the stroke line is not drawn with these values. Of course it works if I use any other color.

Upvotes: 5

Views: 6320

Answers (1)

potatopeelings
potatopeelings

Reputation: 41075

The border or segment stroke is drawn over the sectors. So if you set the color to transparent, you won't see any gap between the sectors (I assume that is what you are expecting). It'll be almost as if you set storkewidth to 0.

It's pretty obvious if you set the segmentStrokeWidth to a high enough value and set a translucent value i.e. something like

var myPieChart = new Chart(ctx).Pie(data, {
    segmentStrokeWidth: 20,
    segmentStrokeColor: "rgba(255, 255, 255, 0.4)"
});

Contrast this fiddle - http://jsfiddle.net/tabb8gy0/ with this - http://jsfiddle.net/m2k62fgp/

Upvotes: 3

Related Questions