Line Chart
A value over time, or against a target.
Introduction
Lines imply continuity between points, which is why they belong to time and ordered scales rather than to categories.
All chart types share one component. Installation, the palette, and the reason every chart ships with a screen-reader data table are on the Charts page.
Example
Median clearance time against target
Median days to clear an application, compared with the 15-day service standard.
| Category | Median days to clear | Target |
|---|---|---|
| Apr | 22 | 15 |
| May | 19 | 15 |
| Jun | 24 | 15 |
| Jul | 21 | 15 |
| Aug | 14 | 15 |
| Sep | 12 | 15 |
| Oct | 9 | 15 |
'use client';
import { useMemo } from 'react';
import { Chart } from '@/components/ui/chart';
const MONTHS = ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'];
const DISTRICTS = ['Pune', 'Nashik', 'Nagpur', 'Thane', 'Solapur'];
export default function Component() {
const data = useMemo(
() => ({
labels: MONTHS,
datasets: [
{ label: 'Median days to clear', data: [22, 19, 24, 21, 14, 12, 9] },
{ label: 'Target', data: [15, 15, 15, 15, 15, 15, 15] },
],
}),
[],
);
return (
<Chart
type='line'
data={data}
title='Median clearance time against target'
summary='Median days to clear an application, compared with the 15-day service standard.'
className='max-w-[640px]'
/>
);
}When to use it
Use it for a trend. A second flat series is a cheap and readable way to show a service standard the trend is measured against.
Usage
import { Chart } from '@/components/ui/chart';See the Charts page for the full API.