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

ApexCharts.js is a JavaScript SVG chart library for responsive, interactive charts in dashboards and web apps. It includes 29 chart types, with configuration for chart colors, axes, labels, and interactions.

You can use ApexCharts with vanilla JavaScript or its React, Vue 3, and Angular wrappers. Charts use SVG by default, with an optional canvas renderer for dense datasets.

Features

• Interactive zoom, pan, brush selection, and synchronized chart groups.
• Export charts to SVG, PNG, or CSV.
• Category, numeric, datetime, and XY datasets.
• Gradient, pattern, and image fills with custom chart colors.
• Point and axis annotations.
• Responsive layouts, sparklines, and resize handling.
• Keyboard controls, screen-reader descriptions, and reduced-motion settings.
• TypeScript definitions, modular imports, and server-side SVG rendering.

Chart types

ApexCharts accepts 29 chart types through chart.type. The unit, waffle, and raincloud types require a Premium license to remove the trial watermark. Some chart types need separate imports in version 8, including sunburst, violin, icicle, unit, and raincloud.

Renderer aliases

funnel, pyramid, and histogram use the bar renderer. waterfall and dumbbell use range bar, and streamgraph uses range area. raincloud uses violin, gauge uses radial bar, and waffle uses unit.

Installation

Install from npm

Install the package and import ApexCharts into your JavaScript module.

npm install apexcharts

import ApexCharts from 'apexcharts'

Load from a CDN

For a plain HTML page, load the version 8 browser bundle before initializing a chart:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/apexcharts.min.js"></script>

Basic usage

Create a chart container in your HTML.

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

Create a line chart and render it with a series and X-axis labels.

const chart = new ApexCharts(document.querySelector('#sales-chart'), {
  chart: { type: 'line', height: 320 },
  series: [{ name: 'Sales', data: [30, 40, 35, 50] }],
  xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr'] }
})
chart.render()

Constructor parameters

Create a chart with new ApexCharts(element, options). Call render() to mount it.

ApexCharts 8 imports and migration

Seven chart renderers and features that worked with the default bundle in version 7 require explicit imports in version 8. Regular line, bar, pie, and area charts continue to work with import ApexCharts from 'apexcharts'.

Import only the features you use

Import the renderer or feature module required by your chart configuration. A sunburst chart with drilldown navigation needs both registrations.

import ApexCharts from 'apexcharts'
import 'apexcharts/sunburst'
import 'apexcharts/features/drilldown'

For script-tag projects, use the matching browser files from the same package version. The default bundle and the extra modules register on the shared ApexCharts class.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/apexcharts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sunburst.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/features/drilldown.js"></script>

Load every chart type and feature

If you need every chart type and feature, the version 8 full bundle has them pre-registered. Premium capabilities still require an appropriate license for watermark-free use. Choose one full-bundle loading method:

import ApexCharts from 'apexcharts/full'

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/apexcharts.full.min.js"></script>

Upgrading an existing version 7 chart

Raincloud already required an explicit import in version 7. For version 8 script-tag builds, load dist/violin.js alongside dist/features/raincloud.js.

The lean apexcharts/core entry has different requirements. Import the appropriate base renderer alongside each feature. For raw-observation boxPlot or violin charts, include apexcharts/features/stats. On the lean core, violin and raincloud also require apexcharts/bar.

Raincloud is a Premium chart type that was already opt-in. Version 8 also requires the violin renderer before the raincloud feature when using individual browser scripts.

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

For XY series, write each point as an object with x and y fields. Point objects can also hold tooltip and data-label information.

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 or datetime for numeric coordinates or dates. Numeric XY pairs accept two-item arrays or objects. Range bars, range areas, candlesticks, box plots, heatmaps, treemaps, and bubble charts have chart-specific data requirements.

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'
}

Configuration Option Groups

Heatmap cell shapes

The plotOptions.heatmap.shape 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'
  }
}

Highlight Filter options (Premium add-on)

The Highlight Filter displays a selected part against a faded total. Import apexcharts/features/highlight-filter to activate it. A valid Premium license removes the trial watermark when the filter is active. Axis series accept highlightData arrays or a highlight property on each point. Pie, donut, polar area, and radial charts can use highlightFilter.data for the part values.

Highlight Filter instance API and event

After loading the add-on, chart.highlightFilter exposes the following calls. The custom highlightFilterChanged event belongs to chart.events and fires after a selection enters, updates, or clears.

Axes, labels, and formatters

Configure category, numeric, and datetime X-axes with tick, label, range, and date-formatting options. Y-axes support logarithmic and reversed scales, multiple axes, and series-specific assignments.

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

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

Feature-dependent instance methods

Static and extension methods

Declarative HTML attributes

Call ApexCharts.initOnLoad() to render charts declared in HTML. Each container needs both attributes.

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;
}

CSS design token reference

ApexCharts reads these CSS custom properties from the chart’s surrounding styles when theme.tokens is enabled. Explicit chart color options take precedence.

Responsive behavior

Each item in responsive specifies a maximum-width breakpoint and the options to override. For example, use a shorter chart and move the legend below the graph on narrow screens.

responsive: [{
  breakpoint: 640,
  options: {
    chart: { height: 260 },
    legend: { position: 'bottom' },
    dataLabels: { enabled: false }
  }
}]

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. The canvas renderer requires an explicit feature import. 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

Raincloud import

The Premium raincloud type needs the violin renderer and the raincloud feature in ApexCharts 8:

import ApexCharts from 'apexcharts'
import 'apexcharts/violin'
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 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. Angular projects running ApexCharts 8 need ng-apexcharts 3.2.0 or newer with Angular 20+. Earlier 3.1.x wrappers accept ApexCharts 7 but not ApexCharts 8.

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

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:

• JavaScript Chart & Graph Libraries
• SVGChart.js: Responsive SVG Line Charts in Vanilla JavaScript
• Simple Modular JavaScript Chart Library – Billboard.js
• Modern SVG Based Chart Library – Frappé Charts
• Lightweight Financial Chart JavaScript Library – lightweight-charts v5
• jQuery Chart & Graph Plugins
• Attractive Plotting Plugin with jQuery – Flot
• Morris – Good-looking Charts Plugin With jQuery
• Chart Components for Modern JavaScript Frameworks
• AI-Ready React Data Visualization with 38 Chart Types – Semiotic
• Composable SVG Charts for SolidJS – solid-charts

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: 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.

Q: Why did my sunburst, waterfall, violin, or drilldown chart stop working after upgrading?
A: ApexCharts 8 moves these renderers or features out of the default bundle. Import the appropriate apexcharts/... or apexcharts/features/... module. For a script-tag application, include the matching version 8 browser file. The full bundle at apexcharts/full includes all of them.

Changelog:

v8.4.1 (10/22/2026)

• Bugfixes

v8.4.0 (10/20/2026)

• Bugfixes

v8.3.1 (10/16/2026)

• Bugfixes

v8.3.0 (10/15/2026)

• Bugfixes
• Make the default mouse wheel zoom cooperative.

v8.2.0 (10/13/2026)

• Bugfixes

v8.1.0 (10/12/2026)

• Bugfixes

v8.0.0 (10/09/2026)

• Made unit, sunburst, violin, drilldown, waterfall, dumbbell, and streamgraph explicit imports.
• Added the apexcharts/full entry and dist/apexcharts.full.min.js browser bundle.
• Improved missing-module warnings and corrected lean-core renderer errors and type-entry resolution.

v7.9.1 (10/09/2026)

• Restored missing-feature warnings in the minified browser build and corrected addon loading behavior.

v7.9.0 (10/09/2026)

• Added the optional Premium Highlight Filter and Basque locale.
• Changed invalid chart-type and unknown-option handling. Corrected box-plot update animations and needle-gauge label placement.

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