Charts

Chart Bundles

Import Chart.js from src/utils/chartjs.js rather than from chart.js directly: that module registers every chart type, applies the theme preset and mirrors legends and value axes on RTL pages.

Theme Preset

src/utils/chart-theme.js sets Chart.defaults once: the body font, text and gridline colours read from the Bootstrap CSS variables (--bs-body-color, --bs-secondary-color, --bs-primary…), subtle horizontal gridlines only, rounded bars, round legend and tooltip markers and a dark rounded tooltip. Individual charts only describe their data.

When the colour mode changes (a data-bs-theme attribute on <html> or <body>) the colours are read again and every chart is redrawn. If you change the CSS variables some other way, call refreshChartTheme(). The module also exports helpers used by the demo charts: theme (the live colours), alpha(), verticalGradient(), horizontalGradient() and small inline plugins for centre text, progress-ring tracks and threshold lines.

Drawing a Chart into a Placeholder

mountChart(container, config, size) from src/utils/chartjs.js draws a chart into an empty <div>: it sizes the div, adds the <canvas> and creates a responsive chart that follows the container width (including when the sidebar is collapsed).

• Charts inside a hidden tab, a closed dropdown or a collapsed card are drawn the first time they are shown, so they are never blank or squashed.
• Mounting into the same div again destroys the previous chart first.
• Copies of a chart made by a carousel (Slick clones its slides) are redrawn automatically.

import { mountChart } from "../../utils/chartjs";
                import { theme, verticalGradient } from "../../utils/chart-theme";
                
                mountChart(document.getElementById("my-revenue-chart"), {
                    type: "line",
                    data: {
                        labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"],
                        datasets: [{
                            label: "Revenue",
                            data: [30, 40, 35, 50, 49, 60, 70, 91, 125],
                            borderColor: theme.colors.primary,
                            backgroundColor: verticalGradient(theme.colors.primary, 0.3, 0),
                            fill: "start",
                        }],
                    },
                }, { height: 320 });

Sparklines

A sparkline is a regular Chart.js chart with the axes, legend and gridlines turned off:

mountChart(el, {
                    type: "line",
                    data: {
                        labels: [1, 2, 3, 4, 5, 6, 7, 8, 9],
                        datasets: [{ data: [10, 14, 11, 17, 22, 19, 25, 28, 34], borderColor: "#3f6ad8" }],
                    },
                    options: {
                        scales: { x: { display: false }, y: { display: false } },
                        plugins: { legend: { display: false }, tooltip: { enabled: false } },
                    },
                }, { height: 50, width: 120 });

More examples live in src/scripts-init/charts/charts-sparklines.js. Showcase: charts-sparklines.html.

Chart Types Available

• Line, Area (including negative values), Column and Bar (grouped, stacked, horizontal)
• Mixed bar + line on two value axes
• Pie, Doughnut, Polar Area, Radar, Scatter, Bubble
• Gauges and progress rings (doughnuts with a track and centre text)

Need heatmaps, treemaps, financial or box-plot charts? Add the MIT-licensed Chart.js plugins chartjs-chart-matrix, chartjs-chart-treemap, chartjs-chart-financial or @sgratzl/chartjs-chart-boxplot.

Adding a Chart to a New Page

1. Create a Container in Your Template

{{!-- src/DemoPages/dashboards/my-dashboard.hbs --}}
                <div class="main-card mb-3 card">
                    <div class="card-body">
                        <h5 class="card-title">Revenue Last 9 Months</h5>
                        <div id="my-revenue-chart"></div>
                    </div>
                </div>

2. Write the Initializer

// src/scripts-init/charts/my-revenue.js
                import { mountChart } from "../../utils/chartjs";
                import { onReady } from "../../utils/lifecycle";
                
                onReady(() => {
                    const el = document.getElementById("my-revenue-chart");
                    if (!el) return;
                    mountChart(el, { type: "bar", data: { /* ... */ } }, { height: 320 });
                });

3. Register the Entry in webpack.config.js

// webpack.config.js
                entry: {
                    // ...existing entries...
                    my_revenue: "./src/scripts-init/charts/my-revenue.js",
                }

Then add the entry to the page's chunk list in chunksFor() near the top of webpack.config.js, and restart the dev server.

Tips and Gotchas

• Give charts a height. mountChart() sets maintainAspectRatio: false and the height you pass; with a bare <canvas>, wrap it in a sized container and set maintainAspectRatio: false yourself.
• Update, don't recreate. Change chart.data and call chart.update().
• Theme colours at draw time. Use a function (borderColor: () => theme.colors.primary) for a colour that should follow a theme change.
• One Chart.js per bundle. Each webpack entry carries its own copy of the Chart.js modules, so Chart.getChart() only finds charts created by the same bundle.