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:

function getColors(cssVars) {
    const colorValues = cssVars.map((variable) =>
        getComputedStyle(document.documentElement).getPropertyValue(variable).trim()
    );
    return colorValues;
}

document
    .querySelectorAll('input[name="data-theme-colors"]')
    .forEach((radio) => {
        radio.addEventListener("change", function () {
        setTimeout(() => {
            renderCharts(this.value);
        }, 0);
        });
    });

var basiclineChart = null;

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

    basiclineChart ? basiclineChart.destroy() : null;
    basiclineChart = new ApexCharts(
        document.querySelector("#basic_line_chart"),
        basic_line_chart
    );
    basiclineChart.render();
    });
}

Include ApexCharts:

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