Skip to content

08-pie.md

Latest commit

 

History

History
45 lines (40 loc) · 1.78 KB

08-pie.md

File metadata and controls

45 lines (40 loc) · 1.78 KB
Raw
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)