Multi-Axis Line Chart
Two series in different units on one plot.
Introduction
A second y axis lets volume and duration share a chart. UX4G specifies this variant, and it is worth using sparingly.
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
Volume against clearance time
Application volume on the left axis, median days to clear on the right.
| Category | Applications | Median days |
|---|---|---|
| Apr | 420 | 22 |
| May | 405 | 19 |
| Jun | 190 | 24 |
| Jul | 140 | 21 |
| Aug | 905 | 14 |
| Sep | 730 | 12 |
| Oct | 45 | 9 |
'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: 'Applications', data: [420, 405, 190, 140, 905, 730, 45], yAxisID: 'y' },
{ label: 'Median days', data: [22, 19, 24, 21, 14, 12, 9], yAxisID: 'y1' },
],
}),
[],
);
const options = useMemo(
() => ({
scales: {
y: { type: 'linear' as const, position: 'left' as const },
y1: {
type: 'linear' as const,
position: 'right' as const,
grid: { drawOnChartArea: false },
},
},
}),
[],
);
return (
<Chart
type='line'
data={data}
options={options}
title='Volume against clearance time'
summary='Application volume on the left axis, median days to clear on the right.'
className='max-w-[640px]'
/>
);
}When to use it
Use it only when the relationship between the two series is the point. Two axes can imply a correlation that is not there, and a reader has to work out which line belongs to which scale. Label both axes.
Usage
import { Chart } from '@/components/ui/chart';See the Charts page for the full API.