ApexCharts v6: When a Chart Stops Being a Picture and Starts Being a Surface

You've probably been there: you render 50,000 data points, the browser starts sweating, and your interactive chart becomes a glorified screenshot. Or you spend an afternoon wiring up undo/redo for chart interactions, only to realize you've built a state machine that's more complex than the data it displays. Charting libraries are supposed to solve these problems, not create new ones. That's where ApexCharts v6 comes in—it's a JavaScript charting library that's decided a chart shouldn't just be something you look at, but something you can investigate, edit, and share.

What It Does

ApexCharts is a modern, interactive charting library built for dashboards, SaaS products, and any data-heavy UI. It ships with 18+ chart types out of the box—line, area, bar, pie, donut, radar, heatmap, treemap, candlestick, boxplot, violin, funnel, pyramid, gauge, and even unit charts like dot, pictogram, waffle, and beeswarm.

The tech stack is deliberately lean. It's TypeScript-first with full type definitions included (no @types/* install required), and it has zero runtime dependencies—no React, Vue, or D3 required. You can drop it into vanilla JS or any framework. It's also tree-shakable, meaning you import only the chart types and features you need, which typically results in bundles 30-60% smaller than the full build. For you Next.js or Astro folks, it supports server-side rendering, so you can render real SVG on the server and hydrate on the client.

Why It's Cool

The headline here is v6, which fundamentally rethinks what a chart is. Most features are opt-in and tree-shakeable, so existing configs keep working unchanged. Here's what caught my attention:

• It's a canvas when it needs to be. The new renderer: 'auto' option paints the series layer to canvas once you cross a point threshold, while keeping axes, tooltips, annotations, and exports in SVG. You get hundreds of thousands of points with the same config, and you don't lose interactivity.

• Undo/redo is built in. Enable chart: { history: { enabled: true } } and you get undo/redo for zooms, series toggles, option changes, and annotation edits. Ctrl-Z just works. There's a chart.history API exposing undo, redo, jump, and transactions if you need finer control.

• Your chart's state is portable. chart.perspectives.capture() serializes the exact view—zoom window, hidden series, selections, annotations, theme—into a compact token. You can drop that in a URL and restore the exact state anywhere. That's a killer feature for sharing dashboards or embedding deep-linked views.

• It's a plugin platform now. You can publish reusable chart plugins to npm against a stable, versioned API. Register one with ApexCharts.registerPlugin(def), then activate it per chart with plugins: [{ name }]. Similarly, you can register custom series types with ApexCharts.registerSeriesType(name, { renderItem }), and they inherit tooltips, events, legend, and keyboard navigation for free.

• Design tokens and OS-aware theming. Define --apx-* CSS custom properties once, and every chart reads them. Set theme: { follow: 'os' } and it tracks the system light/dark preference with zero JavaScript. There's also ApexCharts.registerTheme for named brand themes.

• Touch feels native now. Two-finger pinch-zoom, two-finger pan, and kinetic inertia with axis rails are on by default. No more awkward mobile chart interactions.

• Transitions are coherent. When you update data and add or remove points, the animation runs as one coordinated motion rather than a janky jump. New bars grow in; removed ones animate out.

How to Try It

Getting started is straightforward. Install it from npm:

npm install apexcharts

Or grab it from a CDN:

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

The basic usage pattern is: create a config object, instantiate a chart, and render it.

import ApexCharts from 'apexcharts';

const options = {
  chart: {
    type: 'line',
    // Turn on the new stuff
    renderer: 'auto',
    history: { enabled: true }
  },
  series: [{
    name: 'Sales',
    data: [30, 40, 35, 50, 49, 60, 70]
  }],
  xaxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
  }
};

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

The repository has live demos and documentation linked from the README, so you can poke at the 18+ chart types before writing any code. Check it out at github.com/apexcharts/apexcharts.js.

Final Thoughts

ApexCharts v6 is best for developers building data-heavy applications who are tired of fighting their charting library for basic interactivity. The plugin platform, canvas rendering, and undo/redo are features that would take you weeks to build yourself, and they're opt-in so you don't pay for what you don't use. The license is revenue-based, so it's free for most users—worth checking the specifics if you're building a commercial product. If you've been hesitating to add a charting dependency, v6 makes a strong case that a chart can be more than a static picture—it can be a tool your users actually enjoy using.

Follow @githubprojects for more developer tools and open source projects.