1

I want to change label on the pop up(look photo) like callback like this

ticks: {
  callback: function (index) {
    return dir[index];
  }
}

pop up

and i can't find this setting.

Sorry for my bad england. love y

uminder
  • 23,831
  • 5
  • 37
  • 72
  • Please better explain what you're trying to achieve. Your example doesn't describe what the image does – GalAbra Apr 08 '20 at 04:00
  • I want to change "8" on the photo to my own label, using a callback like in example –  Apr 08 '20 at 05:08
  • Got you. It's called `tooltip` and I believe you'll find [this](https://stackoverflow.com/questions/38819171/chart-js-2-0-how-to-change-title-of-tooltip) helpful – GalAbra Apr 08 '20 at 05:34

1 Answers1

2

This is the way to change the label text (By label callback). https://www.chartjs.org/docs/latest/configuration/tooltip.html#label-callback

The same method can also change title afterTitle and so on - full list her: https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-callbacks

"Hello world" example:

Change 2000 To ==> Average wage: 2000$***

*****Access to chart data depends on your specific data structure

enter image description here 

var data = {
  labels: ["Africa", "Asia", "Europe", "America"],
  datasets: [{
    /* data */
    label: "Population (millions)",
    backgroundColor: ["#490A3D", "#BD1550","#E97F02", '#F8CA00'],
    data: [1000,1500,2000, 2200]
  }]
};

var options = {
  responsive: true,
  title: {
    text: 'Custom tooltip label',
    display: true
  },
  tooltips: {
    borderWidth: 1,
    borderColor: "white",
    /* https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-callbacks */
    callbacks: {
      label: function(tooltipItem, data) {
        /* get chart.js data  */ 
        var dataItem = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
        var labelItem = data.labels[tooltipItem.index];      
        return "Average wage: " + dataItem +"$";
      }
    }
  },
  scales: {
    xAxes: [{
      stacked: true
    }],
    yAxes: [{
      stacked: true
    }]
  }
};

var myChart = new Chart(document.getElementById("chart"), {
  type: 'bar',
  data: data,
  options: options
});
<canvas id="chart" width="800" height="350"></canvas>
<br>
<br>
<hr>
<a target="_blank" href="https://www.chartjs.org/docs/latest/configuration/tooltip.html">https://www.chartjs.org/docs/latest/configuration/tooltip.html</a>

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
Ezra Siton
  • 6,887
  • 2
  • 25
  • 37