Question: multiple data in tooltip about react-chartjs-2 HOT 7 CLOSED

@maxfarseer in my case, I wanted to show data1, data2, data3 below the "data" (same index) in the tooltip (all the four have same number of elements). So you can modify the graph_data as below

graph_data: {
  labels: [],
  datasets: [{
      label: '',
      data: [],
      data1: [],
      data2: [],
      data3: [],
  }]
}

under tooltips config, you can use callbacks

tooltips: {
    mode: 'label',
    callbacks: {

        title: function(tooltipItem, data) {
            return data.labels[tooltipItem[0].index];
        },

        beforeLabel: function(tooltipItem, data) {
            return 'Data1: ' + data.datasets[tooltipItem.datasetIndex].data1[tooltipItem.index];
        },

        label: function(tooltipItem, data) {
            return 'Data2: ' + data.datasets[tooltipItem.datasetIndex].data2[tooltipItem.index];
        },
    },
}

Hope this helps.

from react-chartjs-2.

I was able to figure it out. Thanks anyway :)

from react-chartjs-2.

@akashrajkn can you show example? Thx!

from react-chartjs-2.

Your amazing!.

from react-chartjs-2.

could you please help me out while using Angular I need to pass the external array of data to populate at tooltip. If I am using the above it is not reflecting inside the "options" keyword in Chart js

from react-chartjs-2.

@maxfarseer in my case, I wanted to show data1, data2, data3 below the "data" (same index) in the tooltip (all the four have same number of elements). So you can modify the graph_data as below

graph_data: {
  labels: [],
  datasets: [{
      label: '',
      data: [],
      data1: [],
      data2: [],
      data3: [],
  }]
}

under tooltips config, you can use callbacks

tooltips: {
    mode: 'label',
    callbacks: {

        title: function(tooltipItem, data) {
            return data.labels[tooltipItem[0].index];
        },

        beforeLabel: function(tooltipItem, data) {
            return 'Data1: ' + data.datasets[tooltipItem.datasetIndex].data1[tooltipItem.index];
        },

        label: function(tooltipItem, data) {
            return 'Data2: ' + data.datasets[tooltipItem.datasetIndex].data2[tooltipItem.index];
        },
    },
}

Hope this helps.

It is not working it out is Angular 7 can you please help me out

from react-chartjs-2.

@perumalprabhu maybe you should try angular based chartjs wrappers.

from react-chartjs-2.