How to hide tooltip in chart.js on specific data label in doughnut chart? - Javascript Chart.js

Javascript examples for Chart.js:Doughnut Chart

  1. HOME
  2. Javascript
  3. Chart.js
  4. Doughnut Chart

Description

How to hide tooltip in chart.js on specific data label in doughnut chart?

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Chart.js filter tooltips</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//from w ww. j  av a2 s .c  o  m
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        elements: {
          arc: {
            roundedCornersFor: 0
          }
        },
        segmentShowStroke: false,
        responsive: true,
        maintainAspectRatio: true,
        legend: {
          display: false
        },
        tooltips: {
          filter: function (tooltipItem, data) {
              var label = data.labels[tooltipItem.index];
              console.log(tooltipItem, data, label);
              if (label == "Red") {
                return false;
              } else {
                return true;
              }
          },
        }
    }
});
    }

      </script> 
   </head> 
   <body> 
      <canvas id="myChart" width="400" height="300"></canvas>  
   </body>
</html>

Related Tutorials