Sales Dashboard

Revenue line chart with area fill, monthly bar chart, and KPI sparklines in a responsive grid.

Monthly Revenue

Quarterly Sales

Weekly Trend

Code

example.tsx

import { LineChart, BarChart, Sparkline } from "@chartts/react"

export function SalesDashboard() {
  return (
    <div className="grid grid-cols-2 gap-6">
      <LineChart
        data={revenueData}
        x="month"
        y="revenue"
        area
        className="col-span-2 h-72"
      />
      <BarChart
        data={quarterlyData}
        x="quarter"
        y={["sales", "target"]}
        className="h-64"
      />
      <div className="flex items-center gap-4">
        <Sparkline data={weeklyTrend} />
      </div>
    </div>
  )
}

← All examples