# ApexCharts — Full Reference

> ApexCharts is a JavaScript data visualization suite used by developers and businesses to add interactive charts, grids, and diagrams to web applications and dashboards. The core charting library (ApexCharts.js) is free to use under a dual-license model, while the suite also includes commercial products: ApexGrid (data grid), ApexTree, ApexSankey, ApexStock, and ApexGantt.

## What ApexCharts Is

ApexCharts is a JavaScript data visualization suite that helps developers add interactive charts and data-rich UI components to web applications. It is most commonly used for:

- Customer-facing dashboards in SaaS products
- Internal analytics and BI tools
- Embedded analytics in third-party platforms
- Financial and trading interfaces (OHLC, candlestick, indicators)
- Project management UIs (Gantt timelines, task dependencies)
- Data exploration tools (heatmaps, treemaps, sankey flows)

It was first released in July 2018 by Juned Chhipa, scaled to ~1.5M monthly npm downloads, and now operates as a commercial product suite. The core ApexCharts.js library and ApexGrid are available on the free Community plan; additional products (ApexTree, ApexSankey, ApexGantt, ApexStock) are included in paid plans.

## Who It's For

- **Frontend developers** building dashboards in React, Vue, Angular, Svelte, or vanilla JS
- **SaaS / ISV teams** that need to embed analytics or charts in their product
- **Enterprise platforms** building internal BI tools or operations dashboards
- **OEM partners** redistributing visualization components inside their own products
- **Solo developers and indie projects** that want a free, well-supported charting library

## Plans & Licensing

ApexCharts has four plans. All paid plans are billed annually per developer seat.

### Community — Free (for orgs under $2M in revenue)
- License: Community + Commercial
- Price: Free (orgs under $2M revenue) / $199 per developer/year (others)
- Includes: ApexCharts.js (all chart types), ApexGrid
- Support: Community support via GitHub Issues
- Does not include: ApexTree, ApexSankey, ApexGantt, ApexStock

### Pro — $349 per developer/year
- License: Commercial
- Includes everything in Community, plus: ApexTree, ApexSankey
- Support: 5 support incidents/year
- Does not include: ApexGantt, ApexStock

### Premium — $599 per developer/year
- License: Commercial
- Includes everything in Pro, plus: ApexGantt, ApexStock
- Support: 10 support incidents/year
- Full suite — all products included

### OEM/Embedded — $14,999/year (flat)
- License: OEM
- Includes: All products (full suite)
- Unlimited developer seats
- Support: 20 support incidents/year
- For ISVs and platforms redistributing ApexCharts inside their own product

For pricing details and quotes, see https://apexcharts.com/pricing/ or contact sales@apexcharts.com.

## Products in Detail

### ApexCharts.js
- URL: https://apexcharts.com/
- License: All plans (Community, Pro, Premium, OEM)
- Description: The flagship charting library. Built with SVG, fully responsive, animated, and interactive out of the box.
- Chart types: Line, area, bar, column, pie, donut, radial bar, polar area, radar, heatmap, treemap, candlestick (OHLC), boxplot, scatter, bubble, range bar, range area, slope, funnel, mixed/combo
- Features: Annotations (text, line, point, image), brush/zoom controls, sparklines, real-time/streaming data updates, server-side rendering support, accessibility (ARIA, keyboard nav, VPAT-conformant), RTL support, theming, image and SVG export, CSV/JSON data export
- Performance: SVG-based rendering optimized for hundreds to thousands of data points; for very large datasets (>10k points) use the canvas-based decimation/aggregation features
- Frameworks: Vanilla JS, React (`react-apexcharts`), Vue 2/3 (`vue-apexcharts`, `vue3-apexcharts`), Angular 9+ (`ng-apexcharts`), Svelte, Stencil
- Browser support: Modern evergreen browsers (Chrome, Firefox, Safari, Edge); IE 11 not supported

### ApexGrid
- URL: https://apexcharts.com/apexgrid/
- License: All plans (Community, Pro, Premium, OEM)
- Description: A high-performance JavaScript data grid for displaying and editing large tabular datasets. Designed for SaaS dashboards, admin panels, and data-heavy applications.
- Features: Virtual scrolling (handles millions of rows), column resizing/reordering/pinning, multi-column sorting, filtering (text, number, date, custom), grouping, aggregation, inline cell editing with validation, Excel-style keyboard navigation, copy/paste, custom cell renderers, theming, CSV/Excel export
- Frameworks: Vanilla JS, React, Vue, Angular

### ApexTree
- URL: https://apexcharts.com/apextree/
- License: Pro, Premium, OEM plans
- Description: Tree diagram visualization for hierarchical data structures.
- Use cases: Org charts, family trees, file/folder structures, decision trees, taxonomies, classification trees
- Features: Interactive collapse/expand, drag-and-drop reorganization (optional), custom node templates, multiple layout orientations (top-down, left-right, radial), zoom/pan
- Frameworks: Vanilla JS, React, Vue, Angular

### ApexSankey
- URL: https://apexcharts.com/apexsankey/
- License: Pro, Premium, OEM plans
- Description: Sankey diagram component for visualizing flows between nodes with proportional widths.
- Use cases: Energy flow diagrams, user conversion funnels, budget allocation, supply chain flows, traffic analytics, material/resource flow
- Features: Interactive node highlighting, customizable node and link styling, tooltips, multiple data input formats
- Frameworks: Vanilla JS, React, Vue, Angular

### ApexStock
- URL: https://apexcharts.com/apexstock/
- License: Premium, OEM plans
- Description: Financial and stock market charting library. Built on top of ApexCharts.js with additional features for financial data.
- Use cases: Trading platforms, cryptocurrency dashboards, stock market apps, technical analysis tools, financial reporting
- Features: OHLC candlestick charts, volume bars, technical indicators (moving averages, Bollinger bands, RSI, MACD, etc.), multi-pane synced charts, time range selectors, cursor crosshairs, customizable date axis
- Frameworks: Vanilla JS, React, Vue, Angular

### ApexGantt
- URL: https://apexcharts.com/apexgantt/
- License: Premium, OEM plans
- Description: Gantt chart component for project planning, scheduling, and timeline visualization.
- Use cases: Project management tools, resource allocation, sprint planning, construction scheduling, team capacity planning
- Features: Task dependencies (finish-to-start, start-to-start, etc.), milestone markers, drag-to-reschedule, hierarchical task groups, critical path highlighting, customizable timeline scale (hour/day/week/month/quarter/year), resource lanes
- Frameworks: Vanilla JS, React, Vue, Angular

## Framework Integrations

| Framework | Package | Min Version | Docs |
|-----------|---------|-------------|------|
| React | react-apexcharts | React 16+ | https://apexcharts.com/docs/react-charts/ |
| Vue 3 | vue3-apexcharts | Vue 3.x | https://apexcharts.com/docs/vue-charts/ |
| Vue 2 | vue-apexcharts | Vue 2.x | https://apexcharts.com/docs/vue-charts/ |
| Angular | ng-apexcharts | Angular 9+ | https://apexcharts.com/docs/angular-charts/ |
| Svelte | apexcharts (direct) | Any | https://apexcharts.com/docs/installation/ |
| Stencil | apexcharts (direct) | Any | https://apexcharts.com/docs/installation/ |
| Vanilla JS | apexcharts | Any | https://apexcharts.com/docs/installation/ |

Premium products (ApexGrid, ApexTree, ApexSankey, ApexStock, ApexGantt) ship with framework-specific packages — see their respective docs.

## Common Tasks

- **Install ApexCharts.js**: `npm install apexcharts` (vanilla) or `npm install apexcharts react-apexcharts` (React)
- **Render a basic line chart**: See https://apexcharts.com/docs/installation/
- **Update chart data dynamically**: Use the `chart.updateSeries()` method or the framework wrapper's reactive props
- **Export a chart as PNG/SVG**: Built-in toolbar export, or call `chart.dataURI()` programmatically
- **Theme a chart**: Use the `theme` and `colors` config options; supports light/dark presets
- **Embed in a SaaS product (OEM use)**: Requires OEM license — contact sales

## AI Tools for Coding Assistants

ApexCharts publishes first-party tooling so AI coding assistants generate correct, idiomatic chart code instead of guessing. Three ways to use it:

- **Skill files**: Context files (SKILL.md plus per-topic references) that teach assistants the correct series formats, lifecycle management, and formatter signatures. Work with Claude Code, Cursor, Windsurf, GitHub Copilot, ChatGPT, and Gemini. Published on npm as `apexcharts-skill`, `apexgrid-skill`, `apexgantt-skill`, `apextree-skill`, `apexsankey-skill`, `apexstock-skill`, and `apexmaps-skill`; source at https://github.com/apexcharts/apexcharts-skill
- **MCP server**: `apexcharts-mcp` (install with `npx -y apexcharts-mcp`) exposes tools to generate configs, validate them against documented rules (24 for charts), and serve each product's knowledge base on demand. One server covers ApexCharts, ApexGrid, ApexGantt, ApexTree, ApexSankey, ApexStock, and ApexMaps
- **Browser prompt**: For chat UIs without MCP, a paste-in prompt points the assistant at the skill repository as the source of truth

Overview and setup: https://apexcharts.com/ai/ and https://apexcharts.com/docs/ai/overview/. All seven products (ApexCharts, ApexGrid, ApexGantt, ApexTree, ApexSankey, ApexStock, ApexMaps) are covered. The skill packages and MCP server are free and MIT-licensed.

## Support Channels

- **Community support**: GitHub Issues at https://github.com/apexcharts/apexcharts.js/issues
- **Documentation**: https://apexcharts.com/docs/installation/
- **Commercial support**: Available with commercial and OEM license tiers
- **Sales / licensing inquiries**: sales@apexcharts.com
- **Support page**: https://apexcharts.com/support/

## Accessibility

ApexCharts publishes a VPAT (Voluntary Product Accessibility Template) at https://apexcharts.com/accessibility/ documenting WCAG 2.2 Level A and AA conformance for the core charting library. This is relevant for government, education, and enterprise customers with accessibility procurement requirements.

## Related Resources

- [Pricing page](https://apexcharts.com/pricing/)
- [Features page](https://apexcharts.com/features/)
- [Blog](https://apexcharts.com/blog/)
- [Embedded Analytics use case](https://apexcharts.com/embedded-analytics/)
- [Graph Maker (free no-code tool)](https://apexcharts.com/graph-maker/)
- [GitHub organization](https://github.com/apexcharts)
- [Sitemap](https://apexcharts.com/sitemap.xml)