Chart Container

pnpm add recharts

import { ChartContainer, ChartTooltip, ChartLegend } from "@sigil-ui/components";

"use client";

import { ChartContainer, ChartLegend, ChartTooltip } from "@sigil-ui/components";
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";

const TRAFFIC = [
  { month: "Apr", desktop: 186, mobile: 80 },
  { month: "May", desktop: 224, mobile: 112 },
  { month: "Jun", desktop: 208, mobile: 132 },
  { month: "Jul", desktop: 278, mobile: 166 },
  { month: "Aug", desktop: 305, mobile: 184 },
  { month: "Sep", desktop: 342, mobile: 218 },
];

function ChartContainerPreview() {
  return (
    <div className="grid gap-[var(--s-space-16)] w-full">
      <div><strong>Monthly visitors</strong><p className="text-[var(--s-text-muted)] text-[length:var(--s-size-sm)]">Compare desktop and mobile traffic. Hover or use the arrow keys to inspect a month.</p></div>
      <ChartContainer height={280} aria-label="Desktop and mobile visitors from April to September">
        <AreaChart data={TRAFFIC} accessibilityLayer>
          <CartesianGrid vertical={false} />
          <XAxis dataKey="month" tickLine={false} axisLine={false} />
          <YAxis width={36} tickLine={false} axisLine={false} />
          <ChartTooltip />
          <ChartLegend />
          <Area name="Desktop" type="monotone" dataKey="desktop" stroke="var(--s-chart-series-1)" fill="var(--s-chart-series-1)" fillOpacity={0.12} isAnimationActive={false} />
          <Area name="Mobile" type="monotone" dataKey="mobile" stroke="var(--s-chart-series-2)" fill="var(--s-chart-series-2)" fillOpacity={0.12} isAnimationActive={false} />
        </AreaChart>
      </ChartContainer>
    </div>
  );
}