Chart

import { Chart } from "~/components/ui/base/chart";

<Chart
  type="line"
  class="max-w-2xl"
  data={{
    labels: ["Mon", "Tue", "Wed", "Thu", "Fri"],
    datasets: [
      {
        label: "Visits",
        data: [12, 19, 15, 25, 22],
        borderColor: "hsl(var(--accent))",
        backgroundColor: "hsl(var(--accent) / 0.15)",
        fill: true,
        tension: 0.35,
      },
    ],
  }}
/>

import { ChartCanvas } from "~/components/ui/base/chart";

<ChartCanvas
  type="bar"
  class="max-w-2xl"
  data={{
    labels: ["Q1", "Q2", "Q3", "Q4"],
    datasets: [
      {
        label: "Revenue",
        data: [48, 62, 55, 71],
        backgroundColor: [
          "hsl(var(--system-blue))",
          "hsl(var(--system-green))",
          "hsl(var(--system-orange))",
          "hsl(var(--system-purple))",
        ],
      },
    ],
  }}
/>

import { Chart } from "~/components/ui/base/chart";

<Chart
  type="doughnut"
  class="mx-auto max-w-sm"
  data={{
    labels: ["Done", "In progress", "Waiting"],
    datasets: [
      {
        data: [62, 23, 15],
        backgroundColor: [
          "hsl(var(--system-green))",
          "hsl(var(--system-orange))",
          "hsl(var(--fill-secondary))",
        ],
        borderWidth: 0,
      },
    ],
  }}
  options={{ plugins: { legend: { position: "bottom" } } }}
/>