Chart

1
2
3<div class="chart w-100" id="chart-area-default" data-chart="area" data-chart-data='{"datasets": [{"data": [186, 305, 237, 273, 209, 214], "label": "Desktop"}, {"data": [80, 200, 120, 190, 130, 140], "label": "Mobile"}], "labels": ["Apr", "May", "Jun", "Jul", "Aug", "Sep"]}' style="height: 17.5rem">
  <canvas role="img" aria-label="Area chart comparing desktop and mobile visitors over six months"></canvas>
</div>

HTML Anatomy

These are the public HTML hooks that applications can inspect or target. They describe rendered markup, not the repository's internal Jinja build helpers.

1
2
3<div class="chart" id="chart-html-example" data-chart="line" data-chart-data='{"datasets": [{"data": [4000, 3200, 4800], "label": "Revenue"}], "labels": ["Jan", "Feb", "Mar"]}' data-chart-options='{"plugins": {"legend": {"display": false}}}' style="height: 17.5rem">
  <canvas role="img" aria-label="Monthly revenue line chart"></canvas>
</div>

JavaScript

Chart.js is bundled into the published chart.js entrypoint through chart.js/auto; the wrapper never reads a browser global Chart object and never loads a runtime CDN script. Importing the module never scans the document. Initialize only a .chart root your application owns: repeated initialization returns the same instance, and dispose() destroys the Chart.js instance, disconnects the theme observer, cancels pending work, and releases the instance registration.

1
2
3
4
5
6
7
8
9
10
11
12
13
14import MooChart from "@wpmoo/ui/chart.js";

const element = document.querySelector(".chart");

if (element) {
  const chart = MooChart.getOrCreateInstance(element);

  // getOrCreateInstance is idempotent: the same instance is returned.
  const again = MooChart.getOrCreateInstance(element);
  console.assert(chart === again);

  // Later, release Chart.js and the theme observer.
  chart.dispose();
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15import MooChart from "@wpmoo/ui/chart.js";

MooChart.getOrCreateInstance(document.querySelector("#chart-tooltip-custom"), {
  options: {
    plugins: {
      tooltip: {
        callbacks: {
          label(context) {
            return `${context.dataset.label}: ${context.formattedValue}`;
          },
        },
      },
    },
  },
});

Theming

Chart colors are derived from --moo-chart-1 through --moo-chart-5, falling back to Bootstrap's semantic --bs-* tokens at runtime. Cartesian, radar, scatter, and bubble charts assign that palette by dataset; pie, doughnut, and polar area charts cycle it by slice. Explicit Chart.js dataset color fields are preserved, while unset color fields continue to follow the active palette. A MutationObserver watches the nearest data-bs-theme scope, falling back to the document element; when that scope or its inline chart-token styles change, each chart re-reads the tokens and re-themes its datasets, grid lines, legend, and tooltip without a reload. Legend and tooltip markers use matching compact circular swatches with the same border color and text offset, while thin line, area, and radar strokes keep point markers readable. Line chart points use their series color for the point fill, border, and hover state. Charts also reflow on resize: they are responsive and drop aspect-ratio locking, so the same markup fills a desktop card or a narrow mobile viewport without layout-specific switches.

Accessibility

The canvas is a raster of pixels, so give it a text alternative: set role="img" and a descriptive aria-label on the <canvas>, or provide an adjacent data table for the same series. Keep legends visible rather than encoding meaning in color alone, and preserve the default tooltip so individual values remain reachable on touch and with a pointer.