• 15k+ GitHub stars
  • 6M+ npm downloads / month
  • 20+ chart types

Live ApexCharts · auto-playing tour

Interactivity

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.

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

See it in action

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.

Read more

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.

Read more

Correlate

Linked Views

One record set feeding a donut, a bar, and a heatmap. Filter any view by clicking or brushing and the others re-aggregate over the shared data. Crossfilter, native.

Read more

See everything new in 6.0

Developer experience

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 and siblings).

See how it works

The Apex family

Explore the ecosystem

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

Chart types

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.

Chart types in ApexCharts

LineAreaColumnBarMixed / ComboCandlestickBoxPlotTimelineRange AreaBubbleScatterHeatmapTreemapPieDonutRadarPolar AreaRadialBarGaugeFunnelSlopeSparklines

More visualizations, dedicated libraries

ApexGanttGantt chartsApexSankeyFlow diagramsApexTreeOrg charts & treesApexGridData gridsApexStockFinancial charts
View All Features

Start building today

npm i apexcharts

Explore DemosRead the Docs
ApexCharts.js - JavaScript Charts for your website