ApexCharts

ApexCharts is a modern charting library that allows you to create **interactive and responsive** visualizations. Below is a guide on how to integrate ApexCharts with **Bootstrap**.

Install ApexCharts

To install ApexCharts using **NPM**, run the following command:

npm install apexcharts --save

How to include ApexCharts package? 

<script src="assets/libs/apexcharts/apexcharts.min.js"></script>

Initialize the chart and apply theme colors dynamically.

Below the example how to use the package and make it working ApexCharts on any page.

HTML:

<div id="basic_line_chart" class="apexcharts-container"></div>

JavaScript:

document.addEventListener("DOMContentLoaded", function () {
    var basicLineChartOptions = {
        series: [{
            name: "Desktops",
            data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
        }],
        chart: {
            height: 300,
            type: 'line',
            zoom: {
                enabled: false
            }
        },
        dataLabels: {
            enabled: false
        },
        stroke: {
            curve: 'straight'
        },
        title: {
            text: 'Basic Line Chart',
            align: 'left'
        },
        xaxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep']
        }
    };

    var chart = new ApexCharts(document.querySelector("#basic_line_chart"), basicLineChartOptions);
    chart.render();
});

Include ApexCharts:

<script src="assets/libs/apexcharts/apexcharts.min.js"></script>