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.