Versatile Interactive SVG Chart Library – apexcharts.js

Category: Chart & Graph , Javascript , Recommended | August 27, 2019
Author: apexcharts
Views Total: 1,846
Official Page: Go to website
Last Update: August 27, 2019
License: MIT

Preview:

Versatile Interactive SVG Chart Library – apexcharts.js

Description:

apexcharts.js is a feature-rich JavaScript chart library 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.

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