Dalam pengembangan grafik dan analisis data, Highcharts menjadi salah satu tool yang paling populer digunakan. Salah satu fitur yang sangat bermanfaat adalah scatter plot labels, yaitu label-data yang muncul di samping setiap titik data pada chart. Dalam artikel ini, kita akan membahas lebih lanjut tentang bagaimana menggabungkan scatter plot labels dengan Highcharts.

Series Data Labels

Pada umumnya, data labels digunakan untuk menambahkan informasi tambahan ke dalam chart, seperti nilai-nilai yang terkait dengan setiap titik data. Dalam case of scatter plots, data labels dapat membantu pembaca memahami hubungan antara setiap titik data.

Dalam Highcharts, series data labels dapat diatur menggunakan opsi dataLabels pada objek series. Opsi ini memungkinkan Anda untuk menentukan apakah label-data akan muncul dan berapa besar ukuran label tersebut.

Contoh sederhana dari penggunaan series data labels sebagai berikut:

Highcharts.chart('container', {
 chart: {
 type: 'scatter',
 zoomType: 'x'
 },
 title: {
 text: 'Example of Scatter Plot with Labels'
 },
 xAxis: {
 categories: ['January', 'February', 'March', 'April']
 },
 yAxis: {
 title: { text: 'Temperature (°C)' }
 },
 series: [{
 type: 'scatter',
 data: [[1, 2], [3, 4], [5, 6]],
 dataLabels: {
 enabled: true,
 formatter: function () {
 return this.y.toString();
 }
 }
 }]
});

Dalam contoh di atas, series data labels telah diaktifkan dan diset agar menampilkan nilai y untuk setiap titik data.

Multiple Data Labels

Sejak versi Highcharts 6.2.0, Anda dapat menerapkan beberapa label-data pada setiap titik data dengan mendefinisikan mereka sebagai array konfigurasi. Contoh sederhana dari penggunaan multiple data labels sebagai berikut:

Highcharts.chart('container', {
 chart: {
 type: 'scatter',
 zoomType: 'x'
 },
 title: {
 text: 'Example of Scatter Plot with Multiple Labels'
 },
 xAxis: {
 categories: ['January', 'February', 'March', 'April']
 },
 yAxis: {
 title: { text: 'Temperature (°C)' }
 },
 series: [{
 type: 'scatter',
 data: [[1, 2], [3, 4], [5, 6]],
 dataLabels: {
 enabled: true,
 formatter: function () {
 return [
 this.y.toString(),
 `(${this.x})`
 ].join(' - ');
 }
 }
 }]
});

Dalam contoh di atas, multiple data labels telah diaktifkan dan diset agar menampilkan nilai y dan x untuk setiap titik data, dipisahkan dengan tanda " – ".

3D Scatter Charts

Untuk membuat chart 3D, Highcharts menyediakan fitur scatter3D yang memungkinkan Anda membuat scatter charts dengan tiga dimensi. Contoh sederhana dari penggunaan 3D scatter charts sebagai berikut:

Highcharts.chart('container', {
 chart: {
 type: 'scatter3d',
 zoomType: 'x'
 },
 title: {
 text: 'Example of 3D Scatter Chart'
 },
 xAxis: {
 categories: ['January', 'February', 'March', 'April']
 },
 yAxis: {
 title: { text: 'Temperature (°C)' }
 },
 zAxis: {
 title: { text: 'Altitude' }
 },
 series: [{
 type: 'scatter3d',
 data: [[1, 2, 10], [3, 4, 20], [5, 6, 30]],
 dataLabels: {
 enabled: true,
 formatter: function () {
 return `${this.x}, ${this.y}, ${this.z}`;
 }
 }
 }]
});

Dalam contoh di atas, chart 3D telah dibuat dengan menggunakan fitur scatter3D dan multiple data labels untuk menampilkan informasi terkait dengan setiap titik data.

Dengan demikian, Anda dapat melihat bahwa Highcharts memungkinkan Anda untuk menggabungkan scatter plot labels dengan berbagai cara, termasuk penggunaan single label-data, multiple data labels, dan 3D scatter charts. Dengan menggunakan fitur-fitur ini, Anda dapat membuat chart yang lebih interaktif dan informatif untuk membantu pembaca memahami data yang ditampilkan.