Peachman1997
Peachman1997

Reputation: 171

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

How can you disable tooltips on one of the plots on my multi plot graph, but keep the others. I have tried to set 'showToolTip' to false on the plot I dont want tooltips for but this does not work.

let ctx = document.getElementById('myChart').getContext('2d');
                var chart = new Chart(ctx, {
                    type: 'scatter',
                    data :{
                        labels : cLabels,
                        datasets : [{
                            label: 'Points',
                            backgroundColor: 'rgb(255, 99, 132)',
                            borderColor: 'rgb(255, 99, 132)',
                            pointStyle: 'circle',
                            pointRadius: 10,
                            data : cData,
                            showTooltips: false, //<- THis line does not work, and there is a global property to remove all tooltips
                            order: 2,
                        },{
                            label: '',
                            backgroundColor: 'rgb(255, 255, 255)',
                            borderColor: 'rgb(255, 255, 255)',
                            pointStyle: 'circle',
                            pointRadius: 5,
                            data : cData,

                            order: 1,
                        },{

Upvotes: 0

Views: 1017

Answers (1)

uminder
uminder

Reputation: 26150

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>

Upvotes: 1

Related Questions