4

When I have a bar in a simple bar chart, the tooltip is placed at the top of the bar:

top positioned tooltip

If I hover on a stacked bar chart, the tooltip is placed on the average position:

average positioning of tooltip

Instead of this behaviour I want to place the tooltip always on the top for stacked bar charts (like it is for simple bar charts). The only two options for configuring the position are average and nearest (https://www.chartjs.org/docs/latest/configuration/tooltip.html#position-modes).

I know there is the mentioned way of using Chart.Tooltip.positioners.custom, but on the one hand this would overwrite the behaviour for all charts (but I just need it for stacked bar charts) and on the other hand even if I could use that I have no clue how to get or calculate the top position of the chart bar.

So, is there a way to place the tooltip on top of the stacked bar? Thank you!

John Archer
  • 2,407
  • 2
  • 25
  • 33

1 Answers1

2

Thank you for replying, I found a way but its a hack and might not work for you. consider the following:

//register custom positioner
Chart.Tooltip.positioners.custom = function(elements, position) {
  //debugger;
  return {
    x: position.x,
    y: elements[0]._view.base - (elements[0].height() + elements[1].height())
  }
}


//Individual chart config
var ctx = "myChart";
var myChart = new Chart(ctx, {
  type: 'bar',
  options: {
    title: {
      display: true,
      text: 'Precision-Recall Curve',
    },
    layout: {
      padding: 32
    },
    tooltips: {
      mode: 'index',
      intersect: true,
      position: 'custom',
      yAlign: 'bottom'
    },
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        stacked: true
      }]
    }
  },
  data: {
    labels: ['0%', '10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%'],
    datasets: [{
      label: 'data1',
      data: [5, 56, 90, 6, 42, 67, 32, 24, 20, 18, 56],
      borderColor: '#1acc1c',
      backgroundColor: 'rgba(26, 10, 55, .1)',
      pointBorderColor: "#4Bd1C0",
      pointBackgroundColor: "#fff",
      pointHitRadius: 10
    }, {
      label: 'data2',
      data: [2, 12, 24, 30, 39, 58, 10, 82, 34, 89, 5],
      borderColor: '#34315a',
      backgroundColor: 'rgba(132, 2, 34, .7)',
      pointBorderColor: "#34495e",
      pointBackgroundColor: "#fff",
      pointHitRadius: 10
    }]
  }
});
<div class="container">
  <div>
    <canvas id="myChart"></canvas>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script>
shrys
  • 5,860
  • 2
  • 21
  • 36
  • Thanks, this looks good! I will test it next week. So, does this debugger statement in line 2 has any effect? And it seems your example is limited to 2 datasets, right (elements[0] and elements[1])? But it would be easy to modify the code accordingly. – John Archer Jul 05 '19 at 11:27
  • Yes `debugger` has no effect, also this was a restricted example where I used `mode: 'index'` to get all datasets otherwise it would have been the one dataset that cursor pointed to – shrys Jul 05 '19 at 11:36
  • Relevant documentation: https://www.chartjs.org/docs/latest/configuration/tooltip.html#position-modes. For those who simply need to stick the tooltip to the top, the code is much smaller. – ᴍᴇʜᴏᴠ Nov 04 '20 at 08:14