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.

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.

• javascript
• chart.js

• Can you use your own class names in chart.js? – lharby Commented Jun 5, 2015 at 11:04
• @lharby - Do you mean to use an other name for options object? – Manolo Commented Jun 5, 2015 at 11:07
• I was thinking if you can apply your own class name to the element you want, you can then write svg css, see here: developer.mozilla/en-US/docs/Web/SVG/Attribute/…. Set stroke opacity to 0. But this might not be supported as part of the chart.js options. – lharby Commented Jun 5, 2015 at 11:09
• Why not make a jsfiddle? And we can try it out. – lharby Commented Jun 5, 2015 at 11:09

1 Answer 1

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/tabb8gy0/ with this - http://jsfiddle/m2k62fgp/