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 a pie/donut slice is clicked, slide it outward along its own mid-angle to distinguish it.

Selecting used to darken the slice and redraw it at a larger radius. Growing the radius inflates the quantity the slice encodes, so the visual said something the data did not; the slice now moves instead. Legend clicks toggle a slice in and out through the same path.

How far a selected slice slides out, in pixels.

A translucent band traced just outside the rim of the hovered slice, so the slice keeps its own colour instead of being lightened.

This takes the place of the states.hover filter for pie, donut and polarArea, and is skipped entirely when states.hover.filter.type is 'none', which stays the way to turn all hover feedback off.

Available Options:

• true (default)
• false

Band thickness in pixels.

Extra clearance between the slice rim and the band, in pixels, on top of the slice stroke: the band always starts at the outer edge of the stroke, never under it.

Defaults to 0 because a stroke is normally present (stroke.width defaults to 2) and already reads as the separation. Any gap beyond that and the band stops belonging to its slice and starts reading as a ring of its own.

Band opacity, over the slice colour.

Band colour. Defaults to the hovered slice's own colour.

Rounds the corners of each slice (in px). Applies to pie, donut, and polarArea. Defaults to 0 (sharp corners). The value is clamped per slice so corner fillets never cross on thin or narrow slices. Added in 6.7.

Gap between adjacent slices (in px). Applies to pie, donut, and polarArea. Defaults to 0 (slices touch). Each slice is inset symmetrically, so its mid-angle (data label and hit region) is kept. Added in 6.7.

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.