Examples/

Responsive Grid

Charts that scale from mobile to desktop using Tailwind responsive utilities and SVG viewBox scaling.

Responsive Line
JanFebMarAprMayJunJulAug1020304050
Categories
ABCDE020406080100
Split
52%38%10%

Implementation

dashboard.tsx
<div className="space-y-4">
  <LineChart data={growth} className="h-48 md:h-64 lg:h-72" />
  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
    <BarChart data={categories} className="h-48 md:h-64" />
    <DonutChart data={split} className="h-48 md:h-64" />
  </div>
</div>
← All examples