ApexCharts.js - JavaScript Charts for your website

15,000+ GitHub stars
6 Million+ npm downloads / month
20+ chart types

Interactive by default

Your users don't just view charts - they explore them. Zoom, pan, hover for details, and toggle series, all built in. No extra wiring.

Zoom & pan
Rich tooltips
Annotations
Export to SVG, PNG & CSV

See it in action

From config to chart in seconds

Integrating visualizations with ApexCharts is as simple as it can get with extensive API docs and 100+ samples ready to be used.

Get Started

let myChart = new ApexCharts(element, {
  chart: {
    type: 'bar',
  },
  series: [{
    data: [18, 28, 47, 57, 77]
  }],
  yaxis: {
    opposite: true,
  }
})
myChart.render();

Build with AI

Skip the docs. Describe the chart.

Tell Claude, Cursor, or ChatGPT what you want. With the ApexCharts skill and MCP installed, your assistant writes correct chart code the first time, for ApexCharts and its sibling libraries.

Skill files

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

npm i apexcharts-skill

MCP server

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

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

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, apexgrid-skill, apexgantt-skill, apextree-skill, apexsankey-skill).

See how it works

Explore the ecosystem

Data tables

ApexGrid

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

Explore ApexGrid

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

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()

Every chart type you'll need

Line, area, candlestick, heatmap, treemap and 15+ more, plus Gantt, Sankey, Tree and Grid. One family handles them all.

Line Area Column Bar Mixed / Combo Candlestick BoxPlot Timeline Range Area Bubble Scatter Heatmap Treemap Pie Donut Radar Polar Area RadialBar Gauge Funnel Slope Sparklines Gantt Sankey Tree Data Grid Stock

View All Features

Start building today

$npm i apexcharts

Explore Demos Read the Docs