Pie micro chart displays a compact proportional breakdown. Use it inside KPI cards, table cells, summaries, dense admin panels, reports, or as a simple dashboard chart when a small pie chart is enough.
Use full ECharts charts for complex analytics, detailed legends, drilldown, zooming, or advanced chart interactions.
| Prop | Type | Default |
|---|---|---|
data* The data to be displayed in the pie chart | number[] | [] |
labels Labels for the data items | string[] | number[] | [] |
valueAccessor Accessor function to get the value from a data item | (d: any) => d | (d: any) => d |
dataItemStrokeWidth Stroke width of the pie slices | number | 1 |
legendContainerWidth Width of the legend container | number | 0 |
showDataAnimation Whether to show animation when data changes | boolean | false |
showValueOnSlices Whether to show values on the pie slices | boolean | false |
showLegend Whether to show the legend | boolean | false |
legendOffset Offset of the legend from the chart | number | 30 |
legendItemHeight Height of each legend item | number | 30 |
legendItemSymbolSize Size of the symbol in the legend item | number | 12 |
legendItemFontSize Font size of the legend item text | number | 14 |
legendItemSymbolBorderRadius Border radius of the legend item symbol | number | 12 |
valueFontSize Font size of the value text on slices | number | 12 |
tooltip Custom tooltip template | TemplateRef<unknown> | – |
tooltipPosition Position of the tooltip | OverlayPosition | 'after-center' |
Using this component in production?
NgStarter includes source code, admin dashboard templates, and commercial support.