Examples/

Multi-Series Comparison

Compare multiple product lines across time with lines, stacked bars, and area charts.

Product Revenue
JanFebMarAprMayJunJulAugSepOctNovDec0204060Product AProduct BProduct CProduct D
Quarterly Breakdown
Q1Q2Q3Q40100200300400Product AProduct BProduct CProduct D
Revenue Share
39%26%21%15%

Implementation

dashboard.tsx
import { LineChart, StackedBarChart, PieChart } from "@chartts/react"

<div className="space-y-6">
  <LineChart data={revenue} x="month" y={products} className="h-72" />
  <div className="grid grid-cols-2 gap-4">
    <StackedBarChart data={quarterly} x="quarter" y={products} className="h-72" />
    <PieChart data={share} value="revenue" label="product" className="h-72" />
  </div>
</div>
← All examples