PieChart

PieChart visualizes proportional data as circular segments; each slice represents a percentage of the whole. Note that the height of the component or its parent needs to be set explicitly.

Behaviors

This component supports the following behaviors:

Properties

data

The data to be displayed in the chart. Needs to be an array of objects.

dataKey

This property specifies the key in the data objects that will be used to render the chart.

labelListPosition

default: "inside"

The position of the label list.

Available values: top, left, right, bottom, inside (default), outside, insideLeft, insideRight, insideTop, insideBottom, insideTopLeft, insideBottomLeft, insideTopRight, insideBottomRight, insideStart, insideEnd, end, center, centerTop, centerBottom, middle

nameKey

Specifies the key in the data objects that will be used to label the different data series.

outerRadius

The outer radius of the pie chart, can be a number or a string (e.g., '100%').

showLabel

default: true

Toggles whether to show labels (true) or not (false).

showLabelList

default: false

Whether to show labels in a list (true) or not (false).

showLegend

default: false

Toggles whether to show legend (true) or not (false).

Events

This component does not have any events.

Exposed Methods

This component does not expose any methods.

Styling

Theme Variables