ApexCharts Demos
ApexCharts is WireKit's optional chart adapter for the case where the library's own typography, animation and tooltip defaults are what you want out of the box. 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 — quartiles, whiskers and outliers |
| Funnel | Conversion-funnel + pyramid + stepped |
| Mixed | Multi-axis / line+column / line+area combos |
| Timeline | Project timelines and multi-series ranges |
| 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.
- The library's own defaults matter more than bundle size. ApexCharts ships with typography, animation and tooltip settings that need no configuration to look finished.
- 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.
Accessibility
Every chart on the linked pages draws its data as SVG inside a <div> — the adapter's rendersTo() says so — and the shapes carry no text a screen reader can read — so the keyboard answer below is only half of the accessibility answer.
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 ApexCharts variant is presentational and takes no tab-stop, including the inline sparkline and the streaming chart. The keyboard model lives in one place, on Chart, and the demo pages deliberately do not restate it.
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.