how display custom data in chartjs tooltip

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>

Cagri Tacyildiz · Accepted Answer · 2020-05-18 11:33:15Z

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>

Swetank Poddar · Accepted Answer · 2020-05-18 11:55:37Z

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>

Collectives™ on Stack Overflow

how display custom data in chartjs tooltip

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related