fmuin14

Cara membuat Chart dengan Chart.js

Halo, kali ini saya ingin sharing seputar cara membuat Chart menggunakan Chart.js

Chart.js itu apa, bisa langsung meluncur KESINI.

chart js

Chart js adalah salah satu library javacript yang sederhana, namun fleksibel untuk desainer dan pengembang web. 

Pada kesempatan kali ini, kita akan membuat chart menggunakan chart js, dan kita menggunakan CDN dari chart js. Kita akan membuat chart ini menggunakan HTML. Kali ini, saya akan mendemokan menggunakan text editor Visual Studio Code.

Masukkan CDN dari chart js dan CDN bootstrap ke dalam codingan HTML yang kita buat. CDN bootstrap kita gunakan untuk styling pada chart yang kita buat.

CDN chart js bisa kita dapatkan DISINI

CDN dari bootstrap bisa kita dapatkan DISINI

Silahkan ketik codingan kalian menjadi sebagai berikut.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <title>My Chart.js Chart</title>
</head>
<body>
    <div class="container">
        <canvas id="myChart"></canvas>
    </div>
    

    <script>
    let myChart = document.getElementById('myChart').getContext('2d');

    //Global Options
    Chart.defaults.global.defaultFontFamily = 'Lato';
    Chart.defaults.global.defaultFontSize = 18;
    Chart.defaults.global.defaultFontColor = '#777';

    let massPopChart = new Chart(myChart, {
        type: 'bar', //bar, horizontalBar, Pie, Line, Doughnut, Radar, polarArea
        data: {
            labels: ['Depok', 'Jakarta', 'Bekasi', 'Tangerang', 'Bogor', 'Batam'],
            datasets: [{
                label: 'Population',
                data: [
                    617594,
                    181045,
                    153060,
                    106519,
                    105162,
                    95072
                ],
                //backgroundColor: 'blue'
                backgroundColor: [
                    'blue',
                    'green',
                    'yellow',
                    'red',
                    'black',
                    'orange'
                ],
                borderWidth: 1,
                borderColor: '#777',
                hoverBorderWidth: 3,
                hoverBorderColor: '#000'
            }]
        },
        options: {
            title: {
                display: true,
                text:'Largest Cities In Indonesia',
                fontSize: 25
            },
            legend: {
                display: true,
                position: 'right',
                labels: {
                    fontColor: '#000'
                }
            },
            layout: {
                padding: {
                    left: 50,
                    right: 0,
                    bottom: 0,
                    top: 0
                }
            },
            tooltips: {
                enabled: true
            }
        }
    });
    </script>
</body>
</html>

Terlihat bahwa kita menaruh script CDN chart js dan CDN bootstrap berada pada <head> , 

Kita menamakan file dengan nama My Chart.js  Chart,

Kita membuat class container pada body, dengan canvas id myChart.

Setelah itu, menaruh codingan JavaScript di dalam tag <script> dengan menggunakan method getElementById lalu getContext,

lalu styling pada font di chart,

lalu memasukkan tipe chart yang ingin digunakan, dan memasukkan data populasi dari chart yang ingin kita buat.

Angka bisa sembarang dan di sesuaikan dengan data yang ingin dibuat. 

Lalu setting styling pada JavaScript, dan setelah di save dan run pada browser, maka hasilnya sebagai berikut:

Silahkan teman teman kostumisasi sendiri ya chartnya, silahkan di pelajari code nya. Sekian, dan terima kasih 🙂

Leave a comment