Hooks API
React hooks provided by react-echarts-kit for enhanced functionality.
useResponsiveChart
A hook for making charts automatically responsive to container size changes.
Import
tsx
Usage
tsx
Return Value
| Property | Type | Description |
|---|---|---|
| containerRef | RefObject<HTMLDivElement> | Ref to attach to the container element |
| dimensions | { width: number, height: number } | Current container dimensions |
useChartTheme
A hook for managing chart themes and accessing theme-related utilities.
Import
tsx
Usage
tsx
Return Value
| Property | Type | Description |
|---|---|---|
| currentTheme | string | Current active theme name |
| setTheme | (theme: string) => void | Function to change the current theme |
| getThemeColors | () => string[] | Get color palette for current theme |
| themes | string[] | Array of available theme names |
useChartData
A hook for managing and transforming chart data with built-in utilities.
Import
tsx
Usage
tsx
Return Value
| Property | Type | Description |
|---|---|---|
| data | ChartData[] | Current processed data array |
| sortData | (key: string, order: 'asc' | 'desc') => void | Sort data by specified key and order |
| filterData | (predicate: (item: ChartData) => boolean) => void | Filter data using predicate function |
| transformData | (transformer: (item: ChartData) => ChartData) => void | Transform data using mapper function |
| resetData | () => void | Reset data to original state |