ApexCharts.js: Responsive, Interactive SVG Chart Library for Dashboards and Apps

Authorapexcharts

Last UpdateOctober 9, 2026

LicenseMIT

Features

28 chart types across Cartesian, radial, statistical, hierarchical, range, stream, and unit-based charts.
Interactive zoom, pan, selection, brush charts, synchronized chart groups, tooltips, series toggles, and drilldown navigation.
SVG, PNG, and CSV export through the built-in toolbar and export methods.
Category, numeric, XY, datetime, range, financial, and raw-observation data formats.
Solid, gradient, pattern, and image fills, plus palettes, dark mode, monochrome themes, CSS colors, and design tokens.
Point, X-axis, and Y-axis annotations that can be declared in the options or inserted after rendering.
Responsive option overrides, automatic parent and window resize handling, and compact sparkline mode.
Keyboard navigation, screen-reader descriptions, live announcements, reduced-motion support, and color-vision accessibility modes.
TypeScript definitions, modular entry points, official framework wrappers, and server-side SVG rendering.

Chart types

ApexCharts accepts 28 values through chart.type. The unit, waffle, and raincloud types are Premium chart types. raincloud also requires an explicit feature import.

Group	`chart.type` values
Cartesian and range	`line`, `area`, `bar`, `rangeBar`, `rangeArea`, `scatter`, `bubble`, `candlestick`, `streamgraph`, `waterfall`, `dumbbell`
Statistical	`boxPlot`, `violin`, `histogram`, `raincloud`
Radial and part-to-whole	`pie`, `donut`, `radialBar`, `gauge`, `radar`, `polarArea`, `funnel`, `pyramid`
Matrix and hierarchy	`heatmap`, `treemap`, `sunburst`
Unit-based	`unit`, `waffle`

Renderer aliases

Several values use another chart engine internally. funnel, pyramid, and histogram use the bar engine; waterfall and dumbbell use range bar; streamgraph uses range area; raincloud uses violin; gauge uses radial bar; and waffle uses unit.

Installation

Install from npm

npm install apexcharts

Import it into your project.

import ApexCharts from 'apexcharts'

Load from a CDN

You can also import it into your document:

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

Basic usage

Add a container for the chart:

<div id="sales-chart"></div>

Create the options object, pass it to the constructor, and call render():

const options = {
  chart: {
    type: 'line',
    height: 360,
    toolbar: {
      show: true
    },
    zoom: {
      enabled: true
    }
  },
  series: [{
    name: 'Sales',
    data: [30, 40, 35, 50, 49, 60]
  }],
  xaxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  },
  stroke: {
    curve: 'smooth',
    width: 3
  },
  dataLabels: {
    enabled: false
  },
  tooltip: {
    shared: true
  },
  responsive: [{
    breakpoint: 640,
    options: {
      chart: {
        height: 280
      },
      legend: {
        position: 'bottom'
      }
    }
  }]
}
const chart = new ApexCharts(
  document.querySelector('#sales-chart'),
  options
)
chart.render()

Working with data

Category data

A simple numeric array supplies Y values. Set the matching X labels in xaxis.categories:

series: [{
  name: 'Orders',
  data: [44, 55, 41, 67]
}],
xaxis: {
  categories: ['Q1', 'Q2', 'Q3', 'Q4']
}

XY data

Objects with x and y properties keep each label or coordinate beside its value. This format works across axis charts and can carry extra fields for tooltips and data labels.

series: [{
  name: 'Orders',
  data: [
    { x: 'Q1', y: 44 },
    { x: 'Q2', y: 55 },
    { x: 'Q3', y: 41 },
    { x: 'Q4', y: 67 }
  ]
}]

Numeric and datetime series

Set xaxis.type to numeric for numeric X coordinates or datetime for timestamps and date strings. Numeric pairs can be written as objects or two-item arrays. Note that Range bars, range areas, box plots, candlesticks, heatmaps, treemaps, and bubble charts require chart-specific Y values. Check the selected chart type before normalizing a dataset into a single generic shape.

series: [{
  name: 'Temperature',
  data: [
    [Date.UTC(2026, 0, 1), 18],
    [Date.UTC(2026, 0, 2), 21],
    [Date.UTC(2026, 0, 3), 19]
  ]
}],
xaxis: {
  type: 'datetime'
}

All Configuration Options

Option	Description
`annotations`	Defines X-axis, Y-axis, and point annotations, including labels, ranges, markers, and annotation events.
`chart`	Sets the chart type, ID, group, dimensions, toolbar, zoom, selection, animations, events, locale, accessibility, printing, resize behavior, and renderer settings.
`colors`	Sets the main series colors with CSS color strings or per-point color functions.
`dataLabels`	Controls value labels, formatters, offsets, backgrounds, per-series visibility, styling, and label animation.
`fill`	Controls solid, gradient, pattern, and image fills.
`forecastDataPoints`	Styles the final data points as forecast values with count, opacity, stroke width, and dash settings.
`grid`	Controls grid borders, axis lines, row and column backgrounds, position, and padding.
`labels`	Supplies category labels used by non-axis charts and several simplified data forms.
`legend`	Controls legend visibility, position, formatters, markers, item spacing, series toggling, and hover behavior.
`markers`	Controls point size, colors, stroke, shape, discrete markers, click handlers, hover size, and large-dataset behavior.
`noData`	Sets the text, alignment, position, and style shown when no series data is available.
`plugins`	Activates registered Weave plugins and passes plugin-specific options. ApexCharts 7.2 extends the plugin API with raw source data, chart context, derived-series tracking, and container-space reservations. Custom builds must load the Weave feature.
`trellis`	Configures small-multiple panels and faceting. The Trellis feature must be imported explicitly.
`plotOptions`	Contains renderer-specific settings for bar, pie, radial bar, heatmap, treemap, candlestick, box plot, violin, unit, and other chart families.
`responsive`	Applies option overrides at specified viewport breakpoints.
`parsing`	Maps object-field names to X, Y, Z, range, or other data dimensions when source records do not use the default field names.
`drilldown`	Configures hierarchical drilldown levels and async drilldown behavior. Custom builds based on `apexcharts/core` must load the drilldown feature.
`series`	Contains the datasets and series names. The accepted data shape depends on the chart type.
`states`	Controls normal, hover, and active-state filters and styling.
`stroke`	Controls line visibility, curve type, width, dash pattern, line cap, and series-level stroke colors.
`subtitle`	Sets subtitle text, alignment, offsets, floating behavior, and text styling.
`theme`	Sets light or dark mode, palettes, monochrome output, registered themes, OS following, and color-vision modes.
`title`	Sets title text, alignment, offsets, floating behavior, and text styling.
`tooltip`	Controls shared and intersecting tooltips, formatters, custom HTML, fixed placement, themes, and series-specific output.
`xaxis`	Controls category, numeric, and datetime X scales, ranges, ticks, labels, titles, borders, crosshairs, and tooltips.
`yaxis`	Controls one or more Y scales, min/max values, logarithmic scales, ticks, labels, titles, borders, crosshairs, and series mapping.

Heatmap cell shapes

ApexCharts 7.2 adds plotOptions.heatmap.shape. The option accepts rect (default), hexagon, circle, or diamond. Hexagon cells use a honeycomb layout. Non-rect shapes render through SVG and fall back to rectangles on numeric or datetime X axes.

plotOptions: {
  heatmap: {
    shape: 'hexagon'
  }
}

Axes, labels, and formatters

The X-axis accepts category, numeric, and datetime scales. Its options include label rotation, duplicate and overlap handling, grouped labels, tick placement, fixed ranges, min and max values, and date formatting. The Y-axis can be reversed, logarithmic, placed on the opposite side, linked to named series, or supplied as an array for multiple scales.

Formatter functions are available for axis labels, data labels, tooltips, legends, export values, and many chart-specific labels. Keep the formatter return value short enough for the available chart space. Long labels can force a larger plot margin or collide when the chart becomes narrow.

yaxis: {
  labels: {
    formatter(value) {
      return '$' + value.toLocaleString()
    }
  }
},
tooltip: {
  y: {
    formatter(value) {
      return '$' + value.toFixed(2)
    }
  }
}

Tooltips, legends, and annotations

Tooltips are enabled by default. A shared tooltip shows values from several series at the same X coordinate. Formatters can change the X label and each series value, while tooltip.custom can return a complete HTML tooltip.

Legends can sit above, below, or beside the plot. Their click and hover behavior can toggle or emphasize series. A custom legend can call toggleSeries(), showSeries(), hideSeries(), or highlightSeries().

Annotations can mark a single point, an X or Y threshold, or a range between two values. Labels accept text, colors, borders, offsets, and mouse callbacks. Runtime methods add and remove annotations on the existing chart instance.

annotations: {
  yaxis: [{
    y: 80,
    borderColor: '#d33',
    label: {
      text: 'Target'
    }
  }],
  xaxis: [{
    x: 'Apr',
    label: {
      text: 'Campaign launch'
    }
  }]
}

Zoom, selection, events, and synchronized charts

Set chart.id when you need to address a chart through ApexCharts.exec(). Give related charts the same chart.group value to synchronize zoom and selection. Zoom behavior is configured under chart.zoom, while selection uses chart.selection.

chart: {
  id: 'revenue-chart',
  group: 'dashboard',
  events: {
    dataPointSelection(event, chartContext, details) {
      console.log(details.seriesIndex, details.dataPointIndex)
    },
    zoomed(chartContext, { xaxis }) {
      console.log(xaxis.min, xaxis.max)
    }
  }
}

Chart events

Event	Fires when
`animationEnd`	Fires after the initial chart animation finishes.
`beforeMount`	Fires before the chart is mounted to the DOM.
`mounted`	Fires after the chart has mounted.
`updated`	Fires after `updateOptions()` or `updateSeries()` redraws the chart.
`mouseMove`	Fires while the pointer moves over the chart area.
`mouseLeave`	Fires when the pointer leaves the chart area.
`click`	Fires on chart clicks and includes series/data-point context when available.
`legendClick`	Fires when a legend item is clicked.
`markerClick`	Fires when a data-point marker is clicked.
`xAxisLabelClick`	Fires when an X-axis label is clicked.
`selection`	Fires after a selection is completed.
`dataPointSelection`	Fires when a data point is selected.
`dataPointMouseEnter`	Fires when the pointer enters a data point.
`dataPointMouseLeave`	Fires when the pointer leaves a data point.
`beforeZoom`	Fires before the chart applies a zoom range and can return an adjusted range.
`beforeResetZoom`	Fires before reset zoom restores the chart and can return a custom range.
`zoomed`	Fires after the X or Y zoom range changes.
`scrolled`	Fires after a panning or scrolling interaction changes the visible range.
`brushScrolled`	Fires when a brush chart changes its selected range.

Runtime event listeners

You can also subscribe after construction with addEventListener(name, handler) and remove the handler with removeEventListener(name, handler). Optional feature modules register additional events for crossfiltering and editable annotations.

API Methods

Core instance methods

Method	Description
`render()`	Renders the chart and returns a Promise that resolves with the chart instance.
`updateOptions(options, redraw?, animate?, updateSyncedCharts?, overwriteInitialConfig?)`	Merges configuration changes into the chart and re-renders it.
`updateSeries(newSeries, animate?, overwriteInitialSeries?)`	Replaces the current series data.
`appendSeries(newSeries, animate?, overwriteInitialSeries?)`	Appends another series.
`appendData(data, overwriteInitialSeries?)`	Appends data points to existing series.
`toggleSeries(seriesName)`	Toggles a series between visible and hidden.
`showSeries(seriesName)`	Shows a hidden series.
`hideSeries(seriesName)`	Hides a visible series.
`highlightSeries(seriesName)`	Highlights one series and dims the others.
`isSeriesHidden(seriesName)`	Returns whether the specified series is hidden.
`highlightSeriesOnLegendHover(event, targetElement)`	Applies the legend-hover highlight behavior to a series.
`resetSeries(shouldUpdateChart?, shouldResetZoom?)`	Restores the initial series and optionally the initial zoom.
`zoomX(min, max)`	Sets the visible X-axis range.
`toggleDataPointSelection(seriesIndex, dataPointIndex?)`	Selects or deselects a data point and returns the selected-point state.
`setLocale(localeName)`	Switches to a locale defined in `chart.locales`.
`addEventListener(name, handler)`	Subscribes to a chart event after construction.
`removeEventListener(name, handler)`	Removes a handler registered with `addEventListener()`.
`addXaxisAnnotation(options, pushToMemory?)`	Inserts an X-axis annotation after render.
`addYaxisAnnotation(options, pushToMemory?)`	Inserts a Y-axis annotation after render.
`addPointAnnotation(options, pushToMemory?)`	Inserts a point annotation after render.
`removeAnnotation(id)`	Removes the annotation with the specified ID.
`clearAnnotations()`	Removes all dynamically added annotations.
`dataURI(options?)`	Returns PNG image data as a data URI or Blob. The exports feature must be present in a custom build.
`getSvgString(scale?)`	Returns the chart SVG markup as a string. The exports feature must be present in a custom build.
`exportToCSV(options?)`	Downloads the chart data as CSV. The exports feature must be present in a custom build.
`paper()`	Returns the SVG.js root element for the chart.
`getActiveRenderer()`	Returns the active renderer, such as `svg` or `canvas`.
`getChartArea()`	Returns the inner SVG group that contains the chart graphics.
`getSeriesTotalXRange(minX, maxX)`	Returns series totals for values inside an X-axis range.
`getHighestValueInSeries(seriesIndex?)`	Returns the highest Y value in a series.
`getLowestValueInSeries(seriesIndex?)`	Returns the lowest Y value in a series.
`getSeriesTotal()`	Returns the total for each series.
`getSyncedCharts()`	Returns charts in the same group, including the current instance.
`getGroupedCharts()`	Returns charts in the same group, excluding the current instance.
`getState()`	Returns a stable snapshot of chart state for external integrations.
`destroy()`	Removes the chart, generated DOM, and event handlers.

Feature-dependent instance methods

Method	Description
`rowSeries({ maxRows? })`	Returns source observations as unit-chart series for chart types that can identify their raw rows. Requires the stats feature where applicable.
`clearCrossfilter()`	Clears Linked Views filtering across the chart group. Requires the link feature.
`startMeasure()`	Enters Measure mode. Requires the measure feature and `chart.measure.enabled`.
`stopMeasure()`	Leaves Measure mode.
`clearMeasures()`	Removes pinned measurement rulers.
`refreshTokens()`	Re-reads `--apx-*` design tokens and re-renders.
`drillDown(id)`	Opens a drilldown level. Requires the drilldown feature.
`drillUp()`	Returns one drilldown level.
`drillToRoot()`	Returns to the root drilldown level.
`clearDrilldownCache(id?)`	Clears one or all cached async drilldown levels.
`getPanels()`	Returns the panel records for a Trellis host.
`getPanel(key)`	Returns a panel’s ApexCharts instance.
`promotePanel(key)`	Expands a Trellis panel across the grid.
`restorePanels()`	Restores a promoted Trellis panel to the grid.

Static and extension methods

Method	Description
`ApexCharts.exec(chartID, methodName, ...args)`	Calls a public method on a rendered chart by `chart.id`.
`ApexCharts.getChartByID(chartID)`	Returns the rendered chart instance with the specified ID.
`ApexCharts.trellis(element, options)`	Creates and renders a Trellis host when the Trellis feature is loaded.
`ApexCharts.initOnLoad()`	Renders charts declared with ApexCharts data attributes after page load.
`ApexCharts.merge(target, source)`	Deep-merges source configuration into a target object.
`ApexCharts.use(typeMap)`	Registers chart-type constructors for custom tree-shaken builds.
`ApexCharts.registerFeatures(featureMap)`	Registers feature modules for custom builds.
`ApexCharts.setLicense(key)`	Sets the ApexCharts license key before rendering gated Premium features.
`ApexCharts.registerPlugin(def)`	Registers a Weave plugin definition.
`ApexCharts.unregisterPlugin(name)`	Removes a registered Weave plugin definition.
`ApexCharts.registerRenderer(kind, factory)`	Registers a non-SVG renderer backend.
`ApexCharts.unregisterRenderer(kind)`	Removes a registered renderer backend.
`ApexCharts.registerSeriesType(name, def)`	Registers a custom series type.
`ApexCharts.unregisterSeriesType(name)`	Removes a custom series type.
`ApexCharts.registerTheme(name, def)`	Registers a theme that can be referenced by `theme.name`.
`ApexCharts.unregisterTheme(name)`	Removes a registered theme.
`ApexCharts.registerEasing(name, fn)`	Registers a custom animation easing function.
`ApexCharts.registerUnitLayout(name, fn)`	Registers a custom unit-chart layout.
`ApexCharts.unregisterUnitLayout(name)`	Removes a registered unit-chart layout.
`ApexCharts.registerUnitMark(name, def)`	Registers a custom unit-chart mark or pictogram.
`ApexCharts.unregisterUnitMark(name)`	Removes a registered unit-chart mark.
`ApexCharts.registerRowSource(name, fn)`	Registers a source that maps rendered marks back to raw rows.
`ApexCharts.unregisterRowSource(name)`	Removes a registered row source.
`ApexCharts.crossfilter(options)`	Creates or returns a Linked Views crossfilter coordinator. Requires the link feature.
`ApexCharts.getCrossfilter(id)`	Returns an existing crossfilter coordinator.
`ApexCharts.renderToString(options, ssrOptions?)`	Renders SVG on the server from the `apexcharts/ssr` entry.
`ApexCharts.renderToHTML(options, ssrOptions?)`	Renders hydration-ready chart HTML on the server.
`ApexCharts.hydrate(element, options?)`	Hydrates one server-rendered chart from the client or SSR entry.
`ApexCharts.hydrateAll(selector?, options?)`	Hydrates matching server-rendered charts.
`ApexCharts.isHydrated(element)`	Returns whether a server-rendered chart container has been hydrated.

Colors, fills, and themes

Use colors for the main series palette and fill.type for solid, gradient, pattern, or image fills. theme.mode switches the built-in light and dark styles.

The full bundle includes registered themes and --apx-* design tokens. A custom build based on apexcharts/core must load the Facet feature before using ApexCharts.registerTheme().

import 'apexcharts/features/facet'
ApexCharts.registerTheme('brand', {
  palette: ['#4f46e5', '#0ea5e9']
})
const options = {
  theme: {
    name: 'brand',
    follow: 'os'
  }
}

CSS design tokens

CSS design tokens can override shared chart colors from the surrounding page:

:root {
  --apx-accent: #4f46e5;
  --apx-grid: #e5e7eb;
  --apx-surface: #ffffff;
}

Responsive behavior

Each item in the responsive array has a maximum-width breakpoint and an options object. Any normal chart option can be overridden there. Useful mobile changes include a shorter chart height, a bottom legend, fewer axis labels, smaller markers, and hidden data labels.

redrawOnParentResize and redrawOnWindowResize are enabled by default. If a chart sits inside a panel that starts hidden, render or update it after the panel has measurable dimensions. Set parentHeightOffset: 0 to remove the default extra space from a fixed-height container.

Large datasets and rendering performance

SVG remains the default renderer. ApexCharts 7 requires an explicit import for the canvas renderer. Set chart.renderer to auto or canvas after loading the feature.

import ApexCharts from 'apexcharts'
import 'apexcharts/features/renderer-canvas'
const options = {
  chart: {
    renderer: 'auto',
    rendererThreshold: 8000
  }
}

Data reduction

Use chart.dataReducer when dense line data should be reduced before drawing. This example uses the built-in LTTB reducer:

chart: {
  dataReducer: {
    enabled: true,
    algorithm: 'lttb',
    targetPoints: 500,
    threshold: 2000
  }
}

Runtime updates

For frequently changing data, update the existing instance with updateSeries(), appendData(), or updateOptions(). Sparkline mode removes axes, grid lines, and labels when a compact chart does not need them.

Tree-shakable imports

Feature	Bundler import	Browser file
Trellis	`apexcharts/features/trellis`	`dist/features/trellis.js`
Storyboard	`apexcharts/features/storyboard`	`dist/features/storyboard.js`
Perspectives	`apexcharts/features/perspectives`	`dist/features/perspectives.js`
Ink / annotation authoring	`apexcharts/features/ink`	`dist/features/ink.js`
Canvas renderer	`apexcharts/features/renderer-canvas`	`dist/features/renderer-canvas.js`
Linked Views	`apexcharts/features/link`	`dist/features/link.js`
Measure ruler	`apexcharts/features/measure`	`dist/features/measure.js`
History / Rewind	`apexcharts/features/history`	`dist/features/history.js`
Context menu	`apexcharts/features/context-menu`	`dist/features/context-menu.js`

Raincloud import

The Premium raincloud chart is also an explicit import:

import ApexCharts from 'apexcharts'
import 'apexcharts/features/raincloud'

Custom core build

For a custom build, start with apexcharts/core, register the chart renderer, and import only the features required by the application:

import ApexCharts from 'apexcharts/core'
import 'apexcharts/line'
import 'apexcharts/features/legend'
import 'apexcharts/features/toolbar'
import 'apexcharts/features/exports'
import 'apexcharts/features/keyboard'
const chart = new ApexCharts(
  document.querySelector('#chart'),
  options
)
chart.render()

Lean script-tag builds

ApexCharts 7 also ships dist/apexcharts.core.js for lean script-tag builds. When a page loads feature files through a CDN, pin the core and every feature script to the same exact package version to avoid a temporary version mismatch during a release.

Framework wrappers and server-side rendering

Official wrappers manage chart creation, updates, and cleanup for React, Vue 3, and Angular. For ApexCharts 7, Angular projects upgrading an older wrapper should use ng-apexcharts 3.1.0 or later because the 3.0.0 peer range does not include ApexCharts 7.

# React
npm install react-apexcharts apexcharts
# Vue 3
npm install vue3-apexcharts apexcharts
# Angular
npm install ng-apexcharts apexcharts

Plain JavaScript and the framework wrappers use the same options structure. The wrapper component receives chart options and series through framework props or inputs.

Server-side rendering

Node-based frameworks can render chart SVG on the server with the apexcharts/ssr entry:

import ApexCharts from 'apexcharts/ssr'
const chartHTML = await ApexCharts.renderToHTML({
  chart: { type: 'bar' },
  series: [{ data: [30, 40, 35, 50] }],
  xaxis: { categories: ['Q1', 'Q2', 'Q3', 'Q4'] }
}, {
  width: 500,
  height: 300
})

Client hydration

On the client, import apexcharts/client and call ApexCharts.hydrate() for the matching container. The client entry also exposes hydrateAll() and isHydrated().

Accessibility and reduced motion

Accessibility is enabled by default. Add chart.accessibility.description to summarize the chart for screen-reader users. Keyboard navigation lets users move through data points with the arrow keys and activate a point with Enter or Space. Live announcements describe focus and selection changes.

chart: {
  accessibility: {
    enabled: true,
    description: 'Monthly revenue for 2026',
    announcements: {
      enabled: true
    },
    keyboard: {
      enabled: true,
      navigation: {
        enabled: true,
        wrapAround: false
      }
    }
  },
  animations: {
    respectReducedMotion: true
  }
}

Alternatives & Related Resources:

FAQs:

Q: Why does a shared tooltip omit values from some datetime series?
A: Shared tooltips work best when every series has the same X values. If timestamps differ, set tooltip.shared to false or normalize the series onto matching timestamps before rendering.

Q: How can I stop ApexCharts from injecting a stylesheet?
A: Set chart.injectStyleSheet to false and load apexcharts/dist/apexcharts.css through the application build. Sites with a Content Security Policy can pass a nonce through chart.nonce.

Q: Why does dataPointSelection not fire on a line or area chart?
A: Line and area points need visible markers, an intersecting tooltip, and a non-shared tooltip for point selection. Set markers.size above zero, tooltip.intersect to true, and tooltip.shared to false.

Q: How should a single-page application remove an ApexCharts instance?
A: Call chart.destroy() when the component or view unmounts. The method removes generated chart DOM and event handlers attached to that instance.

Q: Is ApexCharts free to use?
A: ApexCharts uses Community, Commercial, and OEM licensing. The Community License is free for individuals, non-profits, educators, and organizations under $2 million USD in annual revenue. Organizations at or above that threshold require a Commercial License, while redistributed products can require an OEM License.

Changelog:

v7.8.1 (10/09/2026)

Update & bugfix

v7.8.0 (10/02/2026)

Drop the chip behind data labels
Keep labels from landing on each other

v7.6.1 (09/28/2026)

Bugfixes

v7.6.0 (09/25/2026)

Add the icicle chart type, opt-in
Zoom along the value axis
Bugfixes

v7.5.1 (09/21/2026)

Bugfixes

v7.5.0 (09/20/2026)

Added Weave v6: api.capabilities and api.can()
Added api.claim(): set an option for your own series, without writing the caller’s config
Added api.drawn() and api.declare(): what is on the chart
Added api.info.title, and the modifier keys on a pointer event

v7.4.0 (09/16/2026)

Added Weave v5: api.info.stroke
Added A way back out of a zoom when the toolbar is hidden
Fixed bugs

v7.3.0 (09/12/2026)

Added Weave v4: api.pointer()

v7.2.0 (09/11/2026)

Added plotOptions.heatmap.shape with rectangle, hexagon, circle, and diamond cells.
Updated the Weave plugin API with raw source data, chart context, derived-series tracking, and container-space reservations.
Added the Azerbaijani locale.
Hidden axis-chart series now stay hidden across updateSeries() and appendSeries() calls.
Fixed stacked combo charts, brush selection bounds, annotation clamping, grouped tooltips, treemap tooltip placement, and plugin scale alignment.

v7.1.0 (08/31/2026)

Added streamgraph, waterfall, dumbbell, and raincloud chart types.
Added chart.print.
Adjusted bar sizing for numeric and datetime axes when series use different X values.

v7.0.0 (08/25/2026)

Moved nine optional features out of the default bundle and into explicit imports.
Added the lean apexcharts.core.js browser build and Trellis small multiples.
Removed plotOptions.bar.borderRadiusWhenStacked.
Changed dataLabels.animate.enabled to true by default.

v6.10.0 (08/18/2026)

Added apexcharts/unit-shapes, 39 shapes a count can take
Bugfixes

v6.9.0 (08/17/2026)

Added chart.type: ‘histogram’
Added rowSeries()
Added Nested treemaps
Added Drilldown: line and area, and async levels
Added A layout for the unit chart can now come from outside
Added Unit marks travel on a spring
Added A pie slice that moves instead of changing colour
Bugfixes

v6.8.0 (08/10/2026)

Added Per-data-point dataLabels offsets.
Bugfixes.

v6.7.1 (08/09/2026)

plotOptions.unit.scatter.orientation accepts ‘horizontal’ (the default) or ‘vertical’.
Bugfixes.

v6.7.0 (08/02/2026)

Added the sunburst chart type
Added rounded corners and spacing for pie and donut
Added a parliament layout for the unit chart
Added optional tooltips on point annotations
Bugfixes

v6.6.0 (07/27/2026)

Added the waffle chart type
Bugfixes

v6.5.0 (07/22/2026)

Improvements

v6.4.0 (07/21/2026)

Continuous numeric and datetime x-axis for heatmaps
Canvas cell rendering for large heatmaps
Bar chart race
The heatmap tooltip is anchored above the cell

v6.3.0 (07/20/2026)

A performance release focused on updates.

v6.1.0 (07/19/2026)

Added Measure ruler in the toolbar

v6.0.0 (07/17/2026)

Added a public plugin platform and custom series-type API.
Added an optional hybrid SVG and canvas renderer for dense datasets.
Added undo and redo history, shareable view-state tokens, linked crossfilter dashboards, and editable annotations.
Added measurement tools, point context menus, scrollytelling, real-time streaming, design tokens, and pluggable easing.
Enabled coherent variable-length data transitions and mobile pinch and pan gestures by default.

v5.16.0 (07/05/2026)

Added Drilldown navigation
Added Pie / donut external (outer) data labels with leader lines (opt-in)
Added Scatter jitter: strip plots and overplotting (opt-in)
Added Data reducer for range charts

v5.15.1/2 (06/20/2026)

Bugfixes

v5.15.0 (06/11/2026)

Added new Violin chart type

v5.14.0 (06/05/2026)

An opt-in continuous gradient legend for heatmaps that replaces the categorical legend with a color strip and a hover-tracking arrow.
chart.type: ‘pyramid’ now matches the geometry users expect: a single continuous triangle whose stages each own a vertical share proportional to their value, with no gaps between segments.
Added optional, tree-shakable transitions between chart types that remove destroy-and-recreate flicker.
Bugfixes.

v5.13.0 (05/22/2026)

feat(tooltip): modernized positioning, arrows, and a11y
feat(gauge): needle options and animation
feat(yaxis): alignZero
feat(toolbar): modernized

v5.12.0 (05/16/2026)

First-class funnel / pyramid / gauge types
Accessibility – WCAG 1.4.11 contrast compliance
Improvements

v5.11.0 (05/07/2026)

Bugfixes
WCAG 2.2 AA Accessibility Remediation
Improved Tooltip Hit Detection for Line / Area Charts

v5.10.6 (04/12/2026)

Bugfixes

v5.10.5 (04/07/2026)

Rename “name” field in renamed locale
Bugfixes

v5.10.4 (03/14/2026)

CSS variable colors – Pass ‘var(–my-color)’ directly as a chart color. Swap your entire palette at runtime with a single CSS attribute change.
New locales – Bulgarian (bg) and Romanian (ro) added. Serbian, Swedish, and Ukrainian locale files were also renamed to their correct ISO codes (sr, sv, uk).
Faster updates – updateOptions() and updateSeries() no longer rebuild internal modules from scratch on every call, reducing re-render overhead on dashboards with frequent data refreshes. Large datasets also benefit from automatic LTTB downsampling.

v5.10.3 (03/08/2026)

Bugfixes

v5.10.1 (03/04/2026)

Bugfixes

v5.10.0 (03/04/2026)

Every public chart type now has its own dedicated entry point matching the chart.type string you already use in config.
Better Error Message for Unregistered Chart Types

v5.9.0 (03/04/2026)

Color-Blind Accessibility Mode (theme.accessibility.colorBlindMode)

v5.8.0 (03/03/2026)

Bugfixes

v5.7.0 (03/02/2026)

Feature-level tree-shaking
Keyboard navigation
Server-side rendering (SSR)

v5.6.0 (02/18/2026)

Bugfixes

v5.5.0 (02/16/2026)

Server-Side Rendering (SSR) Support
Accessibility Support

v5.4.0 (02/14/2026)

Performance Improvements
Bugfixes

v5.3.6 (11/03/2025)

Add Galician (gl) locale
Fix bugs

v5.3.3 (08/11/2025)

Bugfixes

v5.3.0 (05/22/2025)

ApexCharts now supports direct parsing and mapping of raw data objects, eliminating the need for manual data transformation.
Pie/Donut/RadialBar series formats. These chart types now support XY series formats making it consistent with the rest of the chart types.

v4.7.0 (04/27/2025)

Cleaned up misplaced resolve() call in updateOptions()
Fixed bugs

v4.5.0 (02/19/2025)

Bugfixes

v4.4.0 (01/22/2025)

Added support for the Angular compiler.
Bugfixes
Make default stroke.lineCap as square in bar charts

v4.3.0 (12/19/2024)

Bugfixes

v4.2.0 (12/10/2024)

Addition of multi-series color candle Chart
Bugfixes

v4.1.0 (11/25/2024)

Allow pan and zoom on mobile devices
Bugfixes

v4.0.0 (10/29/2024)

Upgrade to Svgjs 3.2.
Apply config opacity to fill colors specified in RGB format
Fix createBorderRadiusArr
Update types to add missing arguments and return types

v3.54.1 (10/14/2024)

Bugfixes
improve border radius implementation in stacked bar charts
Bar and column true stroke and fill paths

v3.54.0 (09/29/2024)

Bugfixes

v3.53.0 (08/30/2024)

New Property ‘series.hidden’ to hide certain series on initial render A short guide on how to use it
New method ‘highlightSeries’: In a multi-series chart, call this method to reduce opacity of all other series and only highlight a particular one.
Enhancements: Mousewheel support for zooming; references
Bugfixes

v3.52.0 (08/05/2024)

bugfixes
Add null checks on gridRect to avoid safari error

v3.51.0 (07/21/2024)

replace margin with offsetX/Y in radialbar datalabels
Compute a yLowestValue and yHighestValue for each configured y-axis
Use offsetWidth to calculate legend dimensions.
bugfixes

v3.50.0 (07/06/2024)

fixed transparent background not appearing with dark mode
CSV Export categoryFormatter and valueFormatter (breaking change as CSV export dateFormatter is replaced by categoryFormatter)
Fixed test coverage report failing to generate on Windows
Replace deprecated rollup-plugin-terser with @rollup/plugin-terser
Updated actions/stale action

v3.49.2 (06/25/2024)

Remove declared but unused variables
Restore Y axis highlighting during legend series mouseover
Bugfixes

v3.49.1 (06/24/2024)

New chart type – Slope Chart
Bugfixes

v3.48.0 (03/20/2024)

Provide a “step before” version of the current “step after” line chart
Use ShadowRoot getElementById() when in ShadowDOM
Bug fixes

v3.47.0 (03/09/2024)

Bugfixes

v3.46.0 (02/17/2024)

Improve the y-axis scale tick generation
Added “+” and “x” markers
Add Belarusan cyrilic and latin locale
Bugfixes

v3.45.2 (01/21/2024)

Update pt.json
Add border-radius to treemap
Bug fixes

v3.45.1 (01/21/2024)

Bug fixes

v3.45.0 (12/15/2023)

New feature – yaxis.stepSize, which helps to define the intervals or increments between values on the axes values.
Bug fixes

v3.44.2 (12/05/2023)

Fix stacked line charts regression bug

v3.44.1 (12/05/2023)

feat: Allow stack bar only
bug fix: allow brush with rangeBars
added a demo for rangebar brush
Add malay locale
allow nonce values for style elements
Handle CSV export of the datetime multi-series with variable X-axes
Fix heatmap value attribute that caused issue in reversed y-axis heatmaps
Fix Incorrect GridLine
Fallback to straight line if the curve goes backwards in smooth line chart

v3.44.0 (10/17/2023)

improve sparkline paddings on top and bottom
improve line smoothing to avoid backward curve
bug Fixes

v3.43.0 (09/30/2023)

fix: hover and click on legend series
Bugfix: Double rendering of labels
Added type to colorStops in ApexFill
fix: detect positioning for leftmost values
Revert “fix: detect positioning for leftmost values”
Expose ‘isSeriesHidden’ to public methods
fix: detect positioning for leftmost values

v3.41.1 (07/31/2023)

remove style injection as attribute in bar charts (csp style-src fix)
Feat: trimmed treemap labels
Added type of string array to brush targets
Bugfixes

v3.41.0 (06/12/2023)

New chart type – FUNNEL CHARTS

v3.40.0 (05/01/2023)

Changed border-radius implementation

v3.37.0 (02/05/2023)

Changed border-radius implementation
improve annotations; allow annotation to be drawn by px
Bug Fixes

v3.36.0 (10/23/2022)

New chart-type: RANGE AREA CHART
Allow fill config to be passed with individual data-point in a XY series
Total data label in a stacked bar/column chart
Bug Fixes

v3.35.0 (04/01/2022)

Fixed a regression bug that caused x-axis labels to disappear when the type was DateTime.

v3.33.0 (01/11/2022)

Prevent tooltip overflow outside the chart area
Fix empty tooltip
Disable tooltip if all datasets are hidden
Bar and Heatmap tooltip improvements
Bug Fixes

v3.32.0 (01/11/2022)

Bug Fixes

v3.31.0 (11/28/2021)

NEW CHART TYPE – Horizontal Box Plots
Bug Fixes

v3.30.0 (11/14/2021)

Replace old DetectElementResize script with ResizeObserver
Inject ApexCharts CSS to the shadow root when used in a Shadow DOM context
Debounce tooltip mouse events to reduce overhead
Bug Fixes

v3.28.2 (09/16/2021)

Allow HTML in legend while also sanitizing inputs for XSS vulnerability
Added support for series-specific border-radius on a bar chart
Improve goals marker drawing options in bars/columns
Bug Fixes

v3.27.0 (06/06/2021)

New feature – bar/column with markers.
Add title element for Y-axis labels.
Sanitize input to prevent cross-site scripting.

v3.26.3 (05/18/2021)

New prop – xaxis.overwriteCategories which allows t overwrite all generated x-axis labels and replace with custom labels
Add scaling options while exporting to SVG/PNG

v3.26.2 (05/10/2021)

New prop – xaxis.decimalsInFloat
Bug Fixes

v3.26.1 (04/18/2021)

Add start and end dates in rangeBar tooltip options in a custom tooltip
Heatmap reverseNegativeShade issue
Add hungarian locale
New feature in TimeScale: added seconds scale
Bug Fixes

v3.26.0 (03/15/2021)

Add square for marker shape
Allow shared tooltip in a horizontal bar chart
New property – borderRadius in bar charts
Bug Fixes

v3.23.1 (12/28/2020)

Panning fixed in timeline charts
Mixed chart x-axis issue
A small correction in y-axis min-max
Preserve selection on resize in pie, donut
Floating y-axis in bar and timelines
TooltipHoverFormatter in pie charts

v3.23.0 (12/15/2020)

Zoom and Pan enabled in timeline charts
Bug Fixes

v3.22.3 (12/07/2020)

Customizable export filenames
Show x-axis gridlines even when x-axis labels are hidden
Fix undefined tooltip issue in a timeline chart
Remove resize handler properly on destroy
CSV bug export when category contains a comma
Fix multiline text in x-axis when using XY format in series
Add passive: true to event listeners
Fix auto height increase when the height is 100%
Fix log scale in radar chart
Remove code to hide data label when it is cropped
Add tooltip title formatter for horizontal chart
Bugfix when no data in treemap
Bug fix in min/max functions in y-axis
Fix Y-axis tickamount when formatter is applied

v3.22.1 (11/01/2020)

Add min/maxSecond to DateTime.getTimeUnitsfromTimestamp()
New property redrawOnWindowResize which allows you to control whether the chart should update when the window size changes. This is different from redrawOnParentResize which just checks for parent container resize events.
Re-add ESM build as requested by many users.
Bug Fixes

v3.22.0 (10/04/2020)

Add a flag to group rows together (rangeBarGroupRows) in a multi-series timeline chart
New event – beforeResetZoom
dateformatter option added in xaxis.labels.formatter to allow the user to format dates when using xaxis.labels.formatter
Bug Fixes

v3.21.0 (09/20/2020)

New chart type TREEMAP added
New event when scrolling on brush chart. chart.events.brushScrolled
Bug Fixes

v3.20.2 (09/11/2020)

Bugfixes

v3.20.1 (09/08/2020)

Bugfixes

v3.20.0 (01/31/2020)

Preserve order of series and data-labels
Allow user to select a color series wise for axis charts
Preserve y-axis min/max on update
Remove unnecessary condition in tooltip check
Bug Fixes

v3.19.3 (06/27/2020)

Configurable CSV options
In area charts, allow fill to extend to bottom for negative values
In the tooltip, remove default colon to allow customization
Draw lines as shape annotations
Radar chart size based on x-axis labels width
Bugs fixed

v3.19.2 (05/19/2020)

Fix for radial-bar’s custom angle which got affected due to pie.startAngle

v3.19.0 (04/24/2020)

New property – borderRadius in annotation label
Bugs fixed

v3.18.0 (04/05/2020)

A new method for zooming on x-axis – zoomX
New chart type – Polar Area Charts
New property in timeline charts – plotOptions.bar.rangeBarOverlap
Border Width in radar spokes
Bugs fixed

v3.17.1 (03/29/2020)

Sort the datetime/numeric x-axis before drawing
Annotation fill – allow 8 digit hex;
Allow rgba in fill.colors as well as allow 8 digit hex with alpha
Bugs fixed

v3.17.0 (03/19/2020)

Bar chart new property – startingShape
New property – yaxis.showForNullSeries
New property – plotOptions.heatmap.useFillColorAsStroke
Bugfixed

v3.16.1 (03/06/2020)

Removed public methods – addText(), addImage() and addRect(). These things are moved to annotations config
New Annotation types added annotations.texts, annotations.images and annotations.shapes.
mproved top positioned x-axis placement
Font-weight for xaxis labels
Radar chart toggle series improvement
New property – dataLabels.distributed: true | false
Bugfix

v3.16.0 (02/27/2020)

Enhancements and Bugfixes

v3.15.6 (02/14/2020)

Added font-weight properties to labels and titles
Multiseries CSV export improvement
autoScaleYaxis in a brush chart disabled for multi-series
Reset zoom on reset series

v3.15.4 (02/04/2020)

New method – addImage() to allow inserting an image after the chart is rendered.
In point annotations, replace customSVG with an image for easier image annotations.
Bugfixes.

v3.15.3 (01/25/2020)

Enhancements and bugfixes

v3.15.0 (01/14/2020)

Category zoom fixes
Fixed updateOptions() function on 100% stacked fixed
Legend margin fix
Multiline axis label offset in bar charts

v3.14.0 (01/12/2020)

A major bug fix that fixed the overwriting option in multiple charts on the same page.

v3.13.1 (01/10/2020)

Fixed pie/donut labels

v3.12.0 (01/02/2020)

Unused SVG.js code removed to bring down bundle size. Minified 449kB reduced to 425kB.
Removed IE11 polyfills and added lists of polyfills to add for IE11 support.
In radar chart, renamed the outer data labels as xaxis labels.
Data labels improved styling. Now, the data-labels can be given a background color to pop out clearly.

v3.11.3 (12/31/2019)

Add Export to CSV option
Add a new property borderWidth for Annotations stroke width
Bugs fixed

v3.11.0 (12/15/2019)

Enabling multiple time ranges on timeline bar charts

v3.10.0 (10/14/2019)

Fixed a major bug which caused the data to display reversed.

v3.9.0 (10/13/2019)

Allow different data-labels colors when bar.distributed is true
Custom data-labels formatter in bubble charts
Donut Chart – New property plotOptions.pie.donut.labels.total.showAlways which allows determining whether the total label should be shown always and not change if a user hovers over the donut slices.
Allow markers to have different stroke-width for each series
Extract JS-generated styles to external CSS (fix CSP issues)
Horizontal Bar chart’s y-axis now has additional parameters to show more information in y-axis labels.
Add Ukrainian locale
Add Italian locale
Bugs fixed

v3.8.5 (08/27/2019)

Improve toggleDataPointSelection method for pie/donut charts
Bugs fixed

v3.8.4 (08/05/2019)

Build modified to minify AMD, es, commonjs files
Visually separate the datetime labels to identify years from months and months from days
Add chart context in toolbar icon function params
Bug fixes
Added Turkish language file

v3.8.3 (07/24/2019)

Bug fixes

v3.8.2 (07/08/2019)

Add marker events click and dblclick
Add toggleDataPointSelection method to exec
Enable discrete markers for radar charts
Bug fixes

v3.8.1 (07/08/2019)

Add a new param updateSyncCharts in updateOptions method to control whether the update method should also update the sibling charts which are in the group.
Add a decimal point to small values to prevent duplicate yaxis labels
Bug fixes

v3.8.0 (06/09/2019)

A new method called resetSeries()added which resets the chart to its original data.
Recalculate height for pie, donut and radial-bar charts to prevent extra spacing
Bug fixes
The pie/donut/radialBar charts will have their heights recalculated to prevent additional spacings at the bottom. This might need adjustments in your existing pie charts if you have not specified a fixed height.

v3.7.1 (06/09/2019)

New method – toggleDataPointSelection to select/deselect a particular data point.
Allow custom data-label text for null values.
Allow timestamps in labels and categories when using datetime xaxis
Bug fixes
Add Korean locales

v3.7.0 (05/28/2019)

New property – chart.zoom.autoScaleYaxis when zoomed which changes the y-axis based on the zoom selection
Range annotations in category charts
Bug fixes

v3.6.12 (05/20/2019)

Heatmap new property – reverseNegativeShade
Allow hiding tooltip for specific series. New property tooltip.enabledOnSeries added
Bug fixes