Chart.js

Chart.js is a lightweight and flexible JavaScript library for creating interactive and responsive charts. Below is a guide on how to integrate Chart.js with Bootstrap.

How to include Chart.js package? 

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Initialize the chart and apply theme colors dynamically.

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

HTML

<canvas class="chartjs" id="eCommerceChart"></canvas>

JavaScript:

const eCommerceChart = document.getElementById("eCommerceChart");
    if (eCommerceChart) {
        const ctx = eCommerceChart.getContext('2d');

        const myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], // Static time labels
                datasets: [{
                    label: 'Sales ($)',
                    data: [500, 1500, 800, 2000, 2200, 3000, 3500, 4000, 4500, 5000], // Static sales data
                    fill: false,
                    borderColor: getBootstrapVariable('--bs-primary'),
                    backgroundColor: getBootstrapVariable('--bs-primary'),
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
            }
        });
    }

Include charts:

<script src="assets/js/chart/chartjs.init.js"></script>