Charts

Chart.js is served from the local npm package and has its own runtime entry. Pages containing canvas markup or Chart.js demos receive that entry automatically. Bootstrap and the shared shell remain independent of it.

Existing inline demos

Existing demos use window.Chart after the module entries have loaded:

<canvas id="attendanceChart"></canvas>
<script>
document.addEventListener('DOMContentLoaded', function () {
  new Chart(document.getElementById('attendanceChart'), {
    type: 'bar',
    data: {
      labels: ['Mon', 'Tue', 'Wed'],
      datasets: [{ label: 'Attendance', data: [92, 88, 95] }]
    }
  });
});
</script>

Kiaalap respects reduced-motion preferences for its chart defaults. The examples supply demo data; connect your data source before using them for real reporting.

Module code and dynamic charts

Modules can import Chart.js directly:

import Chart from 'chart.js/auto';

For a chart created after page load, use the lazy loader:

const Chart = await Kiaalap.load('chart');
const chart = new Chart(canvas, config);

Loading Chart.js later does not initialize a chart for you: construct it with your canvas, data and options.

Layout and lifecycle

Chart containers use src/css/charts-layout.css. Give a responsive chart’s container a defined height when using maintainAspectRatio: false. Existing tabbed demos initialize charts when their tab is shown.

Use chart.update() after changing data and chart.destroy() before removing its canvas or recreating a chart on the same canvas. Chart.js handles resizing; the previous no-op shared resize listener was removed.

Payload figures

The shared shell decreased from about 99 kB to 27 kB gzip. That comparison excludes Chart.js, optional page libraries, CSS, fonts and images. Chart pages still fetch the chart runtime when needed; the optimization mainly benefits pages without charts.