[Chartjs]-Hiding Chart.js line, but showing it's data in the tooltip

by

1👍

✅

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>

Leave a comment