Chart
Line
The Chart export is an alias for ChartCanvas.
tsx
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,
},
],
}}
/>
Bars (bar)
A bar chart — comparing categories side by side.
tsx
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))",
],
},
],
}}
/>
Doughnut
Doughnut — see the example below.
tsx
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" } } }}
/>
Metadata
Source: meta.generated.json (see npm run generate)
File base/chart/meta.generated.json not found or path not allowed.