Line Chart

v0.2.2

Fully presentational line chart widget using Recharts. Supports multiple lines, custom styling, legends, tooltips, and responsive layouts.

View as Markdown

Install

npx shadcn@latest add @signalos/line-chart

Requires a configured @signalos registry and a valid SIGNALOS_REGISTRY_TOKEN - get access. Registry dependencies (@signalos/tokens, @signalos/chart-core) are pulled automatically.

Preview

Example & code

line-chart.example.tsx

import { LineChart } from "@/components/widgets/line-chart/LineChart"

const data = [
  { month: "Jan", revenue: 4000, expenses: 2400 },
  { month: "Feb", revenue: 3000, expenses: 1398 },
  { month: "Mar", revenue: 2000, expenses: 9800 },
  { month: "Apr", revenue: 2780, expenses: 3908 },
  { month: "May", revenue: 1890, expenses: 4800 },
  { month: "Jun", revenue: 2390, expenses: 3800 },
]

export default function LineChartExample() {
  return (
    <LineChart
      data={data}
      lines={[
        { dataKey: "revenue", name: "Revenue", stroke: "var(--chart-1)" },
        { dataKey: "expenses", name: "Expenses", stroke: "var(--chart-2)" },
      ]}
      xAxis={{ dataKey: "month" }}
      yAxis={{ tickFormatter: (value) => `$${value}` }}
      height={350}
    />
  )
}

Props

LineChartDataPoint

Prop	Type	Default	Description

LineChartLine

Prop	Type	Default	Description
dataKey*	`string`	-	The data key to plot from your data points
name	`string \| undefined`	-	Display name for the legend and tooltip
stroke	`string \| undefined`	-	Line color (use CSS custom property or hex)
strokeWidth	`number \| undefined`	-	Line thickness in pixels
strokeDasharray	`string \| undefined`	-	Dash pattern (e.g., "5 5" for dashed line)
dot	`boolean \| undefined`	-	Whether to show dots on data points
animationDuration	`number \| undefined`	-	Whether to animate the line on mount

LineChartAxis

Prop	Type	Default	Description
dataKey	`string \| undefined`	-	The data key for this axis
axisLine	`boolean \| undefined`	-	Whether to show the axis line
tickLine	`boolean \| undefined`	-	Whether to show tick marks
tickFormatter	`((value: unknown) => string) \| undefined`	-	Custom tick formatter function
label	`string \| { value: string; angle?: number \| undefined; position?: string \| undefined; } \| undefined`	-	Label for the axis
hide	`boolean \| undefined`	-	Whether to hide the axis entirely
tick	`boolean \| object \| undefined`	-	Axis tick styles

LineChartGrid

Prop	Type	Default	Description
horizontal	`boolean \| undefined`	-	Show horizontal grid lines
vertical	`boolean \| undefined`	-	Show vertical grid lines
stroke	`string \| undefined`	-	Grid line stroke color
strokeDasharray	`string \| undefined`	-	Grid line stroke dash pattern

LineChartLegend

Prop	Type	Default	Description
verticalAlign	`"bottom" \| "top" \| "middle" \| undefined`	-	Legend position
align	`"left" \| "center" \| "right" \| undefined`	-
layout	`"horizontal" \| "vertical" \| undefined`	-	Legend layout
iconType	`"line" \| "plainline" \| "square" \| "rect" \| "circle" \| "cross" \| "diamond" \| "star" \| "triangle" \| "wye" \| undefined`	-	Custom icon type
formatter	`((value: string) => ReactNode) \| undefined`	-	Custom legend formatter

LineChartTooltip

Prop	Type	Default	Description
labelFormatter	`((label: unknown) => ReactNode) \| undefined`	-	Custom tooltip formatter for label
formatter	`((value: ValueType, name: NameType, entry: Payload<ValueType, NameType>) => ReactNode) \| undefined`	-	Custom tooltip formatter for values
cursor	`boolean \| object \| undefined`	-	Cursor style

LineChartProps

Prop	Type	Default	Description
data*	`LineChartDataPoint[]`	-	Array of data points to plot
lines*	`LineChartLine[]`	-	Array of line configurations
width	`number \| undefined`	-	Chart width in pixels
height	`number \| undefined`	-	Chart height in pixels
xAxis	`LineChartAxis \| undefined`	-	X-axis configuration
yAxis	`LineChartAxis \| undefined`	-	Y-axis configuration
grid	`boolean \| LineChartGrid \| undefined`	-	Grid configuration
legend	`boolean \| LineChartLegend \| undefined`	-	Legend configuration (false to hide)
tooltip	`boolean \| LineChartTooltip \| undefined`	-	Tooltip configuration (false to hide)
margin	`{ top?: number \| undefined; right?: number \| undefined; bottom?: number \| undefined; left?: number \| undefined; } \| undefined`	-	Chart margin (top, right, bottom, left)
isLoading	`boolean \| undefined`	-	Loading state
emptyState	`ReactNode`	-	Empty state content
onDataPointClick	`((data: unknown, index: number) => void) \| undefined`	-	Click handler for line data points
responsive	`boolean \| undefined`	-	Responsive container (auto-sizes to parent)
className	`string \| undefined`	-	Container className
style	`CSSProperties \| undefined`	-	Custom container styles

npm dependencies

recharts@^2.15.0

Changelog

Changelog - LineChart

0.2.2

Fix onDataPointClick's index argument always being 0 regardless of which point was clicked. Now derived from Recharts' activeTooltipIndex via chart-core's resolveChartClickIndex.

0.2.1

Update data-testid call sites for the renamed prop.

0.2.0

Factor shared colors, tooltip/legend config, skeleton, and empty state into the chart-core widget; public API unchanged.

0.1.1

Replaced any types with proper Recharts types (ValueType, NameType, Payload) in LineChartTooltip.formatter, labelFormatter, tickFormatter, and onDataPointClick.

0.1.0

Initial release.

Line chart component with Recharts integration
Support for multiple lines with custom colors and styling
Configurable axes, grid, legend, and tooltip
Responsive container support
Loading skeleton and empty state
Fully presentational (props-in/events-out pattern)