Membuat chart tidak jauh berbeda dengan dokumentasi Chart Js, namun kamu perlu tag <div> atau <section> dengan class .chart, didalamnya ada dua bagian yaitu Chart Header (tempat judul dari chart) dan Chart Body (tempat chart). Untuk membuat Chart Header, kamu perlu membuat element menggunakan tag <div> dengan class .chart__header, dan letakkan judul dari chart didalamnya menggunakan tag <h6>. Untuk membuat Chart Body kamu perlu membuat element menggunakan tag <div> dengan class .chart__body, didalamnya letakkan code untuk chart, dan letakkan Chart Body dibawah Chart Header. Standar tinggi dari chart adalah 350px, kamu juga bisa mengaturnya dengan menggunakan attribute height pada tag canvas.

Jika kamu belum pernah menggunakan Chart js sebelumnya, saya sarankan untuk membaca dokumentasi dari Chart js!. Disana sudah dijelaskan dengan detail. Jika kamu sebelumnya pernah mempelajari cara membuat Main pada menu Tata Letak > Main, kamu bisa meletakkan Chart didalam grid sistem Bootstrap, dan tanpa harus meletakkan Chart didalam Box.

Area Chart

CopyHTML
<section class="chart">
    <div class="chart__header">
        <h6>Pengunjung, Januari 2020</h6>
    </div>
    <div class="chart__body">
        <canvas id="area_chart"></canvas>
    </div>
</section>

CopyJavascript
// Area Chart
const areaChart = document.querySelector("#area_chart").getContext('2d');
let configAreaChart = {
    type: 'line',
    data: {
        labels: ['Ahad, 11','Senin, 12','Selasa, 13','Rabu, 14','Kamis, 15','Jum\'at, 16'],
        datasets: [{
            label: 'Pengunjung',
            data: [10,6,7,5,1,14],
            fill: 'origin',
            backgroundColor: 'rgba(37,151,224,.7)',
            borderColor: '#2597e0'
        }]
    },
    options: {
        maintainAspectRatio: false,
        legend: {
            display: false
        },
        tooltips: {
            titleFontFamily: 'sans-serif',
            bodyFontFamily: 'sans-serif',
            backgroundColor: '#fff',
            titleFontColor: '#333',
            bodyFontColor: '#333',
            borderColor: '#e2e2e2',
            borderWidth: '1',
        }
    }
}
new Chart(areaChart, configAreaChart);

Pie Chart

CopyHTML
<section class="chart">
    <div class="chart__header">
        <h6>Pemakaian Browser, Januari 2020</h6>
    </div>
    <div class="chart__body">
        <canvas id="pie_chart"></canvas>
    </div>
</section>

CopyJavascript
// Pie Chart
const pieChart = document.querySelector("#pie_chart").getContext('2d');
let configPieChart = {
    type: 'pie',
    data: {
        labels: ['Chrome','Mozilla','Uc Browser','Opera Mini'],
        datasets: [{
            data: [10,6,7,5],
            backgroundColor: [
                "#1bd741",
                "#2597e0",
                "#f9a022",
                "#dd2525"
            ]
        }]
    },
    options: {
        maintainAspectRatio: false,
        responsive: true,
        legend: {
            display: true
        },
        tooltips: {
            titleFontFamily: 'sans-serif',
            bodyFontFamily: 'sans-serif',
            backgroundColor: '#fff',
            titleFontColor: '#333',
            bodyFontColor: '#333',
            borderColor: '#e2e2e2',
            borderWidth: '1',
        }
    }
}
new Chart(pieChart, configPieChart);

Bar Chart

CopyHTML
<section class="chart">
    <div class="chart__header">
        <h6>Pengunjung 2020</h6>
    </div>
    <div class="chart__body">
        <canvas id="bar_chart"></canvas>
    </div>                                
</section>

CopyJavascript
// Bar Chart
const barChart = document.querySelector("#bar_chart").getContext('2d');
let configBarChart = {
    type: 'bar',
    data: {
        labels: ['Januari','Februari','Maret','April','Mai','Juni'],
        datasets: [{
            data: [20,30,15,40,70,60],
            backgroundColor: "#2597e0"
        }]
    },
    options: {
        maintainAspectRatio: false,
        legend: {
            display: false
        },
        tooltips: {
            titleFontFamily: 'sans-serif',
            bodyFontFamily: 'sans-serif',
            backgroundColor: '#fff',
            titleFontColor: '#333',
            bodyFontColor: '#333',
            borderColor: '#e2e2e2',
            borderWidth: '1',
        }
    }
}
new Chart(barChart, configBarChart);

Doughnut Chart

CopyHTML
<section class="chart">
    <div class="chart__header">
        <h6>Pemakaian browser, Januari 2020</h6>
    </div>
    <div class="chart__body">
        <canvas id="doughnut_chart"></canvas>
    </div>
</section>

CopyJavascript
// Doughnut Chart
const doughnutChart = document.querySelector("#doughnut_chart").getContext('2d');
let configDoughnutChart = {
    type: 'doughnut',
    data: {
        labels: ['Mozilla','Chrome','Uc Browser','Opera Mini'],
        datasets: [{
            data: [20,15,7,10],
            backgroundColor: [
                "#2597e0",
                "#1bd741",
                "#f9a022",
                "#dd2525"
            ]
        }]
    },
    options: {
        maintainAspectRatio: false,
        legend: {
            display: true
        },
        tooltips: {
            titleFontFamily: 'sans-serif',
            bodyFontFamily: 'sans-serif',
            backgroundColor: '#fff',
            titleFontColor: '#333',
            bodyFontColor: '#333',
            borderColor: '#e2e2e2',
            borderWidth: '1',
        }
    }
}
new Chart(doughnutChart, configDoughnutChart);