Pie / Donut Chart
Animated pie chart with optional donut cutout. Hover to expand a segment. Click fires an event.
Controls
|
Pie Chart
TypeScript
// 1. Setup Data Provider
const clientProvider = new CFlatClientDataProvider()
clientProvider.setData([
{ category: 'Chrome', value: 65 },
{ category: 'Safari', value: 19 }
])
// 2. Component Usage
KPieChart(
:data-provider="clientProvider"
label-field="category"
value-field="value"
:donut="true"
:animated="true"
@click-point="onSliceClick"
)
Attributes
Configure the KPieChart component using these attributes.
| Name | Type | Default | Description |
|---|---|---|---|
| dataProvider | ADataProvider | - | Required. Provides chart dataset |
| labelField | string | 'label' | Data property for the slice label |
| valueField | string | 'value' | Data property for the slice numerical size |
| donut | boolean | false | Enables a central cutout to form a Donut map |
| animated | boolean | true | Animates chart on load or data change |
| colors | string[] | (palette) | Array of fallback colors |
| backgroundColor | string | '#ffffff' | Chart canvas background color |
| showLegend | boolean | true | Shows the color scale legend |
| title | string | '' | Title rendered inside chart area |
Events
| Name | Payload | Description |
|---|---|---|
| click-point | (item: any, index: number) | Triggered when a pie slice is clicked |
| hover-point | (item: any, index: number) | Triggered when hovering over a pie slice |
Slots
| Name | Props | Description |
|---|---|---|
| tooltip | { item, index } | Custom template for the slice tooltip |