React-chartjs-2: Question: multiple data in tooltip

[akashrajkn]

Hi,
It is awesome that you guys have a react wrapper for chartjs2. Really appreciate it. :)

I am trying to use the tooltip callbacks in chartjs to get multiple lines (data from external source) in the tooltip. But I am not able to use it in this wrapper. Could you help me out?

Any help is appreciated. Thanks in advance.

[akashrajkn]

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

[maxfarseer]

@akashrajkn can you show example? Thx!

[akashrajkn]

@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.

[jbwebpro]

Your amazing!.

[perumalprabhu]

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

[perumalprabhu]

@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

[akashrajkn]

@perumalprabhu maybe you should try angular based chartjs wrappers.