Line Chart

A line chart component built using Recharts v3. Supports multi-series, dot customization, curve types, and connectNulls.

Installation

$ npx shadcn@latest add @orecus/line-chart

Registry:

@orecus/chart@orecus/color-utils@orecus/chart-utils@orecus/card

Component

Multi-Series Line Chart

Desktop vs Mobile visitors over 7 days

With Reference Lines

Target and average thresholds

Props

Prop	Type	Default	Description
`data`*	`any[]`	—	The data for the chart
`categories`*	`string[]`	—	Keys in data to map to lines
`index`*	`string`	—	Key in data to use for x-axis
`colors`	`ThemeColor[]`	—	Colors for each category
`curveType`	`'linear' \| 'monotone' \| 'step' \| '...'`	`'monotone'`	Curve interpolation type
`showDots`	`boolean`	`true`	Show dots at data points
`dotSize`	`number`	`4`	Dot radius in pixels
`connectNulls`	`boolean`	`false`	Connect line across null/undefined values
`showDataLabels`	`boolean`	`false`	Show value labels directly on data points
`showLegend`	`boolean`	`true`	Show chart legend
`showGridLines`	`boolean`	`true`	Show grid lines
`actions`	`ReactNode`	—	Actions to display in the chart header
`cardProps`	`CardProps`	—	Props to pass to the underlying Card component
`tooltipSortByValue`	`boolean`	`false`	Sort tooltip items by value (descending)
`tooltipShowTotal`	`boolean`	`false`	Show total in tooltip for multi-series
`tooltipTotalLabel`	`string`	`'Total'`	Label for the total row in tooltip
`legendIndicator`	`'square' \| 'circle' \| 'line'`	`'line'`	Shape of legend indicators
`interactiveLegend`	`boolean`	`false`	Allow clicking legend items to toggle series visibility
`legendWrap`	`boolean`	`true`	Allow legend items to wrap to multiple lines
`xAxisFormatter`	`(value: string) => string`	—	Formatter for x-axis tick labels and tooltip header
`xAxisTick`	`SVGProps \| ReactElement \| ((props) => ReactNode) \| boolean`	—	Custom tick rendering for the x-axis — overrides xAxisFormatter when set
`yAxisFormatter`	`(value: number) => string`	—	Formatter for y-axis tick labels — falls back to valueFormatter
`yAxisTick`	`SVGProps \| ReactElement \| ((props) => ReactNode) \| boolean`	—	Custom tick rendering for the y-axis — overrides yAxisFormatter when set
`referenceLines`	`ChartReferenceLine[]`	—	Reference lines (targets, thresholds, averages) rendered on the chart