Composed chart

"use client";

import {
  ChartcnComposedChart,
  Bar,
  Line,
  XAxis,
  Grid,
  Tooltip,
  Legend,
  ActiveDot,
  Dot,
} from "@/components/charts/composed-chart";
import type { ChartConfig } from "@/components/ui/chart";

const data = [
  { month: "January", profit: 1800, revenue: 4200 },
  { month: "February", profit: 2400, revenue: 5800 },
  { month: "March", profit: 1600, revenue: 4100 },
  { month: "April", profit: 2800, revenue: 6200 },
  { month: "May", profit: 2200, revenue: 5400 },
  { month: "June", profit: 3400, revenue: 7800 },
  { month: "July", profit: 2600, revenue: 6100 },
  { month: "August", profit: 3800, revenue: 8200 },
  { month: "September", profit: 2500, revenue: 5900 },
  { month: "October", profit: 3000, revenue: 6800 },
  { month: "November", profit: 3200, revenue: 7200 },
  { month: "December", profit: 4200, revenue: 9100 },
];

const chartConfig = {
  profit: {
    colors: {
      dark: ["#34d399"],
      light: ["#10b981"],
    },
    label: "Profit",
  },
  revenue: {
    colors: {
      dark: ["#6A5ACD"],
      light: ["#3b82f6"],
    },
    label: "Revenue",
  },
} satisfies ChartConfig;

export function ChartcnExampleComposedChart() {
  return (
    <ChartcnComposedChart
      className="h-full w-full p-4"
      xDataKey="month"
      data={data}
      config={chartConfig}
      showBrush
      brushFormatLabel={(value) => String(value).slice(0, 3)}
    >
      <Grid />
      <XAxis dataKey="month" tickFormatter={(value) => value.slice(0, 3)} />
      <Legend isClickable />
      <Tooltip />
      <Bar dataKey="revenue" isClickable />
      <Line dataKey="profit" isClickable>
        <ActiveDot variant="colored-border" />
        <Dot variant="default" />
      </Line>
    </ChartcnComposedChart>
  );
}