ApexCharts.js - JavaScript Charts for your website

15k+ GitHub stars
6M+ npm downloads / month
20+ chart types
8+ years of development

New in v6

A chart you investigate, not just view

ApexCharts 6.0 adds scrollytelling, linked crossfilter dashboards, on-chart annotation, a plugin platform, a canvas renderer, and more. All opt-in, all tree-shakeable.

Beat 1/5 · The year in revenue

Narrate

Storyboard

Bind prose to saved views so scrolling drives the chart. Scrollytelling, built in.

Measuring Jan → Jun · +45.0%

Investigate

Measure

Sweep a ruler across any two points and read the delta, percent change, and slope in data space. The measurement pins to the data and re-projects as you zoom and pan.

One year of commits · grab the brush to take over

Correlate

Linked Views

Wire multiple charts to one dataset. Brush a range or click a category, and every linked view re-aggregates live. Crossfilter, native.

See everything new in 6.0

Build with AI

Skip the docs. Describe the chart.

The charting family that's easiest to build with AI. Tell Claude, Cursor, or ChatGPT what you want, and the MCP server validates every config against the real chart API before you paste it, so charts render right the first time, across the whole ApexCharts family.

MCP server

Connect once and your agent generates configs, then validates them against the real chart API before you paste, so charts render on the first try.

claude mcp add apexcharts -- npx -y apexcharts-mcp

Skill files

One context file that teaches your assistant the right patterns. Works with Claude Code, Cursor, and Copilot.

npm i apexcharts-skill

Browser chat

No install. Paste one prompt into any chatbot and start building right away.

Use the ApexCharts family. Follow the matching skill at github.com/apexcharts (apexcharts-skill and siblings).

See how it works

The Apex family

One family, one API

Data grids, Gantt charts, trees, flow diagrams, and financial charts, all sharing one API and one design language. Adopt it once and you're covered for whatever you need to visualize next.

Customer Company MRR Plan

Marcus VegaAcme Inc$8,420Enterprise

Sara PatelLinear$7,280Pro

Priya NairVercel$5,940Enterprise

Yuki TanakaNotion$4,820Pro

Eli MorganFigma$3,840Team

5 of 5 rows · sorted by name

Data tables

ApexGrid

Fast, feature-rich data grids with sorting, filtering, inline editing and virtual scrolling, built to handle large datasets.

Project planning

ApexGantt

Interactive Gantt charts with drag & drop scheduling, dependencies and milestone tracking, drop straight into your project tooling.

Explore ApexGantt

Hierarchies

ApexTree

Org charts and tree diagrams with collapse/expand, zoom and pan, plus external labels: render deep hierarchies with a tiny config.

Explore ApexTree

Flow diagrams

ApexSankey

Sankey flow diagrams with customizable nodes and edges, gradient links and programmatic path highlighting for tracing any route.

Explore ApexSankey

Financial charts

ApexStock

Financial charts with candlesticks, technical indicators, drawing tools and multiple chart types, purpose-built for market data.

Explore ApexStock

Frameworks

Drop into your stack

First-class wrappers for React, Vue and Angular, or plain JavaScript. Same options, same charts, everywhere.

npm i apexcharts

import ApexCharts from 'apexcharts'

const options = {
  chart: { type: 'line' },
  series: [{ name: 'Sales', data: [30, 40, 35, 50, 49, 60] }],
  xaxis: { categories: [1, 2, 3, 4, 5, 6] },
}

const chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()