Apexchart

ApexCharts is loaded with powerful features to fulfill your data-visualization needs. Look at some of the key features of ApexCharts. For more details

Installing via npm
npm install apexcharts --save
Usage
import ApexCharts from'apexcharts'

OR

Direct <script> include

Another way is to directly include it in your html

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
HTML Code
<div id="apex-basic"></div>
Script
if (document.querySelector("#apex-basic")) {
    const options = {
        chart: {
            height: 350,
            type: "line",
            zoom: {
                enabled: false
            }
        },
        colors: ["#0dd6b8"],
        series: [{
            name: "Desktops",
            data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
        }],
        dataLabels: {
            enabled: false
        },
        stroke: {
            curve: "straight"
        },
        title: {
            text: "Product Trends by Month",
            align: "left"
        },
        grid: {
            row: {
                colors: ["#f3f3f3", "transparent"],
                opacity: 0.5
            }
        },
        xaxis: {
            categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"]
        }
    };

    const chart = new ApexCharts(document.querySelector("#apex-basic"), options);
    chart.render();
}
Previous Next