Mengoptimalkan Tampilan Grafik dengan Highcharts: Label Point Scatter
October 27, 2024 ,

Mengoptimalkan Tampilan Grafik dengan Highcharts: Label Point Scatter

=====================================================

Dalam mengembangkan aplikasi yang memerlukan tampilan grafik, salah satu bagian penting adalah memberikan label pada titik data. Highcharts menyediakan fitur ini melalui opsi dataLabels yang dapat membantu Anda dalam meningkatkan keterbacaan dan keamanan data pada grafik scatter.

Opsi dataLabels

Pada dasarnya, opsi dataLabels digunakan untuk menampilkan label-data di sekitar masing-masing titik data. Dalam Highcharts, Anda dapat mengatur beberapa atribut untuk mempengaruhi tampilan label-data ini. Berikut beberapa opsi yang paling penting:

  • enabled: boolean (default: true) – Menentukan apakah label-data harus ditampilkan atau tidak.
  • **format: string – Merupakan fungsi format yang digunakan untuk mengubah isi label-data sebelum ditampilkan.
  • allowPointEdit: boolean (default: false) – Menentukan apakah pengguna dapat mengedit label-data.

Dalam Highcharts v6.2.0, Anda juga dapat memberikan beberapa label-data pada titik data yang sama dengan cara mendefinisikan label-label sebagai array konfigurasi.

Contoh

Berikut adalah contoh sederhana penggunaan opsi dataLabels dalam Highcharts:

Highcharts.chart('container', {
 chart: {
 type: 'scatter',
 zoomType: 'x'
 },
 plotOptions: {
 scatter: {
 dataLabels: {
 enabled: true,
 format: '{point.x}, {point.y}',
 allowPointEdit: true
 }
 }
 },
 series: [{
 name: 'Data Scatter',
 data: [[1, 2], [3, 4], [5, 6]]
 }]
});

Dalam contoh di atas, kita telah mengaktifkan fitur dataLabels dan mengatur format label-data menjadi {point.x}, {point.y}. Selain itu, kita juga memberikan opsi allowPointEdit: true sehingga pengguna dapat mengedit label-data.

Styling Label-Data

Bila Anda ingin menambahkan styling pada label-data, Anda dapat menggunakan kelas CSS .highcharts-data-label-box dan .highcharts-data-label. Contohnya:

.highcharts-data-label {
 font-size: 12px;
 color: #333;
}

.highcharts-data-label-box {
 background-color: #f0f0f0;
 padding: 5px;
 border-radius: 3px;
}

Dalam contoh di atas, kita telah mengatur styling label-data menjadi memiliki warna hitam dan ukuran font 12 px. Selain itu, kita juga memberikan border-radius dan padding untuk mempercantik tampilan label-data.

Referensi

Dengan demikian, Anda telah memahami cara menggunakan opsi dataLabels pada Highcharts untuk meningkatkan keterbacaan dan keamanan data pada grafik scatter.

Tags:
Share this