Using Chartist.js how do you change the color of the stroke for a donut chart?

Question

Hello I am trying to create the following donut chart using Chartist.js:

GOAL CHART

This is what the chart looks like currently:

Chartist.js Donut Chart

I am trying to find where or how I can change the colors of this chart to match the 1st donut chart. The red and pink seem to be the defaults. I haven't been able to find any documentation of how to accomplish this goal. I would also like to customize the size of the stroke and the size of the chart itself. Any help is greatly appreciated!

Current code:

// ** START CHARTIST DONUT CHART ** //
var chart = new Chartist.Pie('.ct-chart', {
  series: [70, 30],
  labels: [1, 2]
}, {
  donut: true,
  showLabel: false
});
chart.on('draw', function(data) {
  if(data.type === 'slice') {
    // Get the total path length in order to use for dash array animation
    var pathLength = data.element._node.getTotalLength();

    // Set a dasharray that matches the path length as prerequisite to animate dashoffset
    data.element.attr({
      'stroke-dasharray': pathLength + 'px ' + pathLength + 'px'
    });
    // Create animation definition while also assigning an ID to the animation for later sync usage
    var animationDefinition = {
      'stroke-dashoffset': {
        id: 'anim' + data.index,
        dur: 1000,
        from: -pathLength + 'px',
        to:  '0px',
        easing: Chartist.Svg.Easing.easeOutQuint,
        // We need to use `fill: 'freeze'` otherwise our animation will fall back to initial (not visible)
        fill: 'freeze'
      }
    };
    // If this was not the first slice, we need to time the animation so that it uses the end sync event of the previous animation
    if(data.index !== 0) {
      animationDefinition['stroke-dashoffset'].begin = 'anim' + (data.index - 1) + '.end';
    }
    // We need to set an initial value before the animation starts as we are not in guided mode which would do that for us
    data.element.attr({
      'stroke-dashoffset': -pathLength + 'px'
    });
    // We can't use guided mode as the animations need to rely on setting begin manually
    // See http://gionkunz.github.io/chartist-js/api-documentation.html#chartistsvg-function-animate
    data.element.animate(animationDefinition, false);
  }
});
// ** END CHARTIST DONUT CHART ** //

HTML:

<div class="ct-chart ct-perfect-fourth"></div>

Overcasting

Answer 1

So I figured it out...

I had to go into css and override the defaults. I had to make sure that the css file was loaded after the cdn for Chartist. Then just set width and height of ct-chart.

.ct-series-a .ct-bar, .ct-series-a .ct-line, .ct-series-a .ct-point, .ct-series-a .ct-slice-donut {
    stroke: #0CC162;
}
.ct-series-b .ct-bar, .ct-series-b .ct-line, .ct-series-b .ct-point, .ct-series-b .ct-slice-donut {
    stroke: #BBBBBB;
}
.ct-chart {
    margin: auto;
    width: 300px;
    height: 300px;
}

Then I had to add donutWidth key to the chart object to set the stroke width:

var chart = new Chartist.Pie('.ct-chart', {
  series: [7, 3],
  labels: [1, 2]
}, {
  donut: true,
  donutWidth: 42,
  showLabel: false
});

Overcasting

Answer 2

A little later here, but you can provide class names to the data series to allow you to change the colors on each graph independently:

From the docs:

The series property can also be an array of value objects that contain a value property and a className property to override the CSS class name for the series group.

Instead of:

series: [70, 30]

Do this:

series: [{value: 70, className: 'foo'}, {value: 30, className: 'bar'}]

and then you can style however you'd like with the stroke css property

Cinchonism

Answer 3

Chartist relies on modifying CSS to control the colors, sizes, etc. of the charts. I'd suggest having a look at the documentation here to learn lots of cool tips and tricks: https://gionkunz.github.io/chartist-js/getting-started.html

But to your specific question, here's an except from the above link that tells you how to control the donut chart:

/* Donut charts get built from Pie charts but with a fundamentally difference in the drawing approach. The donut is drawn using arc strokes for maximum freedom in styling */
.ct-series-a .ct-slice-donut {
  /* give the donut slice a custom colour */
  stroke: blue;
  /* customize stroke width of the donut slices in CSS. Note that this property is already set in JavaScript and label positioning also relies on this. In the right situation though it can be very useful to style this property. You need to use !important to override the style attribute */
  stroke-width: 5px !important;
  /* create modern looking rounded donut charts */
  stroke-linecap: round;
}

Edgebone

Answer 4

I've managed to change the stroke color by overriding this class. You can change ct-series-b to which bar graph you change to change color (ct-series-a, ct-series-b and etc).

<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.10.1/chartist.min.css" />
    <style>
        .ct-series-b .ct-bar, .ct-series-b .ct-line, .ct-series-b .ct-point, .ct-series-b .ct-slice-donut {
             stroke: goldenrod;
        }
    </style>
  </head>
  <body>
    <div class="ct-chart ct-perfect-fourth"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.10.1/chartist.min.js"></script>
    <script>
      window.onload = function() {
        var data = {
          labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
          series: [
            [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
            [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
          ]
        };

        var options = {
          seriesBarDistance: 10
        };

        var responsiveOptions = [
          ['screen and (max-width: 640px)', {
            seriesBarDistance: 5,
            axisX: {
              labelInterpolationFnc: function (value) {
                return value[0];
              }
            }
          }]
        ];

        new Chartist.Bar('.ct-chart', data, options, responsiveOptions);
      }
    </script>
  </body>
</html>

Antiknock

Answer 5

What I did to make it work is the following. I am using a bar chart, but I guess it is the same for all graphs.

my css

.ct-chart .ct-series.stroke-green .ct-bar {
 stroke: green;
}
.ct-chart .ct-series.stroke-yellow .ct-bar {
 stroke: rgba(255, 167, 38, 0.8);
}
.ct-chart .ct-series.stroke-red .ct-bar {
  stroke: rgba(230, 20, 20, 0.8);
}

chart conf

{
  labels: ['Jan', 'Feb'],
  series: [
    {className:"stroke-green",  meta:"OK", data: [12,23] },
    {className:"stroke-yellow", meta:"Rest", data: [34,34]},
    {className:"stroke-red", meta: "NOK", data: [2, 5] },
  ]
}

Fragrant

Answer 6

This code worked for me to change the color of the stroke:

// Prepare chart params
var chartColors = ['orange'];
var chartWidth = 9;
var percent = 77;
var arc = percent ? 360 * percent / 100 : 0;

// Create chart
var chart = new Chartist.Pie('.my-donut', {
  series: [arc],
  labels: [percent + '%'],
}, {
  donut: true,
  donutWidth: chartWidth,
  startAngle: 0,
  total: 360,
});

// Set chart color
chart.on('draw', function(data) {
  if(data.type === 'slice') {
    if (chartColors[data.index]) {
      data.element._node.setAttribute('style','stroke: ' + chartColors[data.index] + '; stroke-width: ' + chartWidth + 'px');
    }
  }
});

Ache

Answer 7

Bar charts with a single serie - use nth-child(N):

.ct-bar:nth-child(1){
    stroke: #379683 !important;
}

.ct-bar:nth-child(2){
    stroke: #91A453 !important;
}

.ct-bar:nth-child(3){
    stroke: #EFB200 !important;
}

Hidie

Answer 8

The answers above wont work for me since I'm dynamically excluding categories with 0 points. You can do it pragmatically though. You can directly modify the svg node. My charts use fill instead of stroke but the method should be the same. This worked for me in Chrome:

const data = {
    series: [],
    labels: []
};
const pieColors = [];

enrollment.CoverageLevelTotals.forEach(e => {
    if (e.Total === 0) return;
    data.series.push(e.Total);
    data.labels.push(e.Total);
    pieColors.push(colors[e.CoverageLevel]);
});

new Chartist.Pie(document.getElementById(canvasId), data,
    {
        width: '160px',
        height: '160px',
        donut: true,
        donutWidth: 50,
        donutSolid: true,
        showLabel: (data.series.length > 1)
    }).on('draw',function (data) {
        if (data.type !== 'slice') return;
        data.element._node.setAttribute('style','fill:' + pieColors[data.index]);
    });

}

Truax