[Chartjs]-How to show information of hidden bar graphs also in a Tooltip using chart.js in angular?

by

1👍

You can define a tooltips.callback.label function as follows. This function returns an array of tooltip labels. It also computes the percentage of feedback in relation to the corresponding searches.

tooltips: {
  callbacks: {
    label: (tooltipItem, data) => {
      let searches = data.datasets[0].data[tooltipItem.index];
      return data.datasets.map((ds, i) => ds.label + ': ' +
        (i == 1 ? (100 / searches * ds.data[tooltipItem.index]).toFixed(1) + '%' : ds.data[tooltipItem.index]));
    }
  }
}

Please take a look at your amended runnable code below and see how it works.

new Chart('chart', {
  type: 'bar',
  data: {
    labels: ['Jan', 'Feb', 'March', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
    datasets: [{
        label: 'Searches',
        backgroundColor: '#AFF6D0',
        data: [25, 59, 50, 11, 56, 55, 40, 15, 36, 46, 28, 30],
      },
      {
        label: 'Feedback',
        data: [5, 9, 15, 9, 33, 22, 20, 6, 12, 25, 15, 11],
        hidden: true
      },
      {
        label: 'Positive Feedback',
        data: [2, 4, 10, 3, 11, 18, 10, 3, 6, 15, 11, 5],
        hidden: true
      },
      {
        label: 'Negetive Feedback',
        data: [3, 5, 5, 6, 22, 4, 10, 3, 6, 10, 4, 6],
        hidden: true
      },
    ]
  },
  options: {
    legend: {
      display: false
    },
    tooltips: {
      mode: 'index',
      displayColors: false,
      callbacks: {
        label: (tooltipItem, data) => {
          let searches = data.datasets[0].data[tooltipItem.index];
          return data.datasets.map((ds, i) => ds.label + ': ' +
            (i == 1 ? (100 / searches * ds.data[tooltipItem.index]).toFixed(1) + '%' : ds.data[tooltipItem.index]));
        }
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="chart" height="100"></canvas>

Leave a comment