Full option Pie Chart

This is a working example of full option pie chart.

by Bharadhwaj CN

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<link rel="stylesheet" href="https://bharadhwajcn.github.io/cinch-charts/static/css/min/cinch-charts.min.css">
<script src="https://bharadhwajcn.github.io/cinch-charts/static/js/min/pie.min.js"></script>
<div class="chart-container" id="first-chart"> </div>

CSS

.chart-container {
  height: 100%;
  width: 100%;
}

JavaScript

var element = document.querySelector('#first-chart');

var data = [
  ['Jan', 10],
  ['Feb', 70],
  ['Mar', 30],
  ['Apr', 10],
  ['May', 60],
  ['Jun', 45],
  ['Jul', 76]
];

var chart = new PieChart(element, data, {
  pie: {
    color: ['#CDDC39', '#4CAF50', '#009688', '#00BCD4', '#2196F3', '#3F51B5', '#673AB7'],
    radius: 120,
    cornerRadius: 3,
    curve: 360,
    startAngle: 0
  },
  margin: {
    left: 0,
    right: 0,
    top: 0,
    bottom: 0
  },
  transition: {
    animate: true,
    duration: 2000
  },
  tooltip: {
    show: true,
    listener: 'click touchstart',
    class: 'custom-tooltip', 
    formatter: function() {
      return this.yValue + ' units <br>in ' + this.xValue;
    },
  },
  legend: {
    show: true,
    position: 'left',
  }
});