Search code examples
jquerygraphchart.js

How to append more data in tooltip of graph in chart.js

Recently i have work on showing data from database table in a graph using chart.js. and in that graph tooltip, there are 2 data are showing But now i also want to combine 3rd data in that tooltip.

Like:

customer in Jaunary 2016

monthly contomers for year 2016: -4.5

loss 15%(3rd one)

Below is a snap for current graph enter image description here

And here is also a db table data screenshot

enter image description here

Here is my code

    $(document).ready(function(){
    $.ajax({
        url: "<?php base_url();?>/charts/getsome",
        method: "GET",
        success: function(data) {
            console.log(data);
            var data = JSON.parse(data);
            var month = [];
            var customers = [];

            for(var i in data) {
                month.push("Customer in " + data[i].apply_month);
                customers.push(data[i].no_customers);
            }
            var chartdata = {
                labels: month,              
                datasets : [
                    {
                        label: 'monthly customers for Year 2016',
                        backgroundColor: 'rgba(200, 200, 200, 0.75)',
                        borderColor: 'rgba(200, 200, 200, 0.75)',
                        hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                        hoverBorderColor: 'rgba(200, 200, 200, 1)',
                        data: customers,
                        fill: false
                    }

                ]
            };

            // alert(chartdata);

            var frame = $("#mycanvas");

            var barGraph = new Chart(frame, {
                type: 'line',               
                data: chartdata
            });
        },
        error: function(data) {
            console.log(data);
        }
    });
});

Now please suggest me, how can i append 3rd data in these tooltips. Thanks :)

Solution

  • You can achieve this using afterBody callback function of tooltips ...

    options: {
   tooltips: {
      callbacks: {
         afterBody: function(t, d) {
            return 'loss 15%';  // return a string that you wish to append
         }
      }
   },
   ...
}

    Here is a working example ...

    var ctx = document.getElementById("myChart").getContext('2d');

var myChart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
      datasets: [{
         label: 'Standard Rating',
         data: [1, 2, 3, 4, 5, 6],
         backgroundColor: 'rgba(209, 230, 245, 0.5)',
         borderColor: 'rgba(56, 163, 236, 1)',
         borderWidth: 1
      }]
   },
   options: {
      responsive: false,
      tooltips: {
         callbacks: {
            afterBody: function(t, d) {
               return 'loss 15%'; //return a string that you wish to append
            }
         }
      },
      scales: {
         yAxes: [{
            ticks: {
               beginAtZero: true
            }
         }]
      }
   }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="myChart" width="350" height="200"></canvas>