LineChart

A line chart for visualising trends over time, supporting multiple series.

Installation

npx @obi/ui add line-chart

Requires: recharts

Preview

Usage

import { LineChart } from '@/src/components/Charts/Charts';

const data = [
  { month: 'Jan', revenue: 4000, expenses: 2400 },
  { month: 'Feb', revenue: 3000, expenses: 1398 },
  { month: 'Mar', revenue: 5000, expenses: 2800 },
  { month: 'Apr', revenue: 4780, expenses: 3908 },
  { month: 'May', revenue: 5890, expenses: 4800 },
  { month: 'Jun', revenue: 4390, expenses: 3800 },
];

export default function Example() {
  return (
    <LineChart
      data={data}
      xKey="month"
      series={[
        { key: 'revenue', label: 'Revenue' },
        { key: 'expenses', label: 'Expenses' },
      ]}
    />
  );
}

Props

Name	Type	Default	Description
data	ChartDataPoint[]	—	Array of data objects.
xKey	string	—	Key in each data object to use as the x-axis label.
series	ChartSeries[]	—	Lines to render. Each entry has key, label, and optional color.
height	number	240	Chart height in px.
showLegend	boolean	true	Whether to show the legend.
showGrid	boolean	true	Whether to show the background grid.
className	string	""	Extra classes applied to the container.