A Modern Interactive JavaScript Charts Based on SVG | apexcharts.js

ApexCharts is now a partner of FusionCharts, offering a wide range of data visualization components. It offers advanced maps, metrics, widgets, time series charts, and more.

A modern JavaScript diagram library for creating interactive diagrams and visualizations using a simple API.

Chart Types:

  • Line Chart
  • Area Chart
  • Candlestick
  • Heat Map
  • Multi-axis Chart
  • Pie/Donut Chart
  • Radar Chart
  • Range Bar Chart
  • Gauge

How to make use of it:

Install it with NPM.

# NPM
$ npm install apexcharts --save
import ApexCharts from 'apexcharts'

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

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

Create a placeholder aspect of the chart.

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

Define your individual information & 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 primary line chart within the placeholder aspect.

chart.render();

Versatile Interactive SVG Chart Library, SVG Chart Library, apexcharts plugin/Github, native svg charts, svg chart library, svg chart generator, svg graph example, svg line graph generator, free svg charts


See Demo And Download

Official Website(apexcharts): Click Here

This superior jQuery/javascript plugin is developed by apexcharts. For extra Advanced Usage, please go to the official website.

Share