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.