ApexCharts

pie

Configuration Structure

pie: {
  startAngle: number,
  endAngle: number,
  customScale: number,
  offsetX: number,
  offsetY: number,
  expandOnClick: boolean,
  dataLabels: { ... },
    offset: number,
    minAngleToShowLabel: number,
  donut: { ... },
    size: string,
    background: string,
    labels: { ... },
      show: boolean,
      name: { ... },
        show: boolean,
        fontSize: string,
        fontFamily: string,
        fontWeight: string | number,
        color: string,
        offsetY: number,
        formatter: Function,
      value: { ... },
        show: boolean,
        fontSize: string,
        fontFamily: string,
        fontWeight: string | number,
        color: string,
        offsetY: number,
        formatter: Function,
      total: { ... },
        show: boolean,
        showAlways: boolean,
        fontFamily: string,
        fontWeight: string | number,
        fontSize: string,
        label: string,
        color: string,
        formatter: Function,
}

plotOptions

size

pie.donut.size

Deprecated: This property is no longer available.

startAngle

Default: 0

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

endAngle

Default: 360

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

expandOnClick

Default: true

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

offsetX

Default: 0

Sets the left offset of the whole pie area

offsetY

Default: 16

Sets the top offset of the whole pie area

customScale

Default: 1

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

dataLabels

offset

pie.dataLabels.offset

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

minAngleToShowLabel

pie.dataLabels.minAngleToShowLabel

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.

size

pie.donut.size

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

background

pie.donut.background

The background color of the pie

labels

pie.donut.labels

Donut chart labels

show

pie.donut.labels.show

Whether to display inner labels or not.

name

pie.donut.labels.name

show

pie.donut.labels.name.show

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

fontSize

pie.donut.labels.name.fontSize

FontSize of the name in donut's label

fontFamily

pie.donut.labels.name.fontFamily

FontFamily of the name in donut's label

fontWeight

pie.donut.labels.name.fontWeight

Font-weight of the name in dataLabel

color

pie.donut.labels.name.color

Color of the name in the donut's label

offsetY

pie.donut.labels.name.offsetY

Sets the top offset for name

formatter

pie.donut.labels.name.formatter

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

value

pie.donut.labels.value

show

pie.donut.labels.value.show

Show the value label associated with the name label

fontSize

pie.donut.labels.value.fontSize

FontSize of the value label

fontFamily

pie.donut.labels.value.fontFamily

FontFamily of the value label

fontWeight

pie.donut.labels.value.fontWeight

Font weight of the value label in dataLabel

color

pie.donut.labels.value.color

Color of the value label in dataLabel

offsetY

pie.donut.labels.value.offsetY

Sets the top offset for value label

formatter

pie.donut.labels.value.formatter

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

total

pie.donut.labels.total

show

pie.donut.labels.total.show

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

showAlways

pie.donut.labels.total.showAlways

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

label

pie.donut.labels.total.label

Label for "total". Defaults to "Total"

fontSize

pie.donut.labels.total.fontSize

FontSize of the total label

fontFamily

pie.donut.labels.total.fontFamily

FontFamily of the total label

fontWeight

pie.donut.labels.total.fontWeight

font-weight of the total label in dataLabel

color

pie.donut.labels.total.color

Color of the total label

formatter

pie.donut.labels.total.formatter

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.