Menampilkan Nilai pada Chart Point (PHP+JSON+ChartJS)

December 16, 2018

Langsung saja, secara default chartjs tidak menampilkan nilai pada chart point kecuali jika element chart tersebut mendapat trigger dari event (contoh klik atau hover). Berikut ini contoh penempatan properti pada opsi chartJS untuk menampilkan nilai (value) pada chart point. Opsi ini sekaligus dapat digunakan untuk menonaktifkan fungsi hover atau even lainnya pada chartJS.

/* Asumsi fetch data JSON telah dilakukan dalam bentuk array */	
$json_array = json_encode($line_array); 
  $konversihtml.= '
  <script language="javascript">
  var tampilNilai = {
    tooltips: {
        enabled: false
    },
    hover: {
        animationDuration: 0
    },
    animation: {
        duration: 1,
        onComplete: function () {
            var chartInstance = this.chart,
                ctx = chartInstance.ctx;
            ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
            ctx.textAlign = "center";
            ctx.textBaseline = "bottom";

            this.data.datasets.forEach(function (dataset, i) {
                var meta = chartInstance.controller.getDatasetMeta(i);
                meta.data.forEach(function (bar, index) {
                    var data = dataset.data[index]+"%";                            
                    ctx.fillText(data, bar._model.x, bar._model.y - 5);
                });
            });
        }
    }
};
  
  var ctx = $("#chart_'.$id.'");
    var chart_'.$id.' = new Chart(ctx, {
    type: "'.$jstype.'",
    data: '.$json_array.',
    options: tampilNilai
  });
  </script>';
  return $konversihtml;

Contoh pada line chart


Leave a Reply

Your email address will not be published. Required fields are marked *