---
title: ApexCharts Demos
description: WireKit chart gallery powered by the ApexCharts adapter — every chart family including financial, sparklines, annotations, and live streaming.
visibility: guest
draft: false
related:
  - /components/chart
  - /components/charts-chartjs
  - /dependencies
---

# ApexCharts Demos

ApexCharts is WireKit's optional polished-defaults chart adapter. This gallery walks every chart-type family with realistic, copy-paste-ready Blade snippets — drawn from finance (candlestick), e-commerce (heatmaps), DevOps (timelines), HR (treemaps), and other realistic domains.

::: warning License Notice
ApexCharts is **not MIT-licensed**. The free Community License covers personal use, non-profits, education, and organizations under **$2 million USD annual revenue**. Above that threshold, you must purchase a Commercial License directly from ApexCharts. WireKit ships only the adapter glue (MIT). See [the License section on the Chart overview page](/components/chart#license-apexcharts-only) for full terms or [apexcharts.com/license](https://apexcharts.com/license/) for the canonical text.
:::

## Setup checklist

```bash
# 1. Install ApexCharts (user-installed; WireKit does not bundle it)
npm install apexcharts
```

```js
// 2. Expose globally in resources/js/app.js
import ApexCharts from 'apexcharts';
window.ApexCharts = ApexCharts;
```

```php
// 3. Switch the adapter on in config/wirekit.php — @wirekitScripts then emits
//    both tags in the right order. Off by default so an app without charts
//    ships no chart code; leaving it off is why a chart area silently stays
//    empty with "wirekitApexChart is not defined" in the console.
'scripts' => ['bundle' => 'full', 'apex' => true],
```

```bash
# 4. Set the adapter + license tier with one command
php artisan wirekit:install --apex-license=community
```

The `--apex-license` flag accepts `community` / `commercial` / `oem`. It prints the License Notice once at install time, writes both `charts.library => 'apexcharts'` and `charts.apex_license => '<tier>'` into `config/wirekit.php`, and silences the `wirekit:doctor` reminder for `commercial` and `oem` tiers.

## Demo subpages

| Page | What's on it |
|---|---|
| [Line](./charts-apex/line.md) | Smooth / spline / dashed / step / multi-series sync |
| [Area](./charts-apex/area.md) | Basic / stacked / range-area / spline-with-gradient |
| [Bar](./charts-apex/bar.md) | Grouped / stacked / horizontal / negative / patterned |
| [Column](./charts-apex/column.md) | Vertical bars with grouped / stacked / range / dynamic-loaded variations |
| [Range Bar](./charts-apex/range-bar.md) | Date-range / Gantt-style schedule visualizations |
| [Pie + Donut](./charts-apex/pie-donut.md) | Patterned / monochrome / image-fill variants |
| [Radial Bar](./charts-apex/radial-bar.md) | Circle gauge / multi / semi-circle KPI dials |
| [Radar](./charts-apex/radar.md) | Multi-series + polygon-fill |
| [Scatter + Bubble](./charts-apex/scatter-bubble.md) | Scatter / 3D bubble / datetime |
| [Heatmap](./charts-apex/heatmap.md) | Activity heatmaps + range / rounded variants |
| [Treemap](./charts-apex/treemap.md) | Hierarchical breakdowns + color-range / patterned |
| [Candlestick](./charts-apex/candlestick.md) | OHLC stock prices + combo-with-overlay-line |
| [Box Plot](./charts-apex/boxplot.md) | Statistical distributions + scatter overlay |
| [Funnel](./charts-apex/funnel.md) | Conversion-funnel + pyramid + stepped |
| [Mixed](./charts-apex/mixed.md) | Multi-axis / line+column / line+area combos |
| [Timeline](./charts-apex/timeline.md) | Project-timeline + multi-series + dumbbell |
| [Sparklines](./charts-apex/sparklines.md) | Inline KPI strips + dashboard-grid pattern |
| [Annotations](./charts-apex/annotations.md) | Vertical lines / horizontal regions / labels / image overlays |
| [Streaming](./charts-apex/streaming.md) | Real-time data via Livewire wire:streaming |
| [Motion](./charts-apex/motion.md) | Animation showcase including dark-mode preset transitions |
| [Theming](./charts-apex/theming.md) | CSS-variable bridge, dark-mode behavior, palette overrides |

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 the ApexCharts rendering against your active palette.

## When to pick ApexCharts

Reach for ApexCharts when:

- You need chart types Chart.js does not ship natively — candlestick, heatmap, treemap, range-bar, funnel, timeline.
- Polished defaults matter more than bundle size. ApexCharts ships with refined typography, animation, and tooltip defaults out of the box.
- You want first-class annotations support (no plugin install).
- You need dynamic, real-time updates (`chart.appendData()` with built-in animation).

If your charts are simple bar / line / pie and bundle size is tight, the [Chart.js adapter](./charts-chartjs.md) is the better fit (~60 KB gzip vs ~131 KB for ApexCharts full bundle).

## License recap

Three tiers:

| Tier | Threshold | Cost |
|---|---|---|
| Community | < $2M USD revenue | Free |
| Commercial | ≥ $2M USD revenue | Paid (annual subscription) |
| OEM | Embedding into a redistributed product | Paid (separate from Commercial) |

WireKit's adapter posture does NOT trigger the OEM tier — we ship only adapter glue. The ApexCharts JS library is a separate npm install, and your organization determines which tier applies.

::: info
**Last reviewed:** May 2026 against the public license text at [apexcharts.com/license](https://apexcharts.com/license/). License terms can change without notice — verify the current tiers + thresholds against the linked page before signing a contract or planning a budget.
:::

## 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); a handful (sparklines embedded in flowing text, the streaming chart with focusable controls) document focus order on their own page.

## Design Tokens

The ApexCharts adapter reads the same `--color-wk-*` palette as the [Chart.js adapter](/components/chart#design-tokens) — 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-apex/theming` for an end-to-end override example and the [Chart](/components/chart#design-tokens) page for the full token table.