Versatile Interactive SVG Chart Library – apexcharts.js

Category: Chart & Graph , Javascript , Recommended | August 11, 2018
Author: apexcharts
Views Total: 785
Official Page: Go to website
Last Update: August 11, 2018
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:

08/11/2018

  • bug fixed for dateFormat crashing firefox

08/10/2018

  • tooltip formatter fixed for float values. gradient stops corrected

08/07/2018

  • v1.2.0: fixed bug when changing color

08/07/2018

  • v1.1.5: zoomout fixes

08/05/2018

  • v1.1.3: small values handling – yaxis formatters fixed; case sensitivity for filename – turned on; pie label formatter fixed

You Might Be Interested In:

Leave a Reply