#Chart

Use Chart.js with A3S UI defaults for themed colors, external tooltips, and optional generated legends.

#Usage

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/chart.css";
@import "@a3s-lab/ui/styles/a3s.css";

<script src="/assets/js/chart.umd.min.js"></script>
<script src="/assets/js/runtime.min.js" defer></script>
<script src="/assets/js/chart.min.js" defer></script>

<canvas id="visitors-chart" aria-label="Monthly visitors"></canvas>
<script>
  document.addEventListener("DOMContentLoaded", () => {
    window.a3sUI.chart("#visitors-chart", {
      type: "bar",
      labelKey: "month",
      data: [
        { month: "Jan", desktop: 186, mobile: 80 },
        { month: "Feb", desktop: 305, mobile: 200 },
        { month: "Mar", desktop: 237, mobile: 120 },
        { month: "Apr", desktop: 73, mobile: 190 },
        { month: "May", desktop: 209, mobile: 130 },
        { month: "Jun", desktop: 214, mobile: 140 },
      ],
      series: {
        desktop: { label: "Desktop", color: "var(--chart-1)" },
        mobile: { label: "Mobile", color: "var(--chart-2)" },
      },
    })
  })
</script>

a3sUI.chart() targets the <canvas> directly and creates A3S UI's internal .chart container for Chart.js sizing. You do not need to add a wrapper or class in your HTML.

Charts default to aspect-video. Use a height, min-h-*, or aspect-* utility on a parent element when you need a different measuring box.

#Legend

Set legend: true to generate a A3S UI-styled legend after the canvas.

The generated legend is display-only by default, matching shadcn/ui. Use a Chart.js plugin or custom legend markup if you need click-to-toggle behavior.

window.a3sUI.chart("#visitors-chart", {
  type: "bar",
  labelKey: "month",
  data,
  series,
  legend: true,
})

#Series

series maps object keys from each data row to labels, colors, and optional Chart.js dataset settings.

window.a3sUI.chart("#revenue-chart", {
  type: "line",
  labelKey: "month",
  data,
  series: {
    recurring: {
      label: "Recurring",
      color: "var(--chart-1)",
      surface: "gradient",
      dataset: {
        fill: true,
        tension: 0.35,
      },
    },
    new: {
      label: "New",
      color: "var(--chart-2)",
      dataset: {
        borderDash: [4, 4],
      },
    },
  },
})

#Escape Hatches

Pass raw Chart.js options and plugins through options and plugins.

const chart = window.a3sUI.chart("#visitors-chart", {
  type: "bar",
  labelKey: "month",
  data,
  series,
  options: {
    indexAxis: "x",
    scales: {
      y: {
        beginAtZero: true,
      },
    },
    plugins: {
      tooltip: {
        mode: "index",
      },
    },
  },
  plugins: [myChartJsPlugin],
})

Pass complete Chart.js data through chartData when the simplified data plus series mapper is not enough.

window.a3sUI.chart("#custom-chart", {
  type: "scatter",
  chartData: {
    datasets: [
      {
        label: "Samples",
        data: [{ x: 1, y: 2 }, { x: 2, y: 5 }],
      },
    ],
  },
  options: {
    scales: {
      x: { type: "linear" },
    },
  },
})

a3sUI.chart() returns the Chart.js instance for single targets and an array of instances for multi-target selectors.

#Examples

#Bar chart - multiple

#Line chart - linear

#Line chart - step

#Bar chart - stacked

#Pie chart - donut

#Radar chart

#API

#Series options