Chart

"use client";

import { Bar, BarChart, XAxis } from "recharts";
import { ChartContainer, ChartTooltip } from "@/components/ui/chart";

const data = [{ day: "Mon", visits: 120 }, { day: "Tue", visits: 180 }];

export default function Example() {
  return (
    <ChartContainer title="Daily visits" description="Visits by day." tableLabel="View data"
      table={<table><caption>Daily visits</caption><thead><tr><th scope="col">Day</th><th scope="col">Visits</th></tr></thead><tbody>{data.map(row => <tr key={row.day}><th scope="row">{row.day}</th><td>{row.visits}</td></tr>)}</tbody></table>}>
      <BarChart data={data} accessibilityLayer>
        <XAxis dataKey="day" />
        <ChartTooltip />
        <Bar dataKey="visits" name="Visits" fill="var(--primary)" />
      </BarChart>
    </ChartContainer>
  );
}