Line chart
Multi-series trends without area fill.
Use line charts when you want trends without filled area. Lines use stroke styling from the theme and series config. They do not use fill or pixel.
LineSingle-series pixel polyline.
Examples
Multi-series
Add one <DuneLineChart.Line /> per dataKey.
Multi-series linePixel polylines for several series.
Loading
Set loading on the root to show a pixel skeleton until data is ready.
Loading…
Parts
| Part | Role |
|---|---|
DuneLineChart | Root: data, config, loading, chartProps |
DuneLineChart.Grid | Cartesian grid |
DuneLineChart.XAxis | Category / index axis |
DuneLineChart.YAxis | Value axis |
DuneLineChart.Tooltip | Hover tooltip |
DuneLineChart.Legend | Series legend |
DuneLineChart.Line | One series (dataKey, optional type, dot, strokeWidth) |
Props
Root
| Prop | Type | Default | Notes |
|---|---|---|---|
data | Record<string, unknown>[] | required | Row objects |
config | Record<string, DuneSeriesConfig> | - | Labels and colors |
loading | boolean | false | Pixel skeleton |
emptyMessage | string | - | Empty-state copy |
chartProps | object | - | Extra Recharts LineChart props |
className | string | - | Wrapper class |
Line
| Prop | Type | Notes |
|---|---|---|
dataKey | string | Series field |
type | Recharts curve type | For example monotone |
dot | boolean | object | Point markers |
strokeWidth | number | Stroke thickness |
name | string | Overrides legend name |
isAnimationActive | boolean | Series animation |
Tips
- Line charts skip pixel fills on purpose. Use area when you need dither or bands.
- Set colors with
config[key].color. See Chart config. - Use
type="monotone"for smooth curves on irregular x spacing.