Charts

Which Library to Use

All three coexist peacefully in the same build — you can use ApexCharts on one page and Chart.js on another. The vendor bundle includes both libraries since they're both in dependencies.

ApexCharts

ApexCharts 5.11 is the workhorse charting library used throughout the dashboards. Showcase: charts-apexcharts.html.

Chart Types Available

• Line, Area, Column, Bar (vertical and horizontal)
• Mixed (line + bar, line + area)
• Pie, Donut, Radial Bar
• Candlestick, Boxplot, Range (price ranges, gantt-like)
• Radar, Polar Area
• Bubble, Scatter, Treemap, Heatmap

Basic Usage

import ApexCharts from "apexcharts";
                
                const options = {
                    chart: {
                        type: "line",
                        height: 320,
                    },
                    series: [{
                        name: "Revenue",
                        data: [30, 40, 35, 50, 49, 60, 70, 91, 125],
                    }],
                    xaxis: {
                        categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"],
                    },
                };
                
                const chart = new ApexCharts(document.querySelector("#my-chart"), options);
                chart.render();

Common Configuration

ArchitectUI's default ApexCharts color palette uses the brand primary plus accent gradients. To match the theme:

const options = {
                    colors: ["#3f6ad8", "#16aaff", "#3ac47d", "#f7b924", "#d92550"],
                    stroke: {
                        curve: "smooth",
                        width: 3,
                    },
                    grid: {
                        borderColor: "#e0e6ed",
                        strokeDashArray: 4,
                    },
                    tooltip: {
                        theme: "light",
                    },
                };

Sparklines

Sparklines are ApexCharts charts with chrome stripped — no axes, no grid, no toolbar. Perfect for inline use in stat cards.

Configuration

const sparklineOptions = {
                    chart: {
                        type: "area",
                        height: 60,
                        width: "100%",
                        sparkline: { enabled: true },     // hides axes, grid, toolbar
                    },
                    stroke: {
                        curve: "smooth",
                        width: 2,
                    },
                    fill: {
                        opacity: 0.4,
                    },
                    series: [{
                        data: [10, 14, 11, 17, 22, 19, 25, 28, 34],
                    }],
                    colors: ["#3f6ad8"],
                    tooltip: { enabled: false },
                };

Multiple sparkline initializations live in src/scripts-init/charts/charts-sparklines.js. Showcase: charts-sparklines.html.

Chart.js

Chart.js 4.5 is the lightweight option — canvas-based, smaller bundle, simpler config. Best when you need a quick bar or line chart and don't need ApexCharts' interactive features. Showcase: charts-chartjs.html.

Basic Usage

import { Chart, registerables } from "chart.js";
                
                Chart.register(...registerables);
                
                new Chart(document.getElementById("my-canvas"), {
                    type: "bar",
                    data: {
                        labels: ["Jan", "Feb", "Mar", "Apr", "May"],
                        datasets: [{
                            label: "Sales",
                            data: [12, 19, 3, 5, 2],
                            backgroundColor: "#3f6ad8",
                        }],
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                    },
                });

Chart Types Available

• Bar, Horizontal Bar, Line, Area
• Pie, Doughnut, Polar Area
• Radar, Scatter, Bubble

Adding a Chart to a New Page

Three steps. Assume you want to add an ApexCharts line chart to a custom page called my-dashboard.html:

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 ApexCharts from "apexcharts";
                
                document.addEventListener("DOMContentLoaded", function () {
                    const el = document.querySelector("#my-revenue-chart");
                    if (!el) return;
                
                    new ApexCharts(el, {
                        chart: { type: "line", height: 320 },
                        series: [{ name: "Revenue", data: [30, 40, 35, 50, 49, 60, 70, 91, 125] }],
                        xaxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"] },
                        colors: ["#3f6ad8"],
                        stroke: { curve: "smooth", width: 3 },
                    }).render();
                });

3. Register the Entry in webpack.config.js

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

Restart the dev server. The new entry compiles into its own bundle and HtmlWebpackPlugin injects it into every page (the guard at the top of the initializer makes that safe). Your chart renders on my-dashboard.html.

Tips and Gotchas

• Chart.js needs explicit maintainAspectRatio: false for responsive height. Without it, Chart.js calculates height from the canvas aspect ratio at creation time and never updates it.
• ApexCharts is automatically responsive. No special config needed.
• Avoid mixing ApexCharts and Chart.js on the same page unless necessary — both libraries ship to that page's vendor bundle and increase load time.
• Sparkline width should be "100%", not a pixel value — otherwise the sparkline doesn't resize when its container does.
• Chart updates require .updateOptions() or .updateSeries() (ApexCharts) or .update() (Chart.js) — don't destroy and recreate.
• Lazy-load below-the-fold charts with IntersectionObserver to defer initialization until the chart is visible. The Count Up component uses this pattern; see src/scripts-init/count-up.js for a working example.

Removing Chart.js to Save Bundle Size

If your project uses only ApexCharts, you can remove Chart.js entirely to drop ~250 KB from the vendor bundle:

npm uninstall chart.js

Then remove the chart_js entry from webpack.config.js and delete src/DemoPages/charts/chartjs.hbs + its pages.js entry. The showcase page is the only place Chart.js is used in the template.