---
title: Chart.js Demos
description: WireKit chart gallery powered by the Chart.js adapter — every chart family Chart.js ships natively, with realistic seed data.
visibility: guest
draft: false
related:
  - /components/chart
  - /components/charts-apex
  - /dependencies
---

# 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

```bash
# 1. Install Chart.js (user-installed; WireKit does not bundle it)
npm install chart.js
```

```js
// 2. Register globally in resources/js/app.js
import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);
```

```php
// 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](./charts-chartjs/bar.md) | Simple bar / grouped / stacked / horizontal — quarterly revenue, headcount, error budgets |
| [Line charts](./charts-chartjs/line.md) | Smooth / stepped / dashed / multi-series — DAU, p50/p95 latency, signup funnels |
| [Area charts](./charts-chartjs/area.md) | Filled / stacked / range — disk usage over time, ARR composition |
| [Pie + Doughnut](./charts-chartjs/pie-doughnut.md) | Categorical breakdowns — traffic sources, plan distribution, attribution |
| [Scatter + Bubble](./charts-chartjs/scatter-bubble.md) | Correlation + 3-axis — query plan / index efficiency, customer LTV vs CAC |
| [Radar + Polar](./charts-chartjs/radar-polar.md) | Multi-dimensional comparisons — security posture audit, NPS vs CSAT |
| [Advanced](./charts-chartjs/advanced.md) | Multi-axis (`<x-wirekit::chart-mixed>`), wire:streaming live updates, annotations |
| [Theming](./charts-chartjs/theming.md) | 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](./charts-apex.md).

## 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](https://github.com/chartjs/Chart.js/blob/master/LICENSE.md) 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](/components/chart#design-tokens) page for the full token table.

## Usage & Conventions

::: tip
Switch the active library with one line in `config/wirekit.php`:

```php
'charts' => ['library' => 'chartjs'],
```

The same `<x-wirekit-chart>` Blade tag is consumed by both adapters; only the rendering differs.
:::