Components API
Complete reference for all chart components in react-echarts-kit.
LineChart
A responsive line chart component for displaying time series data and trends.
Import
tsx
Basic Usage
tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | ChartData[] | - | Chart data array |
| width | number | 400 | Chart width in pixels |
| height | number | 300 | Chart height in pixels |
| theme | string | 'light' | Theme name or custom theme object |
| smooth | boolean | false | Enable smooth line curves |
| showArea | boolean | false | Show area fill under line |
BarChart
A flexible bar chart component for comparing categorical data.
Import
tsx
Basic Usage
tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | ChartData[] | - | Chart data array |
| horizontal | boolean | false | Display bars horizontally |
| stacked | boolean | false | Stack multiple series |
| showValues | boolean | false | Show values on bars |
PieChart
A customizable pie chart component for displaying proportional data.
Import
tsx
Basic Usage
tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | ChartData[] | - | Chart data array |
| donut | boolean | false | Display as donut chart |
| innerRadius | number | 0 | Inner radius for donut charts |
| showLabels | boolean | true | Show slice labels |
AreaChart
An area chart component for visualizing data trends with filled areas.
Import
tsx
Basic Usage
tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | ChartData[] | - | Chart data array |
| stacked | boolean | false | Stack multiple series |
| smooth | boolean | false | Enable smooth curves |
GaugeChart
A gauge chart component for displaying single values with progress indicators.
Import
tsx
Basic Usage
tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | - | Current gauge value |
| min | number | 0 | Minimum value |
| max | number | 100 | Maximum value |
| title | string | '' | Gauge title |