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 moreIn 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,
fontFamily: 'Inter',
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: [cardColor],
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: '11px'
}
}
},
yaxis: {
min: 0,
max: 300,
tickAmount: 5,
labels: {
style: {
colors: labelColor,
fontSize: '11px'
}
}
}
};
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,
fontFamily: 'Inter',
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: '11px'
}
}
},
yaxis: {
min: 0,
max: 240,
tickAmount: 4,
labels: {
style: {
colors: labelColor,
fontSize: '11px'
}
}
},
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,
fontFamily: 'Inter',
type: 'bar',
toolbar: {
show: false
}
},
plotOptions: {
bar: {
horizontal: true,
barHeight: '30%',
borderRadius: 8,
borderRadiusApplication: 'end',
borderRadiusWhenStacked: 'last'
}
},
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: {
min: 0,
max: 800,
tickAmount: 4,
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: '11px'
}
}
},
yaxis: {
labels: {
style: {
colors: labelColor,
fontSize: '11px'
}
}
}
};
if (typeof horizontalBarChartEl !== undefined && horizontalBarChartEl !== null) {
const horizontalBarChart = new ApexCharts(horizontalBarChartEl, horizontalBarChartConfig);
horizontalBarChart.render();
}<div id="candleStickChart"></div>const candlestickEl = document.querySelector('#candleStickChart'),
candlestickColors = {
series1: '#28c76f',
series2: '#ea5455'
},
candlestickChartConfig = {
chart: {
height: 410,
fontFamily: 'Inter',
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: '11px'
}
}
},
yaxis: {
tickAmount: 5,
tooltip: {
enabled: true
},
labels: {
style: {
colors: labelColor,
fontSize: '11px'
}
}
},
grid: {
borderColor: borderColor,
xaxis: {
lines: {
show: true
}
},
padding: {
top: -20
}
},
plotOptions: {
candlestick: {
colors: {
upward: candlestickColors.series1,
downward: candlestickColors.series2
}
},
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,
fontFamily: 'Inter',
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',
markers: {
size: 6
},
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: '11px'
}
}
},
yaxis: {
tickAmount: 4,
labels: {
style: {
colors: labelColor,
fontSize: '11px'
}
}
}
};
if (typeof scatterChartEl !== undefined && scatterChartEl !== null) {
const scatterChart = new ApexCharts(scatterChartEl, scatterChartConfig);
scatterChart.render();
}<div id="heatMapChart"></div>const heatMapEl = document.querySelector('#heatMapChart'),
heatMapChartConfig = {
chart: {
height: 350,
fontFamily: 'Inter',
type: 'heatmap',
parentHeightOffset: 0,
toolbar: {
show: false
}
},
plotOptions: {
heatmap: {
enableShades: false,
colorScale: {
ranges: [
{
from: 0,
to: 10,
name: '0-10',
color: '#b9b3f8'
},
{
from: 11,
to: 20,
name: '10-20',
color: '#aba4f6'
},
{
from: 21,
to: 30,
name: '20-30',
color: '#9d95f5'
},
{
from: 31,
to: 40,
name: '30-40',
color: '#8f85f3'
},
{
from: 41,
to: 50,
name: '40-50',
color: '#8176f2'
},
{
from: 51,
to: 60,
name: '50-60',
color: '#7367f0'
}
]
}
}
},
dataLabels: {
enabled: false
},
grid: {
show: false
},
legend: {
show: true,
position: 'bottom',
labels: {
colors: legendColor,
useSeriesColors: false
},
markers: {
size: 6,
offsetY: 0,
shape: 'circle'
},
itemMargin: {
vertical: 3,
horizontal: 10
}
},
stroke: {
curve: 'smooth',
width: 2,
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: '11px'
}
},
axisBorder: {
show: false
},
axisTicks: {
show: false
}
},
yaxis: {
tickAmount: 5,
labels: {
style: {
colors: labelColor,
fontSize: '11px'
}
}
}
};
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,
fontFamily: 'Inter',
type: 'donut'
},
labels: ['Operational', 'Networking', 'Hiring', 'R&D'],
series: [42, 7, 25, 25],
colors: [
chartColors.donut.series1,
chartColors.donut.series3,
chartColors.donut.series4,
chartColors.donut.series5
],
stroke: {
show: false,
curve: 'straight'
},
dataLabels: {
enabled: true,
formatter: function (val, opt) {
return parseInt(val, 10) + '%';
}
},
legend: {
show: true,
position: 'bottom',
markers: {
size: 6
},
itemMargin: {
vertical: 3,
horizontal: 10
},
labels: {
colors: legendColor,
useSeriesColors: false
}
},
plotOptions: {
pie: {
donut: {
labels: {
show: true,
name: {
fontSize: '2rem',
fontFamily: fontFamily
},
value: {
fontSize: '1.5rem',
color: legendColor,
fontFamily: fontFamily,
formatter: function (val) {
return parseInt(val, 10) + '%';
}
},
total: {
show: true,
fontSize: '1.5rem',
color: headingColor,
label: 'Operational',
formatter: function (w) {
return '42%';
}
}
}
}
}
},
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: 348,
fontFamily: 'Inter',
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: fontFamily
},
value: {
fontSize: '1.2rem',
color: legendColor,
fontFamily: fontFamily
},
total: {
show: true,
fontWeight: 400,
fontSize: '1.125rem',
color: headingColor,
label: 'Comments',
formatter: function (w) {
return '80%';
}
}
}
}
},
grid: {
borderColor: borderColor,
padding: {
top: -25,
bottom: 20
}
},
legend: {
show: true,
position: 'bottom',
offsetY: -30,
markers: {
size: 6
},
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,
fontFamily: 'Inter',
type: 'radar',
toolbar: {
show: false
},
dropShadow: {
enabled: false,
blur: 8,
left: 1,
top: 1,
opacity: 0.2
}
},
legend: {
show: true,
position: 'bottom',
markers: {
size: 6
},
labels: {
colors: legendColor,
useSeriesColors: false
}
},
plotOptions: {
radar: {
polygons: {
strokeColors: borderColor,
connectorColors: borderColor
}
}
},
yaxis: {
tickAmount: 5,
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.series4, 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: fontFamily
}
}
},
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();
}