Documentation v8.0.15

Overview

ChartJSis a simple yet flexible JavaScript charting for designers & developers. For more info please visit the plugin's Homeor Github Repo.

Usage

ChartJS's 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>

Bar Chart

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

JAVASCRIPT
HTML

var ctx = document.getElementById('kt_chartjs_1');

// Define colors
var primaryColor = KTUtil.getCssVariableValue('--bs-primary');
var dangerColor = KTUtil.getCssVariableValue('--bs-danger');
var successColor = KTUtil.getCssVariableValue('--bs-success');

// Define fonts
var fontFamily = KTUtil.getCssVariableValue('--bs-font-sans-serif');

// Chart labels
const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

// Chart data
const data = {
    labels: labels,
    datasets: [
        ...
    ]
};

// Chart config
const config = {
    type: 'bar',
    data: data,
    options: {
        plugins: {
            title: {
                display: false,
            }
        },
        responsive: true,
        interaction: {
            intersect: false,
        },
        scales: {
            x: {
                stacked: true,
            },
            y: {
                stacked: true
            }
        }
    },
    defaults:{
        global: {
            defaultFont: fontFamily
        }
    }
};

// Init ChartJS -- for more info, please visit: https://www.chartjs.org/docs/latest/
var myChart = new Chart(ctx, config);

<canvas id="kt_chartjs_1" class="mh-400px"></canvas>

Line Chart

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

JAVASCRIPT
HTML

var ctx = document.getElementById('kt_chartjs_2');

// Define colors
var primaryColor = KTUtil.getCssVariableValue('--bs-primary');
var dangerColor = KTUtil.getCssVariableValue('--bs-danger');

// Define fonts
var fontFamily = KTUtil.getCssVariableValue('--bs-font-sans-serif');

// Chart labels
const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];

// Chart data
const data = {
    labels: labels,
    datasets: [
        ...
    ]
};

// Chart config
const config = {
    type: 'bar',
    data: data,
    options: {
        plugins: {
            title: {
                display: false,
            }
        },
        responsive: true,
    },
    defaults:{
        global: {
            defaultFont: fontFamily
        }
    }
};

// Init ChartJS -- for more info, please visit: https://www.chartjs.org/docs/latest/
var myChart = new Chart(ctx, config);

<canvas id="kt_chartjs_2" class="mh-400px"></canvas>

Pie Chart

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

JAVASCRIPT
HTML

var ctx = document.getElementById('kt_chartjs_3');

// Define colors
var primaryColor = KTUtil.getCssVariableValue('--bs-primary');
var dangerColor = KTUtil.getCssVariableValue('--bs-danger');
var successColor = KTUtil.getCssVariableValue('--bs-success');
var warningColor = KTUtil.getCssVariableValue('--bs-warning');
var infoColor = KTUtil.getCssVariableValue('--bs-info');

// Define fonts
var fontFamily = KTUtil.getCssVariableValue('--bs-font-sans-serif');

// Chart labels
const labels = ['January', 'February', 'March', 'April', 'May'];

// Chart data
const data = {
    labels: labels,
    datasets: [
        ...
    ]
};

// Chart config
const config = {
    type: 'pie',
    data: data,
    options: {
        plugins: {
            title: {
                display: false,
            }
        },
        responsive: true,
    },
    defaults:{
        global: {
            defaultFont: fontFamily
        }
    }
};

// Init ChartJS -- for more info, please visit: https://www.chartjs.org/docs/latest/
var myChart = new Chart(ctx, config);

<canvas id="kt_chartjs_3" class="mh-400px"></canvas>

Stacked Bar & Line Chart

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

JAVASCRIPT
HTML

var ctx = document.getElementById('kt_chartjs_4');

// Define colors
var primaryColor = KTUtil.getCssVariableValue('--bs-primary');
var dangerColor = KTUtil.getCssVariableValue('--bs-danger');
var dangerLightColor = KTUtil.getCssVariableValue('--bs-light-danger');

// Define fonts
var fontFamily = KTUtil.getCssVariableValue('--bs-font-sans-serif');

// Chart labels
const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

// Chart data
const data = {
    labels: labels,
    datasets: [
        ...
    ]
};

// Chart config
const config = {
    type: 'line',
    data: data,
    options: {
        plugins: {
            title: {
                display: false,
            },
            legend: {
                labels: {
                    // This more specific font property overrides the global property
                    font: {
                        size: 15,
                        family: fontFamily
                    }
                }
            }
        },
        responsive: true,
        interaction: {
            intersect: false,
        },
        scales: {
            y: {
                stacked: true
            }
        }
    },
    defaults:{
        global: {
            defaultFont: fontFamily
        }
    }
};

// Init ChartJS -- for more info, please visit: https://www.chartjs.org/docs/latest/
var myChart = new Chart(ctx, config);

<canvas id="kt_chartjs_4" class="mh-400px"></canvas>

Radar Chart

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

JAVASCRIPT
HTML

var ctx = document.getElementById('kt_chartjs_5');

// Define colors
var infoColor = KTUtil.getCssVariableValue('--bs-info');
var infoLightColor = KTUtil.getCssVariableValue('--bs-light-info');
var warningColor = KTUtil.getCssVariableValue('--bs-warning');
var warningLightColor = KTUtil.getCssVariableValue('--bs-light-warning');
var primaryColor = KTUtil.getCssVariableValue('--bs-primary');
var primaryLightColor = KTUtil.getCssVariableValue('--bs-light-primary');

// Define fonts
var fontFamily = KTUtil.getCssVariableValue('--bs-font-sans-serif');

// Chart labels
const labels = ['January', 'February', 'March', 'April', 'May', 'June'];

// Chart data
const data = {
    labels: labels,
    datasets: [
        ...
    ]
};

// Chart config
const config = {
    type: 'pie',
    data: data,
    options: {
        plugins: {
            title: {
                display: false,
            },
            legend: {
                labels: {
                    // This more specific font property overrides the global property
                    font: {
                        size: 15,
                        family: fontFamily
                    }
                }
            }
        },
        responsive: true,
    },
    defaults:{
        global: {
            defaultFont: fontFamily
        }
    }
};

// Init ChartJS -- for more info, please visit: https://www.chartjs.org/docs/latest/
var myChart = new Chart(ctx, config);

<canvas id="kt_chartjs_5" class="mh-400px"></canvas>

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