Chart

bash

npx shadcn add @eloquent/chart

tsx

import { Bar, BarChart, CartesianGrid, Legend, Tooltip, XAxis, YAxis } from "recharts";
import { ChartContainer, ChartLegendContent, ChartTooltipContent } from "@/components/ui/chart";

const config = {
  filed: { label: "Filed", pattern: "solid" },
  published: { label: "Published", pattern: "hatch" },
};

<ChartContainer
  config={config}
  label="Stories filed and published, by desk"
  caption="Stories filed and published this week, by desk."
  data={rows}
  categoryKey="desk"
  table={{ summary: "Show the data as a table", categoryLabel: "Desk" }}
  className="max-w-xl"
>
  {(series) => (
    <BarChart data={rows}>
      <CartesianGrid vertical={false} />
      <XAxis dataKey="desk" tickLine={false} />
      <YAxis tickLine={false} width={32} />
      <Tooltip cursor={false} content={<ChartTooltipContent />} />
      <Legend content={<ChartLegendContent />} />
      <Bar dataKey="filed" isAnimationActive={series.animate} {...series.bar("filed")} />
      <Bar dataKey="published" isAnimationActive={series.animate} {...series.bar("published")} />
    </BarChart>
  )}
</ChartContainer>