Chartist-js: Change Stroke Widths for Donut Chart Data

[redrobotx]

Issue #32 had a solution for giving different lines different widths on a line chart. I'm looking to duplicate that effect with a pie/donut chart to look like the image below. How do I do that?

[gionkunz]

Hey there. This can be done with Chartist. From the examples here http://gionkunz.github.io/chartist-js/api-documentation.html#chartistpie-function-pie you can see that you can use an object notation for the series where you can specify class names that will be used to annotate the series groups.

Then you can apply styles to the pie / donut slices using CSS. Be aware that the stroke-width for the donut chart is currently getting set via JavaScript in the style attribute. This unfortunately requires you to use !important for your stroke width style.

Here is an example: http://jsbin.com/cirufu/1/edit?css,js,output

Here is a simple style variation: http://jsbin.com/cirufu/3/edit?css,js,output

Hope that helps.
Cheers
Gion

[redrobotx]

Wow! That's EXACTLY what I was trying to do! That !important part was key. Thank you, so much! I'm really new to javascript, but if there's any way I can help your project, please let me know.

[viveksh09876]

can you update code in jsbin url's in the solution that you've provided. Its not working.

[zanthrax]

To fix gionkunz's example change '.ct-slice.ct-donut' in the css panel to '.ct-slice-donut'.

[seabass223]

This example places the number in the center of the circle