Bar Chart
Clustered, stacked, and simple bar charts. Zoom (Ctrl+scroll) narrows the visible categories. Drag to pan when zoomed.
Controls
|
Bar Chart
TypeScript
// 1. Setup Data Provider
const clientProvider = new CFlatClientDataProvider()
clientProvider.setData([
{ category: 'Jan', group: 'A', value: 45 },
{ category: 'Jan', group: 'B', value: 65 }
])
// 2. Component Usage
KBarChart(
:data-provider="clientProvider"
category-field="category"
value-field="value"
group-field="group"
mode="clustered"
:animated="true"
@click-point="onPointClick"
)
Attributes
Configure the KBarChart component using these attributes.
| Name | Type | Default | Description |
|---|---|---|---|
| dataProvider | ADataProvider | - | Required. Provides chart dataset |
| categoryField | string | 'category' | Data property for the categorical axes |
| valueField | string | 'value' | Data property for the numerical value axes |
| groupField | string | 'group' | Data property to group clustered/stacked bars |
| mode | 'simple' | 'clustered' | 'stacked' | 'clustered' | Visual style of the bar rendering |
| orientation | 'vertical' | 'horizontal' | 'vertical' | Orientation of the bars |
| animated | boolean | true | Animates chart on load or data change |
| zoomable | boolean | true | Allows Ctrl+Scroll zooming |
| maxZoom | number | 8 | Max zoom scale |
| colors | string[] | (palette) | Array of series colors |
| backgroundColor | string | '#ffffff' | Chart canvas background color |
| showLegend | boolean | true | Shows series legend |
| xAxisTitle | string | '' | Title label for X axis |
| yAxisTitle | string | '' | Title label for Y axis |
Events
| Name | Payload | Description |
|---|---|---|
| click-point | (item: any, index: number) | Triggered when a bar is clicked |
| hover-point | (item: any, index: number) | Triggered when hovering over a bar |
| zoom-change | (scale: number) | Emitted on chart zoom |
| pan-change | (offset: { x: number, y: number }) | Emitted on chart pan |
Slots
| Name | Props | Description |
|---|---|---|
| tooltip | { item, index } | Custom template for the data point tooltip |