Versatile Interactive SVG Chart Library – apexcharts.js

Preview:

Description:

apexcharts.js is a feature-rich JavaScript chart library that lets you create dynamic, interactive, responsive, animated, SVG-based LINE, AREA, COLUMN/BAR, MIXED, BUBBLE, SCATTER, PIE, RADIALBAR, HEATMAP, GAUGE charts and graphs to visualize your complex data.

Chart Types:

• Line Chart
• Area Chart
• Candlestick
• Heat Map
• Multi-axis Chart
• Pie/Donut Chart
• Radar Chart
• Range Bar Chart
• Range Area Chart
• Gauge
• Treemap
• Horizontal Box Plots
• Funnel

Basic usage:

Install it with NPM.

# NPM
$ npm install apexcharts --save

import ApexCharts from 'apexcharts'

Or include the compiled and minified version of the ‘apexcharts.js’ library on the page.

<script src="/path/to/apexcharts.min.js"></script>

Create a placeholder element for the chart.

<div id="myChart"></div>

Define your own data & options.

var options = {
    chart: {
        height: 380,
        type: 'line',
        zoom: {
            enabled: false
        }
    },
    dataLabels: {
        enabled: false
    },
    stroke: {
        curve: 'straight'
    },
    series: [{
        name: "Desktops",
        data: [30, 41, 35, 51, 49, 62, 69, 91, 126]
    }],
    title: {
        text: 'Product Trends by Month',
        align: 'left'
    },
    grid: {
        row: {
            colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
            opacity: 0.5
        },
    },
    labels: series.monthDataSeries1.dates,
    xaxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
    },
}

Create a new ApexCharts chart.

var myChart = new ApexCharts(
    document.querySelector("#myChart"),
    options
);

Render a basic line chart in the placeholder element.

chart.render();

Check out the Offical Documentation for more usages.

Changelog:

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 shadow root if we’re 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 null dataLabels if user want to display a custom text in place of null value
• 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