Chart.js customize tooltip body bubble chart

Vote count: 0

I need to change the tooltip of my bubble chart, the graph I have it as follows:

And I would like the tooltip to look something like this:

My code is the follows:

var bubbleChart;
          var datas  = response['return'];
          var div    = $("#variety-incidence").get(0).getContext("2d");
          var colors = [];
          var values = [];
          var labels = [];

          for(var i in datas){
            values.push({
              x: datas[i].areasowing,
              y: datas[i].incidence,
              r: 9
            });

            colors.push(datas[i].color_hex);
          }

          data = {
            labels: labels,
            datasets: [{
              label: 'Incidencia',
              fontColor: "#000",
              backgroundColor: colors,
              borderColor: 'rgba(54, 162, 235, 1)',
              borderWidth: 1,
              data:values
            }]
          };

          //Aquí se determinan las opciones generales de la gráfica
          options = {
            scales: {
              yAxes: [{
                ticks: {
                  fontSize: 12,
                  fontColor: "#000"
                },
                scaleLabel: {
                  display: true,
                  labelString: '% Incidencia',
                  fontColor: "#000"
                }
              }],
              xAxes: [{
                ticks: {
                  fontSize: 12,
                  fontColor: "#000",
                  autoSkip: false
                },
                scaleLabel: {
                  display: true,
                  labelString: 'Total siembra %',
                  fontColor: "#000"
                }
              }]
            },
            title: {
              display: true,
              text: 'INCIDENCIA DE PLAGAS POR VARIEDAD',
              padding: 20
            },
            maintainAspectRatio: false,
            customTooltips: function(a){
              a.
            }
          };

          //Aquí se envia el data con las opciones y se pinta la gráfica
          bubbleChart = new Chart(div, {
            type: 'bubble',
            data: data,
            options: options
          });

I tried something like this:

tooltip:{
  callback: function(evt){
    return evt.xLabel+"%Sowing";
  }
}

But I cannot add the another text, so I would like to know how to it. I hope that anyone can help me.

asked 39 secs ago

Fabian Sierra

Let's block ads! (Why?)

Chart.js customize tooltip body bubble chart