CODEWITHSUNDEEP
javascriptchart.js
Zahid Sattar
Zahid Sattar

Reputation: 1517

Hiding Chart.js line, but showing it's data in the tooltip

I am using the Chart.js library to build a chart. Consider the following Chart.js line graph :

enter image description here

So, there are 2 datasets that are being used here, one for the red line and one for the green line. I want to hide one of these datasets e.g. the red one. This will result in the red line not showing which is what I want.

However, what I also want is that the tooltip should show data for both the datasets (including the hidden dataset).

Is that possible?

Upvotes: 1

Views: 946

Answers (1)

uminder
uminder

Reputation: 26150

You can define borderColor: 'transparent' for the dataset that should be hidden. To still have the desired colored boxes rendered in the tooltip, you'll also have to define a corresponding callback function. 

new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    labels: ['Player 1', 'Player 2', 'Player 3', 'Player 4'],
    datasets: [{
      label: 'OK',
      borderColor: 'green',
      backgroundColor: 'lightblue',
      data: [32, 44, 29, 33]
    }, {
      label: 'NOK',
      borderColor: 'transparent',
      data: [26, 29, 35, 35],
      fill: false,
    }]
  },
  options: {
    responsive: true,
    legend: {
      display: false
    },
    tooltips: {
      mode: 'index',
      callbacks: {
        labelColor: tooltipItem => {
          var color = tooltipItem.datasetIndex == 0 ? 'green' : 'red';
          return {
            borderColor: color,
            backgroundColor: color
          }
        }
      }
    }
  }
});
canvas {
  max-width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" width="150" height="100"></canvas>

Upvotes: 1

Related Questions