ApexCharts
Get started with these advanced charts from ApexCharts styled with Bootstrap 5 to show data and statistics
Getting started
The more advanced charts from the Volt Pro Bootstrap 5 Dashboard project uses the library ApexCharts and we’ve heavily customized the styling to match the modern UI/UX requirements.
You need to include the following stylesheet file in the head
tag:
<link type="text/css" href="@@path/vendor/apexcharts/dist/apexcharts.css" rel="stylesheet">
You also need to include the following javascript files in the body
tag:
<script src="@@path/vendor/apexcharts/dist/apexcharts.min.js"></script>
Line chart
Here’s an example of a line chart:
<div id="line-chart-apex"></div>
Javascript:
// Line chart
var optionsLineChart = {
series: [{
name: 'Clients',
data: [120, 160, 200, 470, 420, 150, 470, 750, 650, 190, 140]
}],
labels: ['01 Feb', '02 Feb', '03 Feb', '04 Feb', '05 Feb', '06 Feb', '07 Feb', '08 Feb', '09 Feb', '10 Feb', '11 Feb'],
chart: {
type: 'area',
width: "100%",
height: 360
},
theme: {
monochrome: {
enabled: true,
color: '#31316A',
}
},
tooltip: {
fillSeriesColor: false,
onDatasetHover: {
highlightDataSeries: false,
},
theme: 'light',
style: {
fontSize: '12px',
fontFamily: 'Inter',
},
},
};
var lineChartEl = document.getElementById('line-chart-apex');
if (lineChartEl) {
var lineChart = new ApexCharts(lineChartEl, optionsLineChart);
lineChart.render();
}
Bar chart
Here’s an example of a bar chart:
<div id="bar-chart-apex"></div>
Javascript:
// Bar Chart
var optionsBarChart = {
series: [{
name: 'Sales',
data: [34, 29, 32, 38, 39, 35, 36]
}],
chart: {
type: 'bar',
width: "100%",
height: 360
},
theme: {
monochrome: {
enabled: true,
color: '#31316A',
}
},
plotOptions: {
bar: {
columnWidth: '25%',
borderRadius: 5,
radiusOnLastStackedBar: true,
colors: {
backgroundBarColors: ['#F2F4F6', '#F2F4F6', '#F2F4F6', '#F2F4F6'],
backgroundBarRadius: 5,
},
}
},
labels: [1, 2, 3, 4, 5, 6, 7],
xaxis: {
categories: ['01 Feb', '02 Feb', '03 Feb', '04 Feb', '05 Feb', '06 Feb', '07 Feb'],
crosshairs: {
width: 1
},
},
tooltip: {
fillSeriesColor: false,
onDatasetHover: {
highlightDataSeries: false,
},
theme: 'light',
style: {
fontSize: '12px',
fontFamily: 'Inter',
},
y: {
formatter: function (val) {
return "$ " + val + "k"
}
}
},
};
var barChartEl = document.getElementById('bar-chart-apex');
if (barChartEl) {
var barChart = new ApexCharts(barChartEl, optionsBarChart);
barChart.render();
}
Pie chart
Here’s an example of a pie chart:
<div id="pie-chart-apex"></div>
Javascript:
var optionsPieChart = {
series: [44, 55, 13, 43, 22],
chart: {
type: 'pie',
height: 360,
},
theme: {
monochrome: {
enabled: true,
color: '#31316A',
}
},
labels: ['United States', 'Canada', 'United Kingdom', 'Germany', 'France'],
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
}
}
}],
tooltip: {
fillSeriesColor: false,
onDatasetHover: {
highlightDataSeries: false,
},
theme: 'light',
style: {
fontSize: '12px',
fontFamily: 'Inter',
},
y: {
formatter: function (val) {
return "$ " + val + "k"
}
}
},
};
var pieChartEl = document.getElementById('pie-chart-apex');
if (pieChartEl) {
var pieChart = new ApexCharts(pieChartEl, optionsPieChart);
pieChart.render();
}
Examples and settings
See more usage examples and the options API on the official ApexCharts page.