Chartly Docs

import { ChartContainer, ChartConfig } from "@chartly/react";
import { AreaChart, Area, XAxis, YAxis } from "recharts";

const data = [
  { month: "Jan", revenue: 4000 },
  { month: "Feb", revenue: 3000 },
  { month: "Mar", revenue: 5000 },
];

const config = {
  revenue: {
    label: "Revenue",
    color: "var(--chart-1)",
  },
} satisfies ChartConfig;

export function MyChart() {
  return (
    <ChartContainer config={config} className="h-[300px]">
      <AreaChart data={data}>
        <XAxis dataKey="month" />
        <YAxis />
        <Area
          dataKey="revenue"
          stroke="var(--color-revenue)"
          fill="var(--color-revenue)"
        />
      </AreaChart>
    </ChartContainer>
  );
}