ApexCharts

Initialize the chart with JavaScript and configure series, colors, and axes.

Step 1: Install ApexCharts

You can install ApexCharts via yarn or include it directly via CDN.

yarn add apexcharts

Step 2: Include Apexcharts Script

Add a chart container in your HTML and include the local ApexCharts JS file.

<!-- Include ApexCharts JS -->
<script src="../assets/libs/apexcharts/apexcharts.min.js"></script>

Step 3: Add Chart HTML

Add a <div> for the chart in your HTML. Then include the ApexCharts library using your local script:

<!-- Chart container -->
<div id="basicChart" data-colors='["var(--bs-primary)"]' class="apex-charts" dir="ltr"></div>

Step 4: Render Chart with JS

Use the following script to get colors from data-colors and render a basic line chart:

// Get colors array from data-colors attribute
function getChartColorsArray(chartId) {
    if (document.getElementById(chartId) !== null) {
        ...
    }
}

// Get colors for the chart
var basicChartColors = getChartColorsArray("basicChart");

if (basicChartColors) {
    var options = {
        chart: {
            ...
        },
        series: [
            ...
        ],
        colors: [basicChartColors[0], basicChartColors[1]],
    };

    var basicChart = new ApexCharts(document.querySelector("#basicChart"), options);
    basicChart.render();
}

For more chart types and options, visit the ApexCharts documentation.