Line
Based on Recharts.
Default
KPI Overview
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| title | string | Yes | - | Chart title text |
| data | Data[] | Yes | - | Array of data |
| options | Option[] | Yes | - | Array of available chart options |
| onUpdate | function | No | - | Handler function when pressing the update button |
| onShare | function | No | - | Handler function when pressing the share button |
| onExpand | function | No | - | Handler function when pressing the expand button |
| isUpdating | boolean | No | false | If set true, the loader icon is displayed |
| hasUpdates | boolean | No | false | If set true, the dot icon is displayed |
| filter | React.ReactNode | No | - | Placeholder for filter component |
| height | string, number | No | 526 | Height of component |
| axisWidth | number | No | 40 | The width of axis |
| icon | React.ReactNode | No | <ChartIcons.Line /> | Placeholder for chart icon component |
| loaderText | string, React.ReactNode | No | No data | The text for "no data" / "loading" states |
| formatFn | function | No | - | The formatter function of data value |
| interval | "preserveStart" | "preserveEnd" | "preserveStartEnd" | number | No | - | If set 0, all the ticks will be shown |
Types
Data {
date: string
[key: string]: string | number
}Option {
label: string;
dataKey: string;
value: number;
color: ColorProps;
yAxisId: string;
isActive?: boolean;
}Loading
KPI Overview
Loading...
KPI Overview