Versatile Interactive SVG Chart Library – apexcharts.js

Category: Chart & Graph , Javascript , Recommended | September 20, 2020
Author:apexcharts
Views Total:69 views
Official Page:Go to website
Last Update:September 20, 2020
License:MIT

Preview:

Versatile Interactive SVG Chart Library – apexcharts.js

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
  • Gauge
  • Treemap

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

You Might Be Interested In:


Leave a Reply