Line Chart

import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@hanzo/ui"
import { CartesianGrid, Line, LineChart, XAxis } from "recharts"

const data = [
  { month: "Jan", desktop: 186, mobile: 80 },
  { month: "Feb", desktop: 305, mobile: 200 },
  { month: "Mar", desktop: 237, mobile: 120 },
]

const config = {
  desktop: { label: "Desktop", color: "hsl(var(--chart-1))" },
  mobile: { label: "Mobile", color: "hsl(var(--chart-2))" },
}

export function LineChartDemo() {
  return (
    <ChartContainer config={config}>
      <LineChart data={data}>
        <CartesianGrid vertical={false} />
        <XAxis dataKey="month" />
        <ChartTooltip content={<ChartTooltipContent />} />
        <Line dataKey="desktop" stroke="var(--color-desktop)" strokeWidth={2} />
        <Line dataKey="mobile" stroke="var(--color-mobile)" strokeWidth={2} />
      </LineChart>
    </ChartContainer>
  )
}