Line Chart

The LineChart component renders trends across labeled data points with optional grid and point markers.

Usage & Examples

Response Trend

Response trend

response-trend.tsx

const chartData = [
  { label: "Jan", value: 24, color: "#2f80ed" },
  { label: "Feb", value: 38, color: "#27ae60" },
  { label: "Mar", value: 31, color: "#f2994a" },
  { label: "Apr", value: 47, color: "#9b51e0" },
];
<LineChart data={chartData} label="Response trend" />

Props API

Line Chart props API
				Default	Description
`aria-label`	`string`	No	aria	`—`	Accessible label for the chart graphic.
`className`	`string`	No	styling	`—`	Additional class name for the root.
`color`	`string`	No	props	`"currentColor"`	Stroke color for the line.
`data`	`ChartDatum[]`	Yes	props	`—`	Labelled values rendered as a line chart.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`height`	`number`	No	props	`200`	Height of the SVG viewport.
`label`	`ReactNode`	No	props	`—`	Visible chart label.
`loading`	`boolean`	No	props	`false`	Whether the component should display a loading state.
`padding`	`number`	No	props	`24`	Inner SVG padding.
`showGrid`	`boolean`	No	props	`true`	Whether to render guide lines.
`showPoints`	`boolean`	No	props	`true`	Whether to render point markers.
`state`	`StateType`	No	styling	`—`	Visual state class used for styling.