Chartjs-ChartJS, Disable Tooltip for one plot on a multi graph data

by

1👍

✅

You can use a tooltip filter callback function. It returns true if a tooltip should be displayed, false otherwise. The following example specifies that tooltips should be displayed for the first dataset only.

options: {
  ...
  tooltips: {
    filter: tooltipItem => tooltipItem.datasetIndex == 0
  }

Please have a look at the runnable code sample that follows.

const data = [
  { 
    series: [ 
      {date: '2020-01', value: 5 },
      {date: '2020-02', value: 20 },
      {date: '2020-03', value: 10 },
      {date: '2020-04', value: 15 }
    ]
  },
  {
    series: [ 
      {date: '2020-01', value: 10 },
      {date: '2020-02', value: 8 },
      {date: '2020-03', value: 16 },
      {date: '2020-04', value: 12 }
    ]
  }
];
new Chart(document.getElementById('canvas'), {
  type: 'line',
  data: {
    datasets: [{
      label: data[0].name,
      fill: false,
      backgroundColor: 'red',
      borderColor: 'red',
      data: data[0].series.map(x => ({ x: new Date(x.date), y: x.value }))
    }, {
      label: data[1].name,
      fill: false,
      backgroundColor: 'blue',
      borderColor: 'blue',
      data: data[1].series.map(x => ({ x: new Date(x.date), y: x.value }))
    }]
  },
  options: {
    responsive: true,
    title: {
      display: false
    },
    legend: {
      display: false
    },
    tooltips: {
      filter: tooltipItem => tooltipItem.datasetIndex == 0
    },
    scales: {      
      xAxes: [{
        type: 'time',
        time: {
          unit: 'month',
          displayFormats: {
            'month': 'MMM YYYY',
          },
          tooltipFormat: 'MMM YYYY'
        }
      }],
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="canvas" height="90"></canvas>

Leave a comment