ApexCharts

There are few options on how to include/import ApexCharts into your project:

Install from yarn

Install the ApexCharts icon library from command prompt from the root directory of the project:

yarn add apexcharts --save

Import Apxechart link from the libs.

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

Import the helper function to manage the charts colors based on mode changes. It will take updated values from the root variables.

<script src="assets/js/charts/apexcharts-config.init.js"><script/>

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

HTML

    

        
Basic Line Chart
    
    

        

    

JavaScript

// Basic Line Chart
const basicLineChartEl = document.querySelector('#basic_line_chart'),
    basicLineChartOptions = {
        series: [{
            name: "Desktops",
            data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
        }],
        chart: {
            height: 320,
            type: 'line',
            toolbar: {
                how: false
            },
            zoom: {
                enabled: false
            },
        },
        grid: {
            padding: {
                top: -10,
                left: -20,
                right: -5,
                bottom: -10,
            }
        },
        colors: ['--bs-primary'],
        dataLabels: {
            enabled: false
        },
        stroke: {
            curve: 'straight',
            width: 3,
        },
        xaxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
        },
    };
allCharts.push([{ 'id': 'basic_line_chart', 'data': basicLineChartOptions }]);