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 / pie / doughnut / radar / polarArea / scatter / bubble — the eight controllers Chart.js ships natively. WireKit adds
areaon top of them: Chart.js has no area controller, sotype="area"renders a line chart withfillset on every dataset. - 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.
Accessibility
The same holds for every demo linked above: the data is drawn to a canvas, and a canvas says nothing to a screen reader.
The text alternative is the part that matters here, and it is the same for every adapter: label the chart as an image with a summary of what the data shows, and pair it with a visually-hidden data table when the summary cannot carry it. Both patterns, with examples, are on Chart — this page adds nothing to them and deliberately does not restate them, so there is one copy to keep true.
Keyboard Interaction
This is a gateway / link-directory page; it has no interactive surface of its own, and neither does any page it links to: every Chart.js variant is presentational and takes no tab-stop. The keyboard model lives in one place, on Chart, and the demo pages deliberately do not restate it.
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.