Chart

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

<canvas id="chart-example-overview" aria-label="Visitors by device"></canvas>

Usage

@import "tailwindcss";
@import "basecoat-css/vega.css";

@import "tailwindcss";
@import "basecoat-css/base.css";
@import "basecoat-css/components/chart.css";
@import "basecoat-css/styles/vega.css";

<script src="/assets/js/chart.umd.min.js"></script>
<script src="/assets/js/basecoat.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.basecoat.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>

basecoat.chart() targets the <canvas> directly and creates Basecoat’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 Basecoat-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.basecoat.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.basecoat.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.basecoat.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.basecoat.chart("#custom-chart", {
  type: "scatter",
  chartData: {
    datasets: [
      {
        label: "Samples",
        data: [{ x: 1, y: 2 }, { x: 2, y: 5 }],
      },
    ],
  },
  options: {
    scales: {
      x: { type: "linear" },
    },
  },
})

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

Examples

Bar chart - multiple

<canvas id="chart-example-visitors" aria-label="Monthly visitors by device"></canvas>

Line chart - linear

<canvas id="chart-example-line" aria-label="Revenue line chart"></canvas>

Line chart - step

<canvas id="chart-example-step" aria-label="Support queue step chart"></canvas>

Bar chart - stacked

<canvas id="chart-example-stacked" aria-label="Stacked pipeline bar chart"></canvas>

Pie chart - donut

<canvas id="chart-example-donut" aria-label="Traffic source donut chart"></canvas>

Radar chart

<canvas id="chart-example-radar" aria-label="Channel performance radar chart"></canvas>

API

Series options