Interactive-SVG-Charts

📊 Interactive SVG Charts

A modern JavaScript charting library to build interactive charts and visualizations with simple API.

Sponsored by

 

 

 

Browsers support

Firefox
Firefox
Chrome
Chrome
Safari
Safari
Edge
Edge
IE
IE11
31+ ✔ 35+ ✔ 6+ ✔ Edge ✔ IE11 ✔

Download and Installation

Installing via npm
npm install apexcharts --save
Direct <script> include
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

 

Wrappers for Vue/React/Angular

Integrate easily with 3rd party frameworks

Unofficial Wrappers

Useful links to wrappers other than the popular frameworks mentioned above

Usage

import ApexCharts from 'apexcharts'

To create a basic bar chart with minimal configuration, write as follows:

var options = {
  chart: {
    type: 'bar'
  },
  series: [{
    name: 'sales',
    data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
  }],
  xaxis: {
    categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
  }
}

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

This will render the following chart

A little more than the basic

You can create a combination of different charts, sync them and give your desired look with unlimited possibilities. Below is an example of synchronized charts with github style.

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

shares