Documentation v8.0.15

Overview

ApexChartsis loaded with powerful features to fulfill your data-visualization needs. For more info, please visit the plugin's site

Usage

ApexCharts' CSS and Javascript files are bundled in the global style and scripts bundles and are globally included in all pages:

<link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css"/>
<script src="assets/js/scripts.bundle.js"></script>

Column Chart

Simply define a blank divwith a unique idin your HTML markup. Then initialize the chart via javascript.

JAVASCRIPT
HTML

var element = document.getElementById('kt_apexcharts_1');

var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
var borderColor = KTUtil.getCssVariableValue('--bs-gray-200');
var baseColor = KTUtil.getCssVariableValue('--bs-primary');
var secondaryColor = KTUtil.getCssVariableValue('--bs-gray-300');

if (!element) {
    return;
}

var options = {
    series: [{
        name: 'Net Profit',
        data: [44, 55, 57, 56, 61, 58]
    }, {
        name: 'Revenue',
        data: [76, 85, 101, 98, 87, 105]
    }],
    chart: {
        fontFamily: 'inherit',
        type: 'bar',
        height: height,
        toolbar: {
            show: false
        }
    },
    plotOptions: {
        bar: {
            horizontal: false,
            columnWidth: ['30%'],
            endingShape: 'rounded'
        },
    },
    legend: {
        show: false
    },
    dataLabels: {
        enabled: false
    },
    stroke: {
        show: true,
        width: 2,
        colors: ['transparent']
    },
    xaxis: {
        categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
        axisBorder: {
            show: false,
        },
        axisTicks: {
            show: false
        },
        labels: {
            style: {
                colors: labelColor,
                fontSize: '12px'
            }
        }
    },
    yaxis: {
        labels: {
            style: {
                colors: labelColor,
                fontSize: '12px'
            }
        }
    },
    fill: {
        opacity: 1
    },
    states: {
        normal: {
            filter: {
                type: 'none',
                value: 0
            }
        },
        hover: {
            filter: {
                type: 'none',
                value: 0
            }
        },
        active: {
            allowMultipleDataPointsSelection: false,
            filter: {
                type: 'none',
                value: 0
            }
        }
    },
    tooltip: {
        style: {
            fontSize: '12px'
        },
        y: {
            formatter: function (val) {
                return '$' + val + ' thousands'
            }
        }
    },
    colors: [baseColor, secondaryColor],
    grid: {
        borderColor: borderColor,
        strokeDashArray: 4,
        yaxis: {
            lines: {
                show: true
            }
        }
    }
};

var chart = new ApexCharts(element, options);
chart.render();

<div class="card card-bordered">
    <div class="card-body">
        <div id="kt_apexcharts_1" style="height: 350px;"></div>
    </div>
</div>

Bar Chart

Simply define a blank divwith a unique idin your HTML markup. Then initialize the chart via javascript.

JAVASCRIPT
HTML

var element = document.getElementById('kt_apexcharts_1');

var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
var borderColor = KTUtil.getCssVariableValue('--bs-gray-200');
var baseColor = KTUtil.getCssVariableValue('--bs-warning');
var secondaryColor = KTUtil.getCssVariableValue('--bs-gray-300');

if (!element) {
    return;
}

var options = {
    series: [{
        name: 'Net Profit',
        data: [44, 55, 57, 56, 61, 58]
    }, {
        name: 'Revenue',
        data: [76, 85, 101, 98, 87, 105]
    }],
    chart: {
        fontFamily: 'inherit',
        type: 'bar',
        height: height,
        toolbar: {
            show: false
        }
    },
    plotOptions: {
        bar: {
            horizontal: true,
            columnWidth: ['30%'],
            endingShape: 'rounded'
        },
    },
    legend: {
        show: false
    },
    dataLabels: {
        enabled: false
    },
    stroke: {
        show: true,
        width: 2,
        colors: ['transparent']
    },
    xaxis: {
        categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
        axisBorder: {
            show: false,
        },
        axisTicks: {
            show: false
        },
        labels: {
            style: {
                colors: labelColor,
                fontSize: '12px'
            }
        }
    },
    yaxis: {
        labels: {
            style: {
                colors: labelColor,
                fontSize: '12px'
            }
        }
    },
    fill: {
        opacity: 1
    },
    states: {
        normal: {
            filter: {
                type: 'none',
                value: 0
            }
        },
        hover: {
            filter: {
                type: 'none',
                value: 0
            }
        },
        active: {
            allowMultipleDataPointsSelection: false,
            filter: {
                type: 'none',
                value: 0
            }
        }
    },
    tooltip: {
        style: {
            fontSize: '12px'
        },
        y: {
            formatter: function (val) {
                return '$' + val + ' thousands'
            }
        }
    },
    colors: [baseColor, secondaryColor],
    grid: {
        borderColor: borderColor,
        strokeDashArray: 4,
        yaxis: {
            lines: {
                show: true
            }
        }
    }
};

var chart = new ApexCharts(element, options);
chart.render();

<div class="card card-bordered">
    <div class="card-body">
        <div id="kt_apexcharts_2" style="height: 350px;"></div>
    </div>
</div>

Line Chart

Simply define a blank divwith a unique idin your HTML markup. Then initialize the chart via javascript.

JAVASCRIPT
HTML

var element = document.getElementById('kt_apexcharts_3');

var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
var borderColor = KTUtil.getCssVariableValue('--bs-gray-200');
var baseColor = KTUtil.getCssVariableValue('--bs-info');
var lightColor = KTUtil.getCssVariableValue('--bs-light-info');

if (!element) {
    return;
}

var options = {
    series: [{
        name: 'Net Profit',
        data: [30, 40, 40, 90, 90, 70, 70]
    }],
    chart: {
        fontFamily: 'inherit',
        type: 'area',
        height: height,
        toolbar: {
            show: false
        }
    },
    plotOptions: {

    },
    legend: {
        show: false
    },
    dataLabels: {
        enabled: false
    },
    fill: {
        type: 'solid',
        opacity: 1
    },
    stroke: {
        curve: 'smooth',
        show: true,
        width: 3,
        colors: [baseColor]
    },
    xaxis: {
        categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
        axisBorder: {
            show: false,
        },
        axisTicks: {
            show: false
        },
        labels: {
            style: {
                colors: labelColor,
                fontSize: '12px'
            }
        },
        crosshairs: {
            position: 'front',
            stroke: {
                color: baseColor,
                width: 1,
                dashArray: 3
            }
        },
        tooltip: {
            enabled: true,
            formatter: undefined,
            offsetY: 0,
            style: {
                fontSize: '12px'
            }
        }
    },
    yaxis: {
        labels: {
            style: {
                colors: labelColor,
                fontSize: '12px'
            }
        }
    },
    states: {
        normal: {
            filter: {
                type: 'none',
                value: 0
            }
        },
        hover: {
            filter: {
                type: 'none',
                value: 0
            }
        },
        active: {
            allowMultipleDataPointsSelection: false,
            filter: {
                type: 'none',
                value: 0
            }
        }
    },
    tooltip: {
        style: {
            fontSize: '12px'
        },
        y: {
            formatter: function (val) {
                return '$' + val + ' thousands'
            }
        }
    },
    colors: [lightColor],
    grid: {
        borderColor: borderColor,
        strokeDashArray: 4,
        yaxis: {
            lines: {
                show: true
            }
        }
    },
    markers: {
        strokeColor: baseColor,
        strokeWidth: 3
    }
};

var chart = new ApexCharts(element, options);
chart.render();

<div class="card card-bordered">
    <div class="card-body">
        <div id="kt_apexcharts_3" style="height: 350px;"></div>
    </div>
</div>

Multiline Chart

Simply define a blank divwith a unique idin your HTML markup. Then initialize the chart via javascript.

JAVASCRIPT
HTML

var element = document.getElementById('kt_apexcharts_4');

var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
var borderColor = KTUtil.getCssVariableValue('--bs-gray-200');

var baseColor = KTUtil.getCssVariableValue('--bs-success');
var baseLightColor = KTUtil.getCssVariableValue('--bs-light-success');
var secondaryColor = KTUtil.getCssVariableValue('--bs-warning');
var secondaryLightColor = KTUtil.getCssVariableValue('--bs-light-warning');

if (!element) {
    return;
}

var options = {
    series: [{
        name: 'Net Profit',
        data: [60, 50, 80, 40, 100, 60]
    }, {
        name: 'Revenue',
        data: [70, 60, 110, 40, 50, 70]
    }],
    chart: {
        fontFamily: 'inherit',
        type: 'area',
        height: height,
        toolbar: {
            show: false
        }
    },
    plotOptions: {},
    legend: {
        show: false
    },
    dataLabels: {
        enabled: false
    },
    fill: {
        type: 'solid',
        opacity: 1
    },
    stroke: {
        curve: 'smooth'
    },
    xaxis: {
        categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
        axisBorder: {
            show: false,
        },
        axisTicks: {
            show: false
        },
        labels: {
            style: {
                colors: labelColor,
                fontSize: '12px'
            }
        },
        crosshairs: {
            position: 'front',
            stroke: {
                color: labelColor,
                width: 1,
                dashArray: 3
            }
        },
        tooltip: {
            enabled: true,
            formatter: undefined,
            offsetY: 0,
            style: {
                fontSize: '12px'
            }
        }
    },
    yaxis: {
        labels: {
            style: {
                colors: labelColor,
                fontSize: '12px'
            }
        }
    },
    states: {
        normal: {
            filter: {
                type: 'none',
                value: 0
            }
        },
        hover: {
            filter: {
                type: 'none',
                value: 0
            }
        },
        active: {
            allowMultipleDataPointsSelection: false,
            filter: {
                type: 'none',
                value: 0
            }
        }
    },
    tooltip: {
        style: {
            fontSize: '12px'
        },
        y: {
            formatter: function (val) {
                return '$' + val + ' thousands'
            }
        }
    },
    colors: [baseColor, secondaryColor],
    grid: {
        borderColor: borderColor,
        strokeDashArray: 4,
        yaxis: {
            lines: {
                show: true
            }
        }
    },
    markers: {
        colors: [baseLightColor, secondaryLightColor],
        strokeColor: [baseLightColor, secondaryLightColor],
        strokeWidth: 3
    }
};

var chart = new ApexCharts(element, options);
chart.render();

<div class="card card-bordered">
    <div class="card-body">
        <div id="kt_apexcharts_4" style="height: 350px;"></div>
    </div>
</div>

Mixed Chart

Simply define a blank divwith a unique idin your HTML markup. Then initialize the chart via javascript.

JAVASCRIPT
HTML

var element = document.getElementById('kt_apexcharts_5');

var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
var borderColor = KTUtil.getCssVariableValue('--bs-gray-200');

var baseColor = KTUtil.getCssVariableValue('--bs-primary');
var baseLightColor = KTUtil.getCssVariableValue('--bs-light-primary');
var secondaryColor = KTUtil.getCssVariableValue('--bs-info');

if (!element) {
    return;
}

var options = {
    series: [{
        name: 'Net Profit',
        type: 'bar',
        stacked: true,
        data: [40, 50, 65, 70, 50, 30]
    }, {
        name: 'Revenue',
        type: 'bar',
        stacked: true,
        data: [20, 20, 25, 30, 30, 20]
    }, {
        name: 'Expenses',
        type: 'area',
        data: [50, 80, 60, 90, 50, 70]
    }],
    chart: {
        fontFamily: 'inherit',
        stacked: true,
        height: height,
        toolbar: {
            show: false
        }
    },
    plotOptions: {
        bar: {
            stacked: true,
            horizontal: false,
            endingShape: 'rounded',
            columnWidth: ['12%']
        },
    },
    legend: {
        show: false
    },
    dataLabels: {
        enabled: false
    },
    stroke: {
        curve: 'smooth',
        show: true,
        width: 2,
        colors: ['transparent']
    },
    xaxis: {
        categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
        axisBorder: {
            show: false,
        },
        axisTicks: {
            show: false
        },
        labels: {
            style: {
                colors: labelColor,
                fontSize: '12px'
            }
        }
    },
    yaxis: {
        max: 120,
        labels: {
            style: {
                colors: labelColor,
                fontSize: '12px'
            }
        }
    },
    fill: {
        opacity: 1
    },
    states: {
        normal: {
            filter: {
                type: 'none',
                value: 0
            }
        },
        hover: {
            filter: {
                type: 'none',
                value: 0
            }
        },
        active: {
            allowMultipleDataPointsSelection: false,
            filter: {
                type: 'none',
                value: 0
            }
        }
    },
    tooltip: {
        style: {
            fontSize: '12px'
        },
        y: {
            formatter: function (val) {
                return '$' + val + ' thousands'
            }
        }
    },
    colors: [baseColor, secondaryColor, baseLightColor],
    grid: {
        borderColor: borderColor,
        strokeDashArray: 4,
        yaxis: {
            lines: {
                show: true
            }
        },
        padding: {
            top: 0,
            right: 0,
            bottom: 0,
            left: 0
        }
    }
};

var chart = new ApexCharts(element, options);
chart.render();

<div class="card card-bordered">
    <div class="card-body">
        <div id="kt_apexcharts_5" style="height: 350px;"></div>
    </div>
</div>

Timeline Chart

Simply define a blank divwith a unique idin your HTML markup. Then initialize the chart via javascript.

JAVASCRIPT
HTML

var element = document.getElementById('kt_apexcharts_6');

var height = parseInt(KTUtil.css(element, 'height'));

var baseColor = KTUtil.getCssVariableValue('--bs-primary');
var baseLightColor = KTUtil.getCssVariableValue('--bs-success');
var secondaryColor = KTUtil.getCssVariableValue('--bs-info');

if (!element) {
    return;
}

var options = {
    series: [
        {
            name: 'Bob',
            data: [
                {
                    x: 'Design',
                    y: [
                        new Date('2019-03-05').getTime(),
                        new Date('2019-03-08').getTime()
                    ]
                },
                {
                    x: 'Code',
                    y: [
                        new Date('2019-03-02').getTime(),
                        new Date('2019-03-05').getTime()
                    ]
                },
                {
                    x: 'Code',
                    y: [
                        new Date('2019-03-05').getTime(),
                        new Date('2019-03-07').getTime()
                    ]
                },
                {
                    x: 'Test',
                    y: [
                        new Date('2019-03-03').getTime(),
                        new Date('2019-03-09').getTime()
                    ]
                },
                {
                    x: 'Test',
                    y: [
                        new Date('2019-03-08').getTime(),
                        new Date('2019-03-11').getTime()
                    ]
                },
                {
                    x: 'Validation',
                    y: [
                        new Date('2019-03-11').getTime(),
                        new Date('2019-03-16').getTime()
                    ]
                },
                {
                    x: 'Design',
                    y: [
                        new Date('2019-03-01').getTime(),
                        new Date('2019-03-03').getTime()
                    ]
                }
            ]
        },
        {
            name: 'Joe',
            data: [
                {
                    x: 'Design',
                    y: [
                        new Date('2019-03-02').getTime(),
                        new Date('2019-03-05').getTime()
                    ]
                },
                {
                    x: 'Test',
                    y: [
                        new Date('2019-03-06').getTime(),
                        new Date('2019-03-16').getTime()
                    ]
                },
                {
                    x: 'Code',
                    y: [
                        new Date('2019-03-03').getTime(),
                        new Date('2019-03-07').getTime()
                    ]
                },
                {
                    x: 'Deployment',
                    y: [
                        new Date('2019-03-20').getTime(),
                        new Date('2019-03-22').getTime()
                    ]
                },
                {
                    x: 'Design',
                    y: [
                        new Date('2019-03-10').getTime(),
                        new Date('2019-03-16').getTime()
                    ]
                }
            ]
        },
        {
            name: 'Dan',
            data: [
                {
                    x: 'Code',
                    y: [
                        new Date('2019-03-10').getTime(),
                        new Date('2019-03-17').getTime()
                    ]
                },
                {
                    x: 'Validation',
                    y: [
                        new Date('2019-03-05').getTime(),
                        new Date('2019-03-09').getTime()
                    ]
                },
            ]
        }
    ],
    chart: {
        type: 'rangeBar',
        fontFamily: 'inherit',
        height: height,
        toolbar: {
            show: false
        }
    },
    colors: [baseColor, secondaryColor, baseLightColor],
    plotOptions: {
        bar: {
            horizontal: true,
            barHeight: '80%'
        }
    },
    xaxis: {
        type: 'datetime'
    },
    stroke: {
        width: 1
    },
    fill: {
        type: 'solid',
        opacity: 1
    },
    legend: {
        position: 'top',
        horizontalAlign: 'left'
    }
};

var chart = new ApexCharts(element, options);
chart.render();

<div class="card card-bordered">
    <div class="card-body">
        <div id="kt_apexcharts_6" style="height: 350px;"></div>
    </div>
</div>

Activity Logs

There are 2 new tasks for you in “AirPlus Mobile APp” project:

Added at 4:23 PM by

Meeting with customer

Application Design

A

In Progress

View

Project Delivery Preparation

CRM System Development

B

Completed

View

Invitation for crafting engaging designs that speak human workshop

Sent at 4:23 PM by

3 New Incoming Project Files:

Sent at 10:30 PM by

Finance KPI App Guidelines

1.9mb

Client UAT Testing Results

18kb

Finance Reports

20mb

Task #45890merged with #45890in “Ads Pro Admin Dashboard project:

Initiated at 4:23 PM by

3 new application design concepts added:

Created at 4:23 PM by

Explore

Explore

Explore

New case #67890is assigned to you in Multi-platform Database Design project

Added at 4:23 PM by

Alice Tan

You have received a new order:

Placed at 5:05 AM by

Database Backup Process Completed!

Login into Metronic Admin Dashboard to make sure the data integrity is OK

Proceed

New order #67890is placed for Workshow Planning & Budget Estimation

Placed at 4:23 PM by

Jimmy Bold

View All Activities

Brian Cox

Active

Brian Cox 2 mins

How likely are you to recommend our company to your friends and family ?

5 mins You

Hey there, we’re just writing to let you know that you’ve been subscribed to a repository on GitHub.

Brian Cox 1 Hour

Ok, Understood!

2 Hours You

You’ll receive notifications for all issues, pull requests!

Brian Cox 3 Hours

You can unwatch this repository immediately by clicking here: Keenthemes.com

4 Hours You

Most purchased Business courses during this sale!

Brian Cox 5 Hours

Company BBQ to celebrate the last quater achievements and goals. Food and drinks provided

Explore Metronic

Demo1

demo

Preview

Demo2

demo

Preview

Demo3

demo

Coming soon

Demo4

demo

Coming soon

Demo5

demo

Preview

Demo6

demo

Coming soon

Demo7

demo

Coming soon

Demo8

demo

Coming soon

Demo9

demo

Coming soon

Demo10

demo

Coming soon

Demo11

demo

Coming soon

Demo12

demo

Coming soon

Demo13

demo

Coming soon

Demo14

demo

Coming soon

Demo15

demo

Coming soon

Purchase Metronic