ApexCharts is a modern charting library that helps developers to create beautiful and interactive visualizations for web pages.
For more, please visit the plugin's official site .var optionsPie = {
series: [44, 55, 13, 43, 22],
chart: {
width: 380,
type: "pie",
},
labels: ["Team A", "Team B", "Team C", "Team D", "Team E"],
responsive: [
{
breakpoint: 480,
options: {
chart: {
width: 200,
},
legend: {
position: "bottom",
},
},
},
],
};
var chart = new ApexCharts(document.querySelector("#pieChart"), optionsPie);
chart.render();
<div id="pieChart"></div>
var optionsColumn = {
series: [
{
name: "Net Profit",
data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
},
{
name: "Revenue",
data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
},
{
name: "Free Cash Flow",
data: [35, 41, 36, 26, 45, 48, 52, 53, 41],
},
],
chart: {
type: "bar",
height: 350,
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: "55%",
endingShape: "rounded",
},
},
dataLabels: {
enabled: false,
},
stroke: {
show: true,
width: 2,
colors: ["transparent"],
},
xaxis: {
categories: ["Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct"],
},
yaxis: {
title: {
text: "$ (thousands)",
},
},
fill: {
opacity: 1,
},
tooltip: {
y: {
formatter: function (val) {
return "$ " + val + " thousands";
},
},
},
};
var chart = new ApexCharts(
document.querySelector("#columnChart"),
optionsColumn
);
chart.render();
<div id="columnChart"></div>
var optionsMixed = {
series: [
{
name: "Website Blog",
type: "column",
data: [440, 505, 414, 671, 227, 413, 201, 352, 752, 320, 257, 160],
},
{
name: "Social Media",
type: "line",
data: [23, 42, 35, 27, 43, 22, 17, 31, 22, 22, 12, 16],
},
],
chart: {
height: 350,
type: "line",
},
stroke: {
width: [0, 4],
},
title: {
text: "Traffic Sources",
},
dataLabels: {
enabled: true,
enabledOnSeries: [1],
},
labels: [
"01 Jan 2001",
"02 Jan 2001",
"03 Jan 2001",
"04 Jan 2001",
"05 Jan 2001",
"06 Jan 2001",
"07 Jan 2001",
"08 Jan 2001",
"09 Jan 2001",
"10 Jan 2001",
"11 Jan 2001",
"12 Jan 2001",
],
xaxis: {
type: "datetime",
},
yaxis: [
{
title: {
text: "Website Blog",
},
},
{
opposite: true,
title: {
text: "Social Media",
},
},
],
};
var chart = new ApexCharts(document.querySelector("#mixedChart"), optionsMixed);
chart.render();
<div id="mixedChart"></div>
var optionsArea = {
series: [
{
name: "series1",
data: [31, 40, 28, 51, 42, 109, 100],
},
{
name: "series2",
data: [11, 32, 45, 32, 34, 52, 41],
},
],
chart: {
height: 350,
type: "area",
},
dataLabels: {
enabled: false,
},
stroke: {
curve: "smooth",
},
xaxis: {
type: "datetime",
categories: [
"2018-09-19T00:00:00.000Z",
"2018-09-19T01:30:00.000Z",
"2018-09-19T02:30:00.000Z",
"2018-09-19T03:30:00.000Z",
"2018-09-19T04:30:00.000Z",
"2018-09-19T05:30:00.000Z",
"2018-09-19T06:30:00.000Z",
],
},
tooltip: {
x: {
format: "dd/MM/yy HH:mm",
},
},
};
var chart = new ApexCharts(document.querySelector("#areaChart"), optionsArea);
chart.render();
<div id="areaChart"></div>
var optionsBar = {
series: [
{
data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380],
},
],
chart: {
type: "bar",
height: 350,
},
plotOptions: {
bar: {
borderRadius: 4,
horizontal: true,
},
},
dataLabels: {
enabled: false,
},
xaxis: {
categories: [
"South Korea",
"Canada",
"United Kingdom",
"Netherlands",
"Italy",
"France",
"Japan",
"United States",
"China",
"Germany",
],
},
};
var chart = new ApexCharts(document.querySelector("#barChart"), optionsBar);
chart.render();
<div id="barChart"></div>
var optionsLine = {
series: [
{
name: "Desktops",
data: [10, 41, 35, 51, 49, 62, 69, 91, 148],
},
],
chart: {
height: 350,
type: "line",
zoom: {
enabled: false,
},
},
dataLabels: {
enabled: false,
},
stroke: {
curve: "straight",
},
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,
},
},
xaxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"],
},
};
var chart = new ApexCharts(document.querySelector("#lineChart"), optionsLine);
chart.render();
<div id="lineChart"></div>