piechart

const myChart = piechart({
  data: [30, 30, 30],
});

document.body.appendChild(myChart);

Just a reminder that piechart returns an SVG, so you'll want to add it to the DOM.

Quick Start

The most basic possible usage:

piechart({
  data: [30, 30, 30],
  fillColors: ['#00ffff', '#ff00ff', '#ffff00'],
});

Of course it works with different data points too:

piechart({
  data: [300, 300, 300, 300],
  fillColors: ['#00ffff', '#ff00ff', '#ffff00', '#d4453a'],
});

piechart({
  data: [50, 50],
  fillColors: ['#00ffff', '#ff00ff'],
});

piechart({
  data: [400, 100, 300, 70, 130],
  fillColors: ['#00ffff', '#ff00ff', '#ffff00', '#d4453a', '#3e9503'],
});

Label Options

You can use any string for the labels option, and they will be placed in the center of each pie slice.

Coloring is done via labelColors, which takes an array of colors that correspond to the labels. If not provided, the labels will default to white.

piechart({
  data: [30, 30, 30],
  fillColors: ['#00ffff', '#ff00ff', '#ffff00'],
  labels: ['Cyan', 'Magenta', 'Yellow'], 
  labelColors: ['#000000'], 
});

Data Labels

Or you can use the dataLabels option to show the data values instead of custom labels:

piechart({
  data: [30, 30, 30],
  fillColors: ['#00ffff', '#ff00ff', '#ffff00'],
  dataLabels: 'literal', 
  labelColors: ['#000000'],
});

The dataLabels option also accept "percentage":

piechart({
  data: [30, 30, 30],
  fillColors: ['#00ffff', '#ff00ff', '#ffff00'],
  dataLabels: 'percentage',
  labelColors: ['#000000'],
});

Center Label

The centerLabel option allows you to place a label in the center of the pie chart, which can be used to show a title or other value.

piechart({
  data: [30, 30, 30],
  fillColors: ['#00ffff', '#ff00ff', '#ffff00'],
  centerLabel: 'A center label', 
});

If you set the centerLabel option to "sum" the center label will show the sum of the data values:

piechart({
  data: [30, 30, 30],
  fillColors: ['#00ffff', '#ff00ff', '#ffff00'],
  centerLabel: 'sum',
});

Adjusting center label styles

There are a couple options that allow for adjustment of common title text styles for the center label.

• centerLabelFontSize
  • defaults to 32
• centerLabelFontWeight
  • defaults to bold
• centerLabelFontFamily
  • defaults to monospace

The centerLabel will also get a class applied by default that you can use to override the default styling - "tmc-pie-center-label".

You can also use the centerLabelClass option to add your own class to the center label <text> element.

piechart({
  data: [30, 30, 30],
  fillColors: ['#00ffff', '#ff00ff', '#ffff00'],
  centerLabel: 'A center label', 
  classes: {
    centerLabelClass: 'my-center-label', 
  },
});

Styling

While styling many options is easily achievable with CSS, there are various styling options available for quick & easy use.

Size & Spacing

The size option will change the size of the chart. By default the size is 300 which creates a 300px square, note that all pie charts are squares!

piechart({
  data: [30, 30, 30],
  fillColors: ['#00ffff', '#ff00ff', '#ffff00'],
  size: 50, 
});

You can also change the padding which is the interior spacing from the SVG edges to the pie chart itself.

Note that currently padding is used uniformly on all sides.

piechart({
  data: [30, 30, 30],
  fillColors: ['#00ffff', '#ff00ff', '#ffff00'],
  padding: 50, 
});

Coloring

While fillColors is the way to color each slice, you can also set strokeColors, and strokeWidths to customize the stroke of each slice.

If you want them all to be uniform, simply provide a single value for each option.

piechart({
  data: [30, 30, 30],
  fillColors: ['#00ffff', '#ff00ff', '#ffff00'],
  strokeColors: ['#ffffff'],
  strokeWidths: [5],
});

Additionally, just like other chart types, gradient fills are supported!

piechart({
  data: [30, 30, 30],
  gradientColors: ['#ff00ff', '#00ffff'],
  gradientDirection: 'left-to-right', 
  gradientMode: 'continuous', 
  strokeColors: ['#ffffff'],
});