# 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.