"use client"

import { BarChart, type BarChartSeries } from "@/components/bar-chart"

type Point = { quarter: string; value: number }

const newRevenue: Point[] = [
  { quarter: "Q1", value: 18200 },
  { quarter: "Q2", value: 21500 },
  { quarter: "Q3", value: 24800 },
  { quarter: "Q4", value: 29100 },
]

const expansion: Point[] = [
  { quarter: "Q1", value: 6400 },
  { quarter: "Q2", value: 8100 },
  { quarter: "Q3", value: 9600 },
  { quarter: "Q4", value: 12300 },
]

const churn: Point[] = [
  { quarter: "Q1", value: 3200 },
  { quarter: "Q2", value: 2800 },
  { quarter: "Q3", value: 3600 },
  { quarter: "Q4", value: 4100 },
]

const series: BarChartSeries<Point>[] = [
  { key: "new", label: "New", data: newRevenue },
  { key: "expansion", label: "Expansion", data: expansion },
  { key: "recovered", label: "Recovered", data: churn },
]

const usd = (value: number) => `$${(value / 1000).toFixed(0)}k`

export function BarChartStackedDemo() {
  return (
    <div className="w-full max-w-2xl">
      <BarChart series={series} x={(d) => d.quarter} y={(d) => d.value} layout="stacked" formatValue={usd} />
    </div>
  )
}
BarChart

Instalação

Exemplo

Dependências
