• 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, apexstock-skill).

See how it works

Explore the ecosystem

Flow diagrams

ApexSankey

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

Explore ApexSankey

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.

LineAreaColumnBarMixed / ComboCandlestickBoxPlotTimelineRange AreaBubbleScatterHeatmapTreemapPieDonutRadarPolar AreaRadialBarGaugeFunnelSlopeSparklinesGanttSankeyTreeData GridStock
View All Features

Start building today

$npm i apexcharts

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