Scatter chart adalah salah satu jenis grafik yang paling populer dan mudah digunakan dalam Chart.js. Dalam artikel ini, kita akan membahas cara menggunakan scatter chartjs untuk membuat grafik scatter.

Dataset Properties Namespaces

Sebelum kita memulai, perlu Anda ketahui bahwa scatter chartjs memiliki beberapa properti dataset yang penting untuk diatur. Berikut adalah beberapa properti tersebut:

• data: Berisi data yang akan digunakan untuk membuat grafik.
• options: Berisi opsi yang dapat diatur untuk mengontrol appearance dan behavior grafik.
• scales: Berisi skala-x dan skala-y yang akan digunakan untuk membuat grafik.

Contoh Penggunaan

Berikut adalah contoh penggunaan scatter chartjs:

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'
 }
 }
 }
 }
});

Fitur

Scatter chartjs memiliki beberapa fitur yang menarik, seperti:

• Responsive: Grafik dapat diatur untuk menjadi responsif dan dapat berubah ukuran sesuai dengan perubahan ukuran layar.
• MantainAspectRatio: Grafik dapat diatur untuk mempertahankan aspek rasio yang sama ketika ukuran layar berubah.
• Scales: Grafik dapat diatur untuk memiliki skala-x dan skala-y yang dapat disesuaikan dengan kebutuhan.

Contoh Lengkap

Berikut adalah contoh lengkap penggunaan scatter chartjs:

<div class="wrapper" style="width: 98vw; height:180px">
 <canvas id="chart"></canvas>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>

Dalam contoh di atas, kita menggunakan scatter chartjs untuk membuat grafik scatter yang menunjukkan data penjualan buah dalam beberapa bulan. Grafik tersebut dapat disesuaikan dengan kebutuhan dengan mengatur opsi responsif dan maintain aspect ratio.

Saya harap artikel ini telah membantu Anda memahami cara menggunakan scatter chartjs untuk membuat grafik scatter yang menarik!