Apex charts is modern JavaScript charting library to build interactive charts and visualizations with simple API.
Please refer ApexCharts Documentation for a full list of instructions and other options.
config.js file to set JavaScript global variables (colors) which are used in charts. Read more
In order to use Apex charts on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header:
<link rel="stylesheet" href="assets/vendor/libs/apex-charts/apex-charts.css" />Include the following vendors script in the "Vendors JS" area from the page's footer:
<script src="assets/vendor/libs/apex-charts/apexcharts.js"><script><div id="lineChart"></div>const lineChartEl = document.querySelector('#lineChart'),
lineChartConfig = {
chart: {
height: 400,
type: 'line',
parentHeightOffset: 0,
zoom: {
enabled: false
},
toolbar: {
show: false
}
},
series: [
{
data: [280, 200, 220, 180, 270, 250, 70, 90, 200, 150, 160, 100, 150, 100, 50]
}
],
markers: {
strokeWidth: 7,
strokeOpacity: 1,
strokeColors: [config.colors.white],
colors: [config.colors.warning]
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
colors: [config.colors.warning],
grid: {
borderColor: borderColor,
xaxis: {
lines: {
show: true
}
},
padding: {
top: -20
}
},
tooltip: {
custom: function ({ series, seriesIndex, dataPointIndex, w }) {
return '<div class="px-3 py-2">' + '<span>' + series[seriesIndex][dataPointIndex] + '%</span>' + '</div>';
}
},
xaxis: {
categories: [
'7/12',
'8/12',
'9/12',
'10/12',
'11/12',
'12/12',
'13/12',
'14/12',
'15/12',
'16/12',
'17/12',
'18/12',
'19/12',
'20/12',
'21/12'
],
axisBorder: {
show: false
},
axisTicks: {
show: false
},
labels: {
style: {
colors: labelColor,
fontSize: '13px'
}
}
},
yaxis: {
labels: {
style: {
colors: labelColor,
fontSize: '13px'
}
}
}
};
if (typeof lineChartEl !== undefined && lineChartEl !== null) {
const lineChart = new ApexCharts(lineChartEl, lineChartConfig);
lineChart.render();
}<div id="lineAreaChart"></div>const areaChartEl = document.querySelector('#lineAreaChart'),
areaChartConfig = {
chart: {
height: 400,
type: 'area',
parentHeightOffset: 0,
toolbar: {
show: false
}
},
dataLabels: {
enabled: false
},
stroke: {
show: false,
curve: 'straight'
},
legend: {
show: true,
position: 'top',
horizontalAlign: 'start',
labels: {
colors: legendColor,
useSeriesColors: false
}
},
grid: {
borderColor: borderColor,
xaxis: {
lines: {
show: true
}
}
},
colors: [chartColors.area.series3, chartColors.area.series2, chartColors.area.series1],
series: [
{
name: 'Visits',
data: [100, 120, 90, 170, 130, 160, 140, 240, 220, 180, 270, 280, 375]
},
{
name: 'Clicks',
data: [60, 80, 70, 110, 80, 100, 90, 180, 160, 140, 200, 220, 275]
},
{
name: 'Sales',
data: [20, 40, 30, 70, 40, 60, 50, 140, 120, 100, 140, 180, 220]
}
],
xaxis: {
categories: [
'7/12',
'8/12',
'9/12',
'10/12',
'11/12',
'12/12',
'13/12',
'14/12',
'15/12',
'16/12',
'17/12',
'18/12',
'19/12',
'20/12'
],
axisBorder: {
show: false
},
axisTicks: {
show: false
},
labels: {
style: {
colors: labelColor,
fontSize: '13px'
}
}
},
yaxis: {
labels: {
style: {
colors: labelColor,
fontSize: '13px'
}
}
},
fill: {
opacity: 1,
type: 'solid'
},
tooltip: {
shared: false
}
};
if (typeof areaChartEl !== undefined && areaChartEl !== null) {
const areaChart = new ApexCharts(areaChartEl, areaChartConfig);
areaChart.render();
}<div id="barChart"></div>const barChartEl = document.querySelector('#barChart'),
barChartConfig = {
chart: {
height: 400,
type: 'bar',
stacked: true,
parentHeightOffset: 0,
toolbar: {
show: false
}
},
plotOptions: {
bar: {
columnWidth: '15%',
colors: {
backgroundBarColors: [
chartColors.column.bg,
chartColors.column.bg,
chartColors.column.bg,
chartColors.column.bg,
chartColors.column.bg
],
backgroundBarRadius: 10
}
}
},
dataLabels: {
enabled: false
},
legend: {
show: true,
position: 'top',
horizontalAlign: 'start',
labels: {
colors: legendColor,
useSeriesColors: false
}
},
colors: [chartColors.column.series1, chartColors.column.series2],
stroke: {
show: true,
colors: ['transparent']
},
grid: {
borderColor: borderColor,
xaxis: {
lines: {
show: true
}
}
},
series: [
{
name: 'Apple',
data: [90, 120, 55, 100, 80, 125, 175, 70, 88, 180]
},
{
name: 'Samsung',
data: [85, 100, 30, 40, 95, 90, 30, 110, 62, 20]
}
],
xaxis: {
categories: ['7/12', '8/12', '9/12', '10/12', '11/12', '12/12', '13/12', '14/12', '15/12', '16/12'],
axisBorder: {
show: false
},
axisTicks: {
show: false
},
labels: {
style: {
colors: labelColor,
fontSize: '13px'
}
}
},
yaxis: {
labels: {
style: {
colors: labelColor,
fontSize: '13px'
}
}
},
fill: {
opacity: 1
}
};
if (typeof barChartEl !== undefined && barChartEl !== null) {
const barChart = new ApexCharts(barChartEl, barChartConfig);
barChart.render();
}<div id="horizontalBarChart"></div>const horizontalBarChartEl = document.querySelector('#horizontalBarChart'),
horizontalBarChartConfig = {
chart: {
height: 400,
type: 'bar',
toolbar: {
show: false
}
},
plotOptions: {
bar: {
horizontal: true,
barHeight: '30%',
startingShape: 'rounded',
borderRadius: 8
}
},
grid: {
borderColor: borderColor,
xaxis: {
lines: {
show: false
}
},
padding: {
top: -20,
bottom: -12
}
},
colors: config.colors.info,
dataLabels: {
enabled: false
},
series: [
{
data: [700, 350, 480, 600, 210, 550, 150]
}
],
xaxis: {
categories: ['MON, 11', 'THU, 14', 'FRI, 15', 'MON, 18', 'WED, 20', 'FRI, 21', 'MON, 23'],
axisBorder: {
show: false
},
axisTicks: {
show: false
},
labels: {
style: {
colors: labelColor,
fontSize: '13px'
}
}
},
yaxis: {
labels: {
style: {
colors: labelColor,
fontSize: '13px'
}
}
}
};
if (typeof horizontalBarChartEl !== undefined && horizontalBarChartEl !== null) {
const horizontalBarChart = new ApexCharts(horizontalBarChartEl, horizontalBarChartConfig);
horizontalBarChart.render();
}<div id="candleStickChart"></div>const candlestickEl = document.querySelector('#candleStickChart'),
candlestickChartConfig = {
chart: {
height: 410,
type: 'candlestick',
parentHeightOffset: 0,
toolbar: {
show: false
}
},
series: [
{
data: [
{
x: new Date(1538778600000),
y: [150, 170, 50, 100]
},
{
x: new Date(1538780400000),
y: [200, 400, 170, 330]
},
{
x: new Date(1538782200000),
y: [330, 340, 250, 280]
},
{
x: new Date(1538784000000),
y: [300, 330, 200, 320]
},
{
x: new Date(1538785800000),
y: [320, 450, 280, 350]
},
{
x: new Date(1538787600000),
y: [300, 350, 80, 250]
},
{
x: new Date(1538789400000),
y: [200, 330, 170, 300]
},
{
x: new Date(1538791200000),
y: [200, 220, 70, 130]
},
{
x: new Date(1538793000000),
y: [220, 270, 180, 250]
},
{
x: new Date(1538794800000),
y: [200, 250, 80, 100]
},
{
x: new Date(1538796600000),
y: [150, 170, 50, 120]
},
{
x: new Date(1538798400000),
y: [110, 450, 10, 420]
},
{
x: new Date(1538800200000),
y: [400, 480, 300, 320]
},
{
x: new Date(1538802000000),
y: [380, 480, 350, 450]
}
]
}
],
xaxis: {
type: 'datetime',
axisBorder: {
show: false
},
axisTicks: {
show: false
},
labels: {
style: {
colors: labelColor,
fontSize: '13px'
}
}
},
yaxis: {
tooltip: {
enabled: true
},
labels: {
style: {
colors: labelColor,
fontSize: '13px'
}
}
},
grid: {
borderColor: borderColor,
xaxis: {
lines: {
show: true
}
},
padding: {
top: -20
}
},
plotOptions: {
candlestick: {
colors: {
upward: config.colors.success,
downward: config.colors.danger
}
},
bar: {
columnWidth: '40%'
}
}
};
if (typeof candlestickEl !== undefined && candlestickEl !== null) {
const candlestickChart = new ApexCharts(candlestickEl, candlestickChartConfig);
candlestickChart.render();
}<div id="scatterChart"></div>const scatterChartEl = document.querySelector('#scatterChart'),
scatterChartConfig = {
chart: {
height: 400,
type: 'scatter',
zoom: {
enabled: true,
type: 'xy'
},
parentHeightOffset: 0,
toolbar: {
show: false
}
},
grid: {
borderColor: borderColor,
xaxis: {
lines: {
show: true
}
}
},
legend: {
show: true,
position: 'top',
horizontalAlign: 'start',
labels: {
colors: legendColor,
useSeriesColors: false
}
},
colors: [config.colors.warning, config.colors.primary, config.colors.success],
series: [
{
name: 'Angular',
data: [
[5.4, 170],
[5.4, 100],
[5.7, 110],
[5.9, 150],
[6.0, 200],
[6.3, 170],
[5.7, 140],
[5.9, 130],
[7.0, 150],
[8.0, 120],
[9.0, 170],
[10.0, 190],
[11.0, 220],
[12.0, 170],
[13.0, 230]
]
},
{
name: 'Vue',
data: [
[14.0, 220],
[15.0, 280],
[16.0, 230],
[18.0, 320],
[17.5, 280],
[19.0, 250],
[20.0, 350],
[20.5, 320],
[20.0, 320],
[19.0, 280],
[17.0, 280],
[22.0, 300],
[18.0, 120]
]
},
{
name: 'React',
data: [
[14.0, 290],
[13.0, 190],
[20.0, 220],
[21.0, 350],
[21.5, 290],
[22.0, 220],
[23.0, 140],
[19.0, 400],
[20.0, 200],
[22.0, 90],
[20.0, 120]
]
}
],
xaxis: {
tickAmount: 10,
axisBorder: {
show: false
},
axisTicks: {
show: false
},
labels: {
formatter: function (val) {
return parseFloat(val).toFixed(1);
},
style: {
colors: labelColor,
fontSize: '13px'
}
}
},
yaxis: {
labels: {
style: {
colors: labelColor,
fontSize: '13px'
}
}
}
};
if (typeof scatterChartEl !== undefined && scatterChartEl !== null) {
const scatterChart = new ApexCharts(scatterChartEl, scatterChartConfig);
scatterChart.render();
}<div id="heatMapChart"></div>// Heat chart data generator
function generateDataHeat(count, yrange) {
let i = 0;
let series = [];
while (i < count) {
let x = 'w' + (i + 1).toString();
let y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
series.push({
x: x,
y: y
});
i++;
}
return series;
}
const heatMapEl = document.querySelector('#heatMapChart'),
heatMapChartConfig = {
chart: {
height: 350,
type: 'heatmap',
parentHeightOffset: 0,
toolbar: {
show: false
}
},
plotOptions: {
heatmap: {
enableShades: false,
colorScale: {
ranges: [
{
from: 0,
to: 10,
name: '0-10',
color: '#90B3F3'
},
{
from: 11,
to: 20,
name: '10-20',
color: '#7EA6F1'
},
{
from: 21,
to: 30,
name: '20-30',
color: '#6B9AEF'
},
{
from: 31,
to: 40,
name: '30-40',
color: '#598DEE'
},
{
from: 41,
to: 50,
name: '40-50',
color: '#4680EC'
},
{
from: 51,
to: 60,
name: '50-60',
color: '#3474EA'
}
]
}
}
},
dataLabels: {
enabled: false
},
grid: {
show: false
},
legend: {
show: true,
position: 'top',
horizontalAlign: 'start',
labels: {
colors: legendColor,
useSeriesColors: false
},
markers: {
offsetY: 0,
offsetX: -3
},
itemMargin: {
vertical: 3,
horizontal: 10
}
},
stroke: {
curve: 'smooth',
width: 4,
lineCap: 'round',
colors: [cardColor]
},
series: [
{
name: 'SUN',
data: generateDataHeat(24, {
min: 0,
max: 60
})
},
{
name: 'MON',
data: generateDataHeat(24, {
min: 0,
max: 60
})
},
{
name: 'TUE',
data: generateDataHeat(24, {
min: 0,
max: 60
})
},
{
name: 'WED',
data: generateDataHeat(24, {
min: 0,
max: 60
})
},
{
name: 'THU',
data: generateDataHeat(24, {
min: 0,
max: 60
})
},
{
name: 'FRI',
data: generateDataHeat(24, {
min: 0,
max: 60
})
},
{
name: 'SAT',
data: generateDataHeat(24, {
min: 0,
max: 60
})
}
],
xaxis: {
labels: {
show: false,
style: {
colors: labelColor,
fontSize: '13px'
}
},
axisBorder: {
show: false
},
axisTicks: {
show: false
}
},
yaxis: {
labels: {
style: {
colors: labelColor,
fontSize: '13px'
}
}
}
};
if (typeof heatMapEl !== undefined && heatMapEl !== null) {
const heatMapChart = new ApexCharts(heatMapEl, heatMapChartConfig);
heatMapChart.render();
}<div id="donutChart"></div>const donutChartEl = document.querySelector('#donutChart'),
donutChartConfig = {
chart: {
height: 390,
type: 'donut'
},
labels: ['Operational', 'Networking', 'Hiring', 'R&D'],
series: [85, 15, 50, 50],
colors: [
chartColors.donut.series1,
chartColors.donut.series4,
chartColors.donut.series3,
chartColors.donut.series2
],
stroke: {
show: false,
curve: 'straight'
},
dataLabels: {
enabled: true,
formatter: function (val, opt) {
return parseInt(val, 10) + '%';
}
},
legend: {
show: true,
position: 'bottom',
markers: { offsetX: -3 },
itemMargin: {
vertical: 3,
horizontal: 10
},
labels: {
colors: legendColor,
useSeriesColors: false
}
},
plotOptions: {
pie: {
donut: {
labels: {
show: true,
name: {
fontSize: '2rem',
fontFamily: 'Public Sans'
},
value: {
fontSize: '1.2rem',
color: legendColor,
fontFamily: 'Public Sans',
formatter: function (val) {
return parseInt(val, 10) + '%';
}
},
total: {
show: true,
fontSize: '1.5rem',
color: headingColor,
label: 'Operational',
formatter: function (w) {
return '31%';
}
}
}
}
}
},
responsive: [
{
breakpoint: 992,
options: {
chart: {
height: 380
},
legend: {
position: 'bottom',
labels: {
colors: legendColor,
useSeriesColors: false
}
}
}
},
{
breakpoint: 576,
options: {
chart: {
height: 320
},
plotOptions: {
pie: {
donut: {
labels: {
show: true,
name: {
fontSize: '1.5rem'
},
value: {
fontSize: '1rem'
},
total: {
fontSize: '1.5rem'
}
}
}
}
},
legend: {
position: 'bottom',
labels: {
colors: legendColor,
useSeriesColors: false
}
}
}
},
{
breakpoint: 420,
options: {
chart: {
height: 280
},
legend: {
show: false
}
}
},
{
breakpoint: 360,
options: {
chart: {
height: 250
},
legend: {
show: false
}
}
}
]
};
if (typeof donutChartEl !== undefined && donutChartEl !== null) {
const donutChart = new ApexCharts(donutChartEl, donutChartConfig);
donutChart.render();
}<div id="radialBarChart"></div>const radialBarChartEl = document.querySelector('#radialBarChart'),
radialBarChartConfig = {
chart: {
height: 380,
type: 'radialBar'
},
colors: [chartColors.donut.series1, chartColors.donut.series2, chartColors.donut.series4],
plotOptions: {
radialBar: {
size: 185,
hollow: {
size: '40%'
},
track: {
margin: 10,
background: config.colors_label.secondary
},
dataLabels: {
name: {
fontSize: '2rem',
fontFamily: 'Public Sans'
},
value: {
fontSize: '1.2rem',
color: legendColor,
fontFamily: 'Public Sans'
},
total: {
show: true,
fontWeight: 400,
fontSize: '1.3rem',
color: headingColor,
label: 'Comments',
formatter: function (w) {
return '80%';
}
}
}
}
},
grid: {
borderColor: borderColor,
padding: {
top: -25,
bottom: -20
}
},
legend: {
show: true,
position: 'bottom',
labels: {
colors: legendColor,
useSeriesColors: false
}
},
stroke: {
lineCap: 'round'
},
series: [80, 50, 35],
labels: ['Comments', 'Replies', 'Shares']
};
if (typeof radialBarChartEl !== undefined && radialBarChartEl !== null) {
const radialChart = new ApexCharts(radialBarChartEl, radialBarChartConfig);
radialChart.render();
}<div id="radarChart"></div>const radarChartEl = document.querySelector('#radarChart'),
radarChartConfig = {
chart: {
height: 350,
type: 'radar',
toolbar: {
show: false
},
dropShadow: {
enabled: false,
blur: 8,
left: 1,
top: 1,
opacity: 0.2
}
},
legend: {
show: true,
position: 'bottom',
labels: {
colors: legendColor,
useSeriesColors: false
}
},
plotOptions: {
radar: {
polygons: {
strokeColors: borderColor,
connectorColors: borderColor
}
}
},
yaxis: {
show: false
},
series: [
{
name: 'iPhone 12',
data: [41, 64, 81, 60, 42, 42, 33, 23]
},
{
name: 'Samsung s20',
data: [65, 46, 42, 25, 58, 63, 76, 43]
}
],
colors: [chartColors.donut.series1, chartColors.donut.series3],
xaxis: {
categories: ['Battery', 'Brand', 'Camera', 'Memory', 'Storage', 'Display', 'OS', 'Price'],
labels: {
show: true,
style: {
colors: [labelColor, labelColor, labelColor, labelColor, labelColor, labelColor, labelColor, labelColor],
fontSize: '13px',
fontFamily: 'Public Sans'
}
}
},
fill: {
opacity: [1, 0.8]
},
stroke: {
show: false,
width: 0
},
markers: {
size: 0
},
grid: {
show: false,
padding: {
top: -20,
bottom: -20
}
}
};
if (typeof radarChartEl !== undefined && radarChartEl !== null) {
const radarChart = new ApexCharts(radarChartEl, radarChartConfig);
radarChart.render();
}