Line Chart
Multi-series line chart with zoom (Ctrl+scroll) and drag-to-pan when zoomed in.
Data Source Controls
Line Chart
TypeScript
// 1. Setup Data Provider
const clientProvider = new CFlatClientDataProvider()
clientProvider.setData([
{ date: 1, series: 'Revenue', value: 45 },
{ date: 2, series: 'Revenue', value: 65 }
])
// 2. Component Usage
KLineChart(
:data-provider="clientProvider"
x-field="date"
y-field="value"
series-field="series"
:animated="true"
@click-point="onPointClick"
)
Attributes
Configure the KLineChart component using these attributes.
| Name | Type | Default | Description |
|---|---|---|---|
| dataProvider | ADataProvider | - | Required. Provides chart dataset |
| xField | string | 'x' | Data property for the X-axis |
| yField | string | 'y' | Data property for the Y-axis |
| seriesField | string | 'series' | Data property to group lines/series |
| animated | boolean | true | Animates chart on load or data change |
| zoomable | boolean | true | Allows Ctrl+Scroll zooming |
| maxZoom | number | 10 | 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 data point is clicked |
| hover-point | (item: any, index: number) | Triggered when hovering over a data point |
| 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 |