Grafik scatter adalah salah satu jenis grafik yang digunakan untuk menunjukkan hubungan antara dua variabel. Grafik scatter terdiri dari titik-titik yang diposisikan di atas grid Cartesian, yang mewakili nilai-nilai X dan Y.

Pada artikel ini, kita akan membahas cara membuat grafik scatter dengan Chart.js, serta contoh-contohnya.

Contoh 1: Membuat Grafik Scatter Sederhana

Berikut adalah contoh sederhana untuk membuat grafik scatter dengan Chart.js:

const data = {
 datasets: [{
 label: 'Dataset 1',
 data: [{x:1, y:12}, {x:2, y:3}, {x:3, y:2}, {x:4, y:1}, {x:5, y:8}, {x:6, y:8}, {x:7, y:2}, {x:8, y:2}, {x:9, y:3}, {x:10, y:5}, {x:11, y:7}, {x:12, y:1}]
 }]
}

const config = {
 type: 'scatter',
 data,
 options: {
 responsive: true
 }
}

const $canvas = document.getElementById('chart')
const chart = new Chart($canvas, config)

Dalam contoh di atas, kita menggunakan objek data untuk mendefinisikan dataset yang akan digunakan untuk membuat grafik. Kemudian, kita mengatur opsi type menjadi 'scatter', serta opsi responsive menjadi true untuk memungkinkan chart beradaptasi dengan ukuran layar.

Contoh 2: Membuat Grafik Scatter dengan Axis Time

Berikut adalah contoh lain untuk membuat grafik scatter dengan axis time:

var test = [
 { x: "2022-1-8", y: 950 },
 { x: "2022-1-9", y: 1100 },
 { x: "2022-1-10", y: 990 },
 { x: "2022-1-12", y: 1250 },
 { x: "2022-1-13", y: 1050 }
];

var chart = new Chart('chart-line', {
 type: 'scatter',
 data: {
 datasets: [{
 data: test,
 label: 'buys',
 borderColor: "#3e95cd"
 }]
 },
 options: {
 responsive: false,
 scales: {
 x: { 
 type: 'time',
 time: {
 parser: 'YYYY-M-D',
 unit: 'day',
 displayFormats: {
 day: 'D MMM YYYY'
 },
 tooltipFormat: 'D MMM YYYY'
 }
 }
 }
 }
});

Dalam contoh di atas, kita menggunakan objek test untuk mendefinisikan dataset yang akan digunakan untuk membuat grafik. Kemudian, kita mengatur opsi type menjadi 'scatter', serta opsi responsive menjadi false untuk memungkinkan chart tidak beradaptasi dengan ukuran layar. Selain itu, kita juga mengatur axis time dengan menggunakan opsi scales dan x.

Contoh 3: Membuat Grafik Scatter dengan Multiple Dataset

Berikut adalah contoh lain untuk membuat grafik scatter dengan multiple dataset:

const data = {
 labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
 datasets: [{
 label: 'Dataset 1',
 data: [{x:1, y:12}, {x:2, y:3}, {x:3, y:2}, {x:4, y:1}, {x:5, y:8}, {x:6, y:8}, {x:7, y:2}, {x:8, y:2}, {x:9, y:3}, {x:10, y:5}, {x:11, y:7}, {x:12, y:1}]
 }]
}

const config = {
 type: 'scatter',
 data,
 options: {
 responsive: true,
 maintainAspectRatio: false,
 },
}

const $canvas = document.getElementById('chart')
const chart = new Chart($canvas, config)

Dalam contoh di atas, kita menggunakan objek data untuk mendefinisikan multiple dataset yang akan digunakan untuk membuat grafik. Kemudian, kita mengatur opsi type menjadi 'scatter', serta opsi responsive dan maintainAspectRatio menjadi true dan false untuk memungkinkan chart beradaptasi dengan ukuran layar.

Dalam artikel ini, kita telah membahas cara membuat grafik scatter dengan Chart.js. Kita juga telah melihat beberapa contoh-contoh yang dapat Anda gunakan sebagai referensi.