Chartjs-How to hide tooltip for selected datasets? – Chart.js v2.8

by

0👍

✅

Final version (I hope). Shortly after my answer I stumbled upon this plugin which is exactly what I really was looking for.
https://github.com/chartjs/chartjs-plugin-annotation

var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["January", "February", "March", "April", "May", "June"],
    datasets: [{
        label: 'Count type 1',
        data: [48, 33, 32, 35, 42, 38],
        backgroundColor: 'transparent',
        borderColor: 'rgba(255, 204, 0, 1)',
        fillColor: 'rgba(255, 204, 0, 0.1)',
        pointBorderColor: 'transparent',
        pointBackgroundColor: 'rgba(255, 204, 0, 1)',
        pointRadius: 4,
        borderWidth: 2,
        lineTension: 0.3
      },
      
      {
        label: 'Count type 2',
        data: [24, 37, 30, 22, 29, 18],
        backgroundColor: 'transparent',
        borderColor: 'rgba(255, 0, 0, 1)',
        fillColor: 'rgba(255, 0, 0, 0.1)',
        pointBorderColor: 'transparent',
        pointBackgroundColor: 'rgba(255, 0, 0, 1)',
        pointRadius: 4,
        borderWidth: 2,
        lineTension: 0.3
      }
    ]
  },
options: {
		responsive: true,
		tooltips: {
    	enabled: true,
      mode: 'index',
      intersect: false, 
    },
    
    annotation: {
        annotations: [{   
            type: 'line',  
            mode: 'horizontal',
            drawTime: 'afterDatasetsDraw',
            id: 'a-line-1',
            scaleID: 'y-axis-0',
            value: 48,
            endValue: 43,
            borderColor: 'rgb(75, 192, 192)',
            borderWidth: 2,
            label: {
                backgroundColor: 'rgba(255,204,0, 0.4)',
                fontColor: 'rgba(0, 0, 0, 0.6 )',
                fontSize: 12,
                enabled: true,
                content: 'Goal from 48 to 43',
                yAdjust: -18,
                xAdjust: 0,
            }
        },
        {
            type: 'line',   
            mode: 'horizontal',
            drawTime: 'afterDatasetsDraw',
            id: 'a-line-2',
            scaleID: 'y-axis-0',
            value: 24,
            endValue: 21,
            borderColor: 'rgb(75, 192, 192)',
            borderWidth: 2,
            label: {
                backgroundColor: 'rgba(255,0,0,0.4)',
                fontColor: 'rgba(255, 255, 255 )',
                fontSize: 12,
                enabled: true,
                content: 'Goal from 24 to 21',
                yAdjust: 14,
                xAdjust: 0,
            }
        }]
    },
    
    scales: {
        yAxes: [{
            scaleLabel: {
                display: true,
                labelString: 'interface'
            },
            ticks: {
                beginAtZero: true
            }
        }]
    }
}

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="https://rawgit.com/chartjs/chartjs-plugin-annotation/master/chartjs-plugin-annotation.js"></script>

<canvas id="myChart"></canvas>

1👍

While working on the question I stumbled up on this solution using filter. It is based on a answer to simular question. 

filter: function (tooltipItems, data) {
    var label = data.datasets[tooltipItems.datasetIndex].label;
    if ((label == "Goal 1")||(label == "Goal 2")) {
        return false;
    } else {
        return true;
    }
}

Here is the code from my original question including this filter.

var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["January", "February", "March", "April", "May", "June"],
    datasets: [{
        label: 'Count type 1',
        data: [48, 33, 32, 35, 42, 38],
        backgroundColor: 'transparent',
        borderColor: 'rgba(255, 204, 0, 1)',
        fillColor: 'rgba(255, 204, 0, 0.1)',
        pointBorderColor: 'transparent',
        pointBackgroundColor: 'rgba(255, 204, 0, 1)',
        pointRadius: 4,
        borderWidth: 2,
        lineTension: 0.3
      },
      {
        label: 'Goal 1',
        data: [48.000, 47.040, 46.080, 45.120, 44.160, 43.200],
        backgroundColor: 'transparent',
        borderColor: 'rgba(0, 255, 0, 1)',
        fillColor: 'transparent',
        pointBorderColor: 'transparent',
        pointRadius: 0,
        borderWidth: 0.4,
        lineTension: 0
      },
      {
        label: 'Count type 2',
        data: [24, 37, 30, 22, 29, 18],
        backgroundColor: 'transparent',
        borderColor: 'rgba(255, 0, 0, 1)',
        fillColor: 'rgba(255, 0, 0, 0.1)',
        pointBorderColor: 'transparent',
        pointBackgroundColor: 'rgba(255, 0, 0, 1)',
        pointRadius: 4,
        borderWidth: 2,
        lineTension: 0.3
      },
      {
        label: 'Goal 2',
        data: [24.000, 23.520, 23.040, 22.560, 22.080, 21.600],
        backgroundColor: 'transparent',
        borderColor: 'rgba(0, 255, 0, 1)',
        pointBorderColor: 'transparent',
        pointRadius: 0,
        borderWidth: 0.4,
        lineTension: 0
      }
    ]
  },
  options: {
    tooltips: {
      enabled: true,
      mode: 'index',
      intersect: false,
      filter: function(tooltipItems, data) {
        var label = data.datasets[tooltipItems.datasetIndex].label;
        if ((label == "Goal 1") || (label == "Goal 2")) {
          return false;
        } else {
          return true;
        }
      }
    }
  }

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="myChart"></canvas>

Leave a comment