pie

Deprecated: This property is no longer available.

A custom angle from which the pie/donut slices should start.

A custom angle to which the pie/donut slices should end.

When clicked on the pie/donut slice, expand the slice to make it distinguished visually.

Sets the left offset of the whole pie area

Sets the top offset of the whole pie area

Transform the scale of whole pie/donut overriding the default calculations. Try variations like 0.5 and 1.5 to see how it scales based on the default width/height of the pie

Offset by which labels will move outside / inside of the donut area

Minimum angle to allow data-labels to show. If the slice angle is less than this number, the label would not show to prevent overlapping issues.

All additional formatting/styling settings for dataLabels has to be done in [dataLabels](/docs/options/datalabels/) configuration.

Render each slice's name outside the pie, joined to the slice by a leader line, so the chart reads without cross-referencing the legend. The percentage keeps rendering inside the slice. Applies to pie and donut only (ignored for polarArea, where the radial length already encodes the value).

plotOptions: {
  pie: {
    dataLabels: {
      external: {
        show: true,
        connector: {
          show: true,
          length: 16
        }
      }
    }
  }
}

Turn the external labels on. Off by default, so existing pie/donut charts keep their inside labels.

Horizontal shift applied to every external label.

Vertical shift applied to every external label.

Font size of the external label. Falls back to dataLabels.style.fontSize when unset.

Font family of the external label. Falls back to dataLabels.style.fontFamily when unset.

Font weight of the external label. Falls back to dataLabels.style.fontWeight when unset.

Text colour of the external label. Defaults to chart.foreColor so the label stays readable against the page background.

Build the label text. Receives the slice name and an options object { seriesIndex, percent, value, w }. Return a string for a single line, or an array of strings to stack multiple lines, for example [name, percent + '%'].

The leader line drawn from the slice edge to the external label.

Draw the leader line. When off, labels sit outside the slice with no connecting line.

Stroke width of the leader line, in pixels.

Colour of the leader line. Defaults to the slice colour.

Length of the horizontal run of the leader line after the radial elbow, in pixels.

Gap between the slice edge and the start of the leader line, in pixels.

Donut / ring size in percentage relative to the total pie area.

The background color of the pie

Whether to display inner labels or not.

Show the name of the respective bar associated with it's value

FontSize of the name in donut's label

FontFamily of the name in donut's label

Font-weight of the name in dataLabel

Color of the name in the donut's label

Sets the top offset for name

A custom formatter function to apply on the name text in dataLabel

Show the value label associated with the name label

FontSize of the value label

FontFamily of the value label

Font weight of the value label in dataLabel

Color of the value label in dataLabel

Sets the top offset for value label

A custom formatter function to apply on the value label in dataLabel

Show the total of all the series in the inner area of radialBar

Always show the total label and do not remove it even when user clicks/hovers over the slices.

Label for "total". Defaults to "Total"

FontSize of the total label

FontFamily of the total label

font-weight of the total label in dataLabel

Color of the total label

A custom formatter function to apply on the total value. It accepts one parameter w which contains the chart's config and global objects. Defaults to a total of all series percentage divided by the length of series.