how to show information of hidden bar graphs also in a Tooltip using chart.js in angular?

user_15438655 0
Viewed 114

I want to display all 4 properties/labels inside the tooltip, but only want the bars of 1st datasets(searches) in my Bar Graph Chart, I don't want to show all 4 bars. enter image description here

I also don't want vacant white space around bars.

Here is My Code

bargraphdata = {
      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, 21, 56, 55, 40, 15, 36, 46, 28, 30],
            backgroundColor: 'orange',
            hidden:true
          },
          {
            label: "Positive Feedback",
            data: [25, 59, 50, 11, 56, 55, 40, 15, 36, 46, 28, 30],
            backgroundColor: '#BFF670',
            hidden:true
          },
          {
            label: "Negetive Feedback",
            data: [25, 59, 50, 11, 56, 55, 40, 15, 36, 46, 28, 30],
            backgroundColor: 'yellow', 
            hidden:true
          },
          ]
  };


options={
tooltips:{
      mode: 'index',
      displayColors: false,
}
}
chart.js angular typescript
1 Answers

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>

user_23584090
Related