Horizontal bar chart with a built in table view, so no value is reachable by colour or hover alone. A single series is drawn in one colour because bar length already carries magnitude, and ordered bands use a single hue ramp with monotone lightness.
Loading preview...
import BarChart from '@/components/ui/crash-claim-bar-chart'
export default function BarChartDemo() {
return (
<div
style={{
display: 'grid',
gap: 24,
gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
padding: 24,
background: '#F4F7FA',
}}
>
<BarChart
title="Portfolio by stage"
dimension="Stage"
unit="work items"
caption="A claim sits in exactly one stage, so this compares magnitude across ordered categories."
data={[
{ label: 'Validation', meta: 'Claims consultant', value: 7371 },
{ label: 'Client onboarding', meta: 'Client manager', value: 4249 },
{ label: 'Assessment', meta: 'Assessor', value: 2180 },
{ label: 'Repair', meta: 'Repair coordinator', value: 1544 },
{ label: 'Red flag review', meta: 'Supervisor', value: 80 },
]}
/>
<BarChart
title="Days since anyone touched the file"
dimension="Band"
unit="claims"
ordered
caption="The bands are ordered, so the ramp darkens with age."
data={[
{ label: '0 to 7', value: 1204 },
{ label: '8 to 30', value: 1506 },
{ label: '31 to 90', value: 4102 },
{ label: '91 to 365', value: 7935 },
{ label: 'Over 365', value: 5750 },
]}
/>
</div>
)
}