Chart

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

    export function ChartDemo() {
      const data = [
        { name: "Jan", value: 400 },
        { name: "Feb", value: 300 },
        { name: "Mar", value: 500 },
        { name: "Apr", value: 280 },
        { name: "May", value: 590 },
        { name: "Jun", value: 320 },
      ]

      const config = {
        value: {
          label: "Revenue",
          color: "#0ea5e9",
        },
      }

      return (
        <ChartContainer config={config}>
          <LineChart data={data} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="name" />
            <YAxis />
            <ChartTooltip content={<ChartTooltipContent />} />
            <Line 
              type="monotone" 
              dataKey="value" 
              stroke="var(--color-value, #0ea5e9)" 
              strokeWidth={2} 
              dot={{ r: 4 }}
            />
          </LineChart>
        </ChartContainer>
      )
    }