Charts

Line Chart

Example of a line chart.

Show code

<div id="line-chart"></div>
<script type="module">
    import ApexCharts from 'apexcharts';
    const options = {
        series: [{
            name: 'Desktops',
            data: [10, 45, 65, 55, 95, 75, 95, 85, 145],
        }, ],
        chart: {
            height: 350,
            type: 'line',
            zoom: {
                enabled: false,
            },
            toolbar: {
                show: false,
            },
            fontFamily: themeConfig.theme.fontFamily.sans,
        },
        dataLabels: {
            enabled: false,
        },
        stroke: {
            width: 2,
            curve: 'smooth',
        },
        grid: {
            row: {
                colors: ['transparent'],
                opacity: 0.5,
            },
            borderColor: theme === 'dark' ? colors.slate['600'] : colors.slate['200'],
        },
        xaxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
            axisBorder: {
                color: theme === 'dark' ? colors.slate['600'] : colors.slate['200'],
            },
            axisTicks: {
                color: theme === 'dark' ? colors.slate['600'] : colors.slate['200'],
            },
        },
    };
    const chart = new ApexCharts(document.querySelector("#line-chart"), options);
    chart.render();
</script>

Area Chart

Example of a area chart.

Show code

<div id="area-chart"></div>
<script type="module">
    import ApexCharts from 'apexcharts';
    const options = {
        // ...... 
    };
    const chart = new ApexCharts(document.querySelector("#area-chart"), options);
    chart.render();
</script>

Column Chart

Example of a column chart.

Show code

<div id="column-chart"></div>
<script type="module">
    import ApexCharts from 'apexcharts';
    const options = {
        // ...... 
    };
    const chart = new ApexCharts(document.querySelector("#column-chart"), options);
    chart.render();
</script>

Bar Chart

Example of a bar chart.

Show code

<div id="bar-chart"></div>
<script type="module">
    import ApexCharts from 'apexcharts';
    const options = {
        // ...... 
    };
    const chart = new ApexCharts(document.querySelector("#bar-chart"), options);
    chart.render();
</script>

Scatter Chart

Example of a scatter chart.

Show code

<div id="scatter-chart"></div>
<script type="module">
    import ApexCharts from 'apexcharts';
    const options = {
        // ...... 
    };
    const chart = new ApexCharts(document.querySelector("#scatter-chart"), options);
    chart.render();
</script>

Pie Chart

Example of a pie chart.

Show code

<div id="pie-chart"></div>
<script type="module">
    import ApexCharts from 'apexcharts';
    const options = {
        // ...... 
    };
    const chart = new ApexCharts(document.querySelector("#pie-chart"), options);
    chart.render();
</script>

Donut Chart

Example of a donut chart.

Show code

<div id="donut-chart"></div>
<script type="module">
    import ApexCharts from 'apexcharts';
    const options = {
        // ...... 
    };
    const chart = new ApexCharts(document.querySelector("#donut-chart"), options);
    chart.render();
</script>

New order received

High CPU usage

Your order has been shipped

Something went wrong

Your order has been shipped

Line Chart

Area Chart

Column Chart

Bar Chart

Scatter Chart

Pie Chart

Donut Chart

Recent Searches