ChartJs

Bar Chart

Show Code 
  
<!-- Required JS-->
<script src="asset/plugin/chartjs/chart.js"></script> 

<!-- HTML-->
<canvas id="myBarChart"></canvas>

<!-- Script-->
var ctx2 = document.getElementById('myBarChart');
    var barChart = new Chart(ctx2, {
    type: 'bar',
    data: {
        labels: ['Jan','Feb','Mar','Apr','May','Jun'],
        datasets: [{
        label: 'Total Visitors',
        data: [37,31,36,34,43,31],
        backgroundColor:  '#1ab394',
        borderColor: '#1ab394',
        borderWidth: 1.5
        },{
        label: 'New Visitors',
        data: [12,16,20,14,23,21],
        backgroundColor: '#ebeff2',
        borderColor: '#ebeff2',
        borderWidth: 1.5
        }]
    }
});

Line Chart

Show Code 

<!-- Required JS-->
<script src="asset/plugin/chartjs/chart.js"></script> 

<!-- HTML-->
<canvas id="myLineChart"></canvas>

<!-- Script-->
var ctx = document.getElementById('myLineChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',

// The data for our dataset
data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
        label: 'Sales',
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgb(255, 99, 132)',
        data:[63,59,65,56,55,53,54]
    }]
},
});

Pie Chart

3598

Australia

1200

India

700

Canada

Show Code 

<!-- Required JS-->
<script src="asset/plugin/chartjs/chart.js"></script> 

<!-- HTML-->
<canvas id="myPieChart"></canvas>

<!-- Script-->
var ctxPie = document.getElementById('myPieChart').getContext('2d');
var myPieChart = new Chart(ctxPie, {
    type: "pie",
    data: {
    labels: ["Australia", "India", "Canada"],
    datasets: [{
        label: "My First Dataset",
        data: [360, 140,90],
        backgroundColor: ["#1ab394", "#3a94d8","#f0ad4e"]
    }]
}	
});

Donut Chart

4798

Desktop

3598

Mobile

1200

Tablet

Show Code 

<!-- Required JS-->
<script src="asset/plugin/chartjs/chart.js"></script> 

<!-- HTML-->
<canvas id="myDonutChart"></canvas>

<!-- Script-->
var ctxDonut = document.getElementById('myDonutChart').getContext('2d');

var myDonutChart = new Chart(ctxDonut, {
    type: "doughnut",
    data: {
    labels: ["Desktop", "Mobile", "Tablet"],
    datasets: [{
        label: "My First Dataset",
        data: [360, 140,90],
        backgroundColor: ["#1ab394", "#3a94d8","#f0ad4e"]
    }]
}	
});