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.
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 for full terms or apexcharts.com/license for the canonical text.
Setup checklist
# 1. Install ApexCharts (user-installed; WireKit does not bundle it)
npm install apexcharts
// 2. Expose globally in resources/js/app.js
import ApexCharts from 'apexcharts';
window.ApexCharts = ApexCharts;
// 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],
# 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 | Smooth / spline / dashed / step / multi-series sync |
| Area | Basic / stacked / range-area / spline-with-gradient |
| Bar | Grouped / stacked / horizontal / negative / patterned |
| Column | Vertical bars with grouped / stacked / range / dynamic-loaded variations |
| Range Bar | Date-range / Gantt-style schedule visualizations |
| Pie + Donut | Patterned / monochrome / image-fill variants |
| Radial Bar | Circle gauge / multi / semi-circle KPI dials |
| Radar | Multi-series + polygon-fill |
| Scatter + Bubble | Scatter / 3D bubble / datetime |
| Heatmap | Activity heatmaps + range / rounded variants |
| Treemap | Hierarchical breakdowns + color-range / patterned |
| Candlestick | OHLC stock prices + combo-with-overlay-line |
| Box Plot | Statistical distributions + scatter overlay |
| Funnel | Conversion-funnel + pyramid + stepped |
| Mixed | Multi-axis / line+column / line+area combos |
| Timeline | Project-timeline + multi-series + dumbbell |
| Sparklines | Inline KPI strips + dashboard-grid pattern |
| Annotations | Vertical lines / horizontal regions / labels / image overlays |
| Streaming | Real-time data via Livewire wire:streaming |
| Motion | Animation showcase including dark-mode preset transitions |
| Theming | 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 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.
Last reviewed: May 2026 against the public license text at 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 — 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 page for the full token table.