javascript - Use transparent stroke color with chartjs pie chart - Stack Overflow

admin管理员组

文章数量:1024603

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

Share Improve this question Follow asked Jun 5, 2015 at 11:01 ManoloManolo 26.6k2121 gold badges8989 silver badges134134 bronze badges 4

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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/

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

Share Improve this question Follow asked Jun 5, 2015 at 11:01 ManoloManolo 26.6k2121 gold badges8989 silver badges134134 bronze badges 4

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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/

本文标签： javascriptUse transparent stroke color with chartjs pie chartStack Overflow