ApexCharts
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 .Simple Pie Chart
Preview
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>
Column Chart
Preview
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"],
labels: {
show: true,
style: {
colors: "var(--lpx-content-text)",
fontSize: "12px",
},
},
},
yaxis: {
title: {
text: "$ (thousands)",
},
labels: {
show: true,
style: {
colors: "var(--lpx-content-text)",
fontSize: "12px",
},
},
},
legend: {
fontSize: "16px",
labels: {
colors: "var(--lpx-content-text)",
useSeriesColors: true,
},
itemMargin: {
horizontal: 20,
vertical: 20,
},
},
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>
Mixed Chart
Preview
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],
},
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: {
labels: {
show: true,
style: {
colors: "var(--lpx-content-text)",
fontSize: "12px",
},
},
},
yaxis: [
{
labels: {
show: true,
style: {
colors: "var(--lpx-content-text)",
fontSize: "12px",
},
},
},
],
legend: {
fontSize: "16px",
labels: {
colors: "var(--lpx-content-text)",
useSeriesColors: true,
},
},
};
var chart = new ApexCharts(document.querySelector("#mixedChart"), optionsMixed);
chart.render();
<div id="mixedChart"></div>
Area Chart
Preview
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",
labels: {
show: true,
style: {
colors: "var(--lpx-content-text)",
fontSize: "12px",
},
},
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",
],
},
yaxis: {
labels: {
show: true,
style: {
colors: "var(--lpx-content-text)",
fontSize: "12px",
},
},
},
legend: {
fontSize: "16px",
labels: {
colors: "var(--lpx-content-text)",
useSeriesColors: true,
},
itemMargin: {
horizontal: 20,
vertical: 20,
},
},
tooltip: {
x: {
format: "dd/MM/yy HH:mm",
},
},
};
var chart = new ApexCharts(document.querySelector("#areaChart"), optionsArea);
chart.render();
<div id="areaChart"></div>
Bar Chart
Preview
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",
],
labels: {
show: true,
style: {
colors: "var(--lpx-content-text)",
fontSize: "12px",
},
},
},
yaxis: {
labels: {
show: true,
style: {
colors: "var(--lpx-content-text)",
fontSize: "12px",
},
},
},
};
var chart = new ApexCharts(document.querySelector("#barChart"), optionsBar);
chart.render();
<div id="barChart"></div>
Line Chart
Preview
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",
},
grid: {
row: {
colors: ["#f3f3f3", "transparent"], // takes an array which will be repeated on columns
opacity: 0.5,
},
},
xaxis: {
labels: {
show: true,
style: {
colors: "var(--lpx-content-text)",
fontSize: "12px",
},
},
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"],
},
yaxis: {
labels: {
show: true,
style: {
colors: "var(--lpx-content-text)",
fontSize: "12px",
},
},
},
legend: {
fontSize: "16px",
labels: {
colors: "var(--lpx-content-text)",
useSeriesColors: true,
},
itemMargin: {
horizontal: 20,
vertical: 20,
},
},
};
var chart = new ApexCharts(document.querySelector("#lineChart"), optionsLine);
chart.render();
<div id="lineChart"></div>
