08-pie.md

title
Pie/Doughnut chart

See the Pen chart.xkcd pie by timqian (@timqian) on CodePen.

<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

JS part

const pieChart = new chartXkcd.Pie(svg, {
  title: 'What Tim is made of', // optional
  data: {
    labels: ['a', 'b', 'e', 'f', 'g'],
    datasets: [{
      data: [500, 200, 80, 90, 100],
    }],
  },
  options: { // optional
    innerRadius: 0.5,
    legendPosition: chartXkcd.config.positionType.upRight,
  },
});

Customize chart by defining options

• innerRadius: specify empty pie chart radius (default: 0.5)
  • Want a pie chart? set innerRadius to 0
• showLegend: display legend near chart (default true)
• legendPosition: specify where you want to place the legend. (default chartXkcd.config.positionType.upLeft) Possible values:
  • up left: chartXkcd.config.positionType.upLeft
  • up right: chartXkcd.config.positionType.upLeft
  • bottom left: chartXkcd.config.positionType.downLeft
  • bottom right: chartXkcd.config.positionType.downRight
• dataColors: array of colors for different datasets
• fontFamily: customize font family used in the chart
• unxkcdify: disable xkcd effect (default false)
• strokeColor: stroke colors (default black)
• backgroundColor: color for BG (default white)