Chart.js Demos
Chart.js is WireKit's MIT-licensed default chart adapter. This gallery walks every chart-type family with realistic, copy-paste-ready Blade snippets — drawn from B2B SaaS, e-commerce, DevOps, finance, and other realistic domains so the data shapes match what developers actually feed into their dashboards.
Setup checklist
# 1. Install Chart.js (user-installed; WireKit does not bundle it)
npm install chart.js
// 2. Register globally in resources/js/app.js
import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);
// 3. Enable in config/wirekit.php
'charts' => ['library' => 'chartjs'],
After step 3, every <x-wirekit-chart> tag on every page renders with WireKit's automatic theming + dark-mode reactivity. No further setup.
Demo subpages
| Page | What's on it |
|---|---|
| Bar charts | Simple bar / grouped / stacked / horizontal — quarterly revenue, headcount, error budgets |
| Line charts | Smooth / stepped / dashed / multi-series — DAU, p50/p95 latency, signup funnels |
| Area charts | Filled / stacked / range — disk usage over time, ARR composition |
| Pie + Doughnut | Categorical breakdowns — traffic sources, plan distribution, attribution |
| Scatter + Bubble | Correlation + 3-axis — query plan / index efficiency, customer LTV vs CAC |
| Radar + Polar | Multi-dimensional comparisons — security posture audit, NPS vs CSAT |
| Advanced | Multi-axis (<x-wirekit::chart-mixed>), wire:streaming live updates, annotations |
| Theming | CSS-variable overrides, dark-mode behavior, custom palettes |
The per-type demo pages above carry the variation-by-variation Blade snippets and live previews — open any of them once the setup checklist is complete to see Chart.js rendering against your active palette.
When to pick Chart.js
Reach for Chart.js when:
- The MIT license is non-negotiable (no per-revenue gating).
- The chart types you need are bar / line / area / pie / radar / scatter / bubble — the eight canonical types Chart.js ships natively.
- Bundle-size budget is tight (Chart.js full bundle is ~60 KB gzip; tree-shaken bar-only can drop to ~14 KB).
- You're rendering many charts on a page (10+) with high data-point density (5,000+ points per chart) — Chart.js's canvas-based rendering scales better than ApexCharts's SVG approach for hyperscale data.
If you need candlestick / heatmap / treemap / range-bar / sparkline-with-chrome-stripped / rich annotation support, switch to the ApexCharts adapter.
License
Chart.js is licensed under the MIT License. No revenue-based tiers, no developer-side licensing concerns. The license text travels with the npm package; consult the Chart.js GitHub for the canonical text.
Keyboard Interaction
This is a gateway / link-directory page; it has no interactive surface of its own. Each linked demo page documents its own keyboard behavior where relevant — most chart variants are presentational (no tab-stops). The advanced page covers focus management for charts mounted inside Livewire components.
Design Tokens
The Chart.js adapter consumes the same WireKit color palette as every other component — series colors come from --color-wk-accent, --color-wk-success, --color-wk-warning, --color-wk-danger, --color-wk-info; legend / axis-tick / grid styling pulls from --color-wk-text, --color-wk-text-muted, --color-wk-border; typography from --font-wk-sans.
Dark mode swaps the entire palette atomically when the .dark class toggles on <html> — a MutationObserver re-reads every variable and re-paints the chart without a remount. See /components/charts-chartjs/theming for an end-to-end override example and the Chart page for the full token table.
Usage & Conventions
Switch the active library with one line in config/wirekit.php:
'charts' => ['library' => 'chartjs'],
The same <x-wirekit-chart> Blade tag is consumed by both adapters; only the rendering differs.