Tulisan Artikel
October 27, 2024 ,

Tulisan Artikel

Menggambarkan Grafik Scatter dengan Tooltip yang Berbeda-Beda

Dalam pengembangan grafik, salah satu fitur penting adalah tooltip. Dengan menggunakan tooltip, kita dapat menampilkan informasi tambahan tentang data yang digrafikan. Namun, bagaimana jika kita ingin menampilkan informasi yang berbeda-beda untuk beberapa titik dalam grafik scatter?

Dalam contoh di atas, kita akan membahas cara membuat tooltip yang berbeda-beda untuk beberapa titik dalam grafik scatter.

Menggambarkan Grafik Scatter dengan Tooltip yang Berbeda-Beda

Pertama-tama, kita perlu memahami bagaimana Highcharts bekerja. Dalam Highcharts, kita dapat membuat grafik scatter dengan menggunakan fungsi Highcharts.chart() dan menentukan parameter-nya, seperti titik-titik data dan nama series.

Berikut adalah contoh kode yang digunakan untuk membuat grafik scatter:

Highcharts.chart('container', {
 chart: {
 type: 'scatter',
 zoomType: 'x'
 },
 title: {
 text: 'Grafik Scatter'
 },
 xAxis: {
 type: 'category'
 },
 yAxis: {
 min: 0,
 max: 10
 },
 series: [{
 data: [[1, 2], [3, 4], [5, 6]]
 }]
});

Kita dapat membuat tooltip dengan menggunakan fungsi tooltip dan menentukan formatnya.

Menggambarkan Tooltip yang Berbeda-Beda

Untuk membuat tooltip yang berbeda-beda untuk beberapa titik dalam grafik scatter, kita perlu menggunakan fungsi pointFormat. Dengan fungsi ini, kita dapat menampilkan informasi yang berbeda-beda untuk setiap titik.

Berikut adalah contoh kode yang digunakan untuk membuat tooltip yang berbeda-beda:

tooltip: {
 pointFormat: '{series.name}: {point.x}, {point.y}',
 valueDecimals: 0,
 shared: true
}

Dalam contoh di atas, kita menggunakan fungsi pointFormat dan menentukan formatnya dengan menggunakan {series.name} untuk nama series, {point.x} untuk nilai x, dan {point.y} untuk nilai y.

Menampilkan Multiple Tooltips

Jika kita ingin menampilkan multiple tooltips untuk beberapa titik dalam grafik scatter, kita perlu menggunakan fungsi tooltip dengan parameter shared: true. Dengan demikian, tooltip akan ditampilkan secara vertikal jika beberapa titik memiliki nilai x dan y yang sama.

Berikut adalah contoh kode yang digunakan untuk membuat multiple tooltips:

tooltip: {
 pointFormat: '{series.name}: {point.x}, {point.y}',
 valueDecimals: 0,
 shared: true
}

Dalam contoh di atas, kita menggunakan fungsi tooltip dengan parameter shared: true dan menentukan formatnya dengan menggunakan {series.name} untuk nama series, {point.x} untuk nilai x, dan {point.y} untuk nilai y.

Menampilkan Decimal Places

Jika kita ingin menampilkan decimal places dalam tooltip, kita perlu menggunakan fungsi valueDecimals. Dengan demikian, kita dapat menentukan jumlah digit yang akan ditampilkan dalam tooltip.

Berikut adalah contoh kode yang digunakan untuk menampilkan decimal places:

tooltip: {
 pointFormat: '{series.name}: {point.x}, {point.y}',
 valueDecimals: 2,
 shared: true
}

Dalam contoh di atas, kita menggunakan fungsi valueDecimals dan menentukan jumlah digit yang akan ditampilkan dalam tooltip.

Dalam artikel ini, kita telah membahas cara membuat grafik scatter dengan tooltip yang berbeda-beda. Kita juga telah membahas cara membuat multiple tooltips untuk beberapa titik dalam grafik scatter dan menampilkan decimal places dalam tooltip. Dengan demikian, kita dapat membuat grafik scatter yang lebih interaktif dan informatif.

References

Tags:
Share this