donut chart with different widths

by Gowtham Reddy

HTML

<!DOCTYPE html>
<html>
<head>
<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<link href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="ct-chart ct-square"></div>
</body>
</html>

CSS

.ct-base-bar .ct-slice-donut {
  stroke: lightgrey;
  stroke-width: 10px !important;
}

.ct-fill-bar .ct-slice-donut {
  stroke: #FE4365;
  stroke-width: 30px !important;
}

JavaScript

var chart = new Chartist.Pie('.ct-chart', {
  series: [{
    className: 'ct-fill-bar',
    data: 40
  }, {
    className: 'ct-base-bar',
    data: 60
  }]
}, {
  donut: true,
  showLabel: false
});