如何在chartjs工具提示中显示自定义数据

Question

I have created a time series graph out of two data set. Now problem is there is an additional data that I would like to use and display in tooltip but I am not sure how to do it. I did some search and I kind of believe that this can be achieved via callbacks but don't know how to handle it. Right now the tooltip displays x and y values along with it I would like to display r value as well.

 var ctx = document.getElementById('myChart').getContext('2d'); var s1 = { label: 'source', borderColor: 'blue', data: [ { x: '2020-05-11T04:58:37Z', y: 25, r:3001}, { x: '2020-05-11T04:59:17Z', y: 27, r:3002}, { x: '2020-05-11T04:59:57Z', y: 21, r:3003}, { x: '2020-05-11T05:00:37Z', y: 21, r:3004}, { x: '2020-05-11T05:01:17Z', y: 21, r:3456}, { x: '2020-05-11T05:01:57Z', y: 0.04, r:3243} ] }; var s2 = { label: 'target', borderColor: 'red', data: [ { x: '2020-05-11T04:58:37Z', y: 28, r:3234}, { x: '2020-05-11T04:59:17Z', y: 31, r:3232}, { x: '2020-05-11T04:59:57Z', y: 27, r:5332}, { x: '2020-05-11T05:00:37Z', y: 30, r:3342}, { x: '2020-05-11T05:00:57Z', y: 30, r:3234}, { x: '2020-05-11T05:01:17Z', y: 0.033, r:3343} ] }; var ctx = document.getElementById('myChart').getContext('2d'); var chart = new Chart(ctx, { type: 'line', data: { datasets: [s1, s2] }, options: { scales: { xAxes: [{ type: 'time', distribution: 'series' }] }, } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script> <canvas id="myChart" height="100"></canvas>

Answer 1

tooltips callbacks is your need Link info and this is your need to reach r

data.datasets[tooltipItem[0].datasetIndex].data[tooltipItem[0].index].r

 var ctx = document.getElementById('myChart').getContext('2d'); var s1 = { label: 'source', borderColor: 'blue', data: [ { x: '2020-05-11T04:58:37Z', y: 25, r:3001}, { x: '2020-05-11T04:59:17Z', y: 27, r:3002}, { x: '2020-05-11T04:59:57Z', y: 21, r:3003}, { x: '2020-05-11T05:00:37Z', y: 21, r:3004}, { x: '2020-05-11T05:01:17Z', y: 21, r:3456}, { x: '2020-05-11T05:01:57Z', y: 0.04, r:3243} ] }; var s2 = { label: 'target', borderColor: 'red', data: [ { x: '2020-05-11T04:58:37Z', y: 28, r:3234}, { x: '2020-05-11T04:59:17Z', y: 31, r:3232}, { x: '2020-05-11T04:59:57Z', y: 27, r:5332}, { x: '2020-05-11T05:00:37Z', y: 30, r:3342}, { x: '2020-05-11T05:00:57Z', y: 30, r:3234}, { x: '2020-05-11T05:01:17Z', y: 0.033, r:3343} ] }; var ctx = document.getElementById('myChart').getContext('2d'); var chart = new Chart(ctx, { type: 'line', data: { datasets: [s1, s2] }, options: { tooltips:{ callbacks: { title: function(tooltipItem,data) { console.log(data.datasets[tooltipItem[0].datasetIndex].data[tooltipItem[0].index].r); return "I am title"; }, label: function(tooltipItem) { return "I am content"; } } }, scales: { xAxes: [{ type: 'time', distribution: 'series' }] }, } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script> <canvas id="myChart" height="100"></canvas>

Answer 2

You'll have to create a custom tooltip and then append the r value to it.

You can read about tooltips over here

You can access a particular attribute of a tooltip's point like this:

data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].r

I wrote a custom callback to do this for you:)

 var ctx = document.getElementById('myChart').getContext('2d'); var s1 = { label: 'source', borderColor: 'blue', data: [ { x: '2020-05-11T04:58:37Z', y: 25, r:3001}, { x: '2020-05-11T04:59:17Z', y: 27, r:3002}, { x: '2020-05-11T04:59:57Z', y: 21, r:3003}, { x: '2020-05-11T05:00:37Z', y: 21, r:3004}, { x: '2020-05-11T05:01:17Z', y: 21, r:3456}, { x: '2020-05-11T05:01:57Z', y: 0.04, r:3243} ] }; var s2 = { label: 'target', borderColor: 'red', data: [ { x: '2020-05-11T04:58:37Z', y: 28, r:3234}, { x: '2020-05-11T04:59:17Z', y: 31, r:3232}, { x: '2020-05-11T04:59:57Z', y: 27, r:5332}, { x: '2020-05-11T05:00:37Z', y: 30, r:3342}, { x: '2020-05-11T05:00:57Z', y: 30, r:3234}, { x: '2020-05-11T05:01:17Z', y: 0.033, r:3343} ] }; var ctx = document.getElementById('myChart').getContext('2d'); var chart = new Chart(ctx, { type: 'line', data: { datasets: [s1, s2] }, options: { scales: { xAxes: [{ type: 'time', distribution: 'series' }] }, tooltips: { callbacks: { label: function(tooltipItem, data) { var label = data.datasets[tooltipItem.datasetIndex].label || ''; if (label) { label += ':'; } label += tooltipItem.yLabel; r = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].r label += " r: " + r; return label; } } } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script> <canvas id="myChart" height="100"></canvas>