"use client"

import { LineChart, type LineChartSeries } from "@/components/line-chart"

type Point = { month: string; value: number | null }

const revenue: Point[] = [
  { month: "Jan", value: 42000 },
  { month: "Feb", value: 38500 },
  { month: "Mar", value: 51200 },
  { month: "Apr", value: 47800 },
  { month: "May", value: 60300 },
  { month: "Jun", value: 58100 },
]

const cost: Point[] = [
  { month: "Jan", value: 29000 },
  { month: "Feb", value: 27600 },
  { month: "Mar", value: 33900 },
  { month: "Apr", value: 31200 },
  { month: "May", value: 36700 },
  { month: "Jun", value: 35400 },
]

const forecast: Point[] = [
  { month: "Jan", value: null },
  { month: "Feb", value: null },
  { month: "Mar", value: null },
  { month: "Apr", value: 47800 },
  { month: "May", value: 63000 },
  { month: "Jun", value: 71500 },
]

const series: LineChartSeries<Point>[] = [
  { key: "revenue", label: "Revenue", data: revenue },
  { key: "cost", label: "Cost", data: cost },
  { key: "forecast", label: "Forecast", data: forecast, dashArray: "5,4" },
]

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

export function LineChartDemo() {
  return (
    <div className="w-full max-w-2xl">
      <LineChart
        series={series}
        x={(d) => d.month}
        y={(d) => d.value}
        formatY={usd}
        highlightedKey="May"
      />
    </div>
  )
}
LineChart

Instalação

Exemplo

Dependências
