Change Chart.js tooltip caret position

Question

I created a doughnut chart using Chart.js 2.5. The issue I’m having is with the tooltip. When I hover over the chart, a tooltip is displayed with a caret that always stays in the left or right side, like this:

side tooltip

I want to change the caret position so that it always show in the bottom. Is that possible?

Here is my chart code

var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ['Jan', 'Feb', 'Mar'],
        datasets: [{
            label: 'dataset',
            data: [30, 50, 20],
            backgroundColor: [
            'rgb(153, 102, 255)',
            'rgb(255, 205, 86)',
            'rgb(54, 162, 235)'
            ],
        }],
    }
})

score 25 · Accepted Answer · answered May 18 '17 at 14:21

You could set yAlign property to bottom for tooltips in your chart options to display tooltip's caret always at the bottom position ...

options: {
    tooltips: {
        yAlign: 'bottom'
    }
}

ᴅᴇᴍᴏ

var ctx = document.getElementById("chart").getContext("2d");
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ['Jan', 'Feb', 'Mar'],
        datasets: [{
            label: 'dataset',
            data: [30, 50, 20],
            backgroundColor: ['rgb(153, 102, 255)', 'rgb(255, 205, 86)', 'rgb(54, 162, 235)']
        }]
    },
    options: {
        responsive: false,
        tooltips: {
            yAlign: 'bottom'
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="chart" height="180"></canvas>

Tooltip option doesn't seem to have `yAlign` property any longer or am I wrong? — DongBin Kim, Jul 11 '18 at 09:25
@DongBinKim it's reversed, as it applies to the caret and not the tooltip (weird API choice) — kano, Oct 01 '21 at 18:58

Tot Zam · Answer 2 · 2017-05-29T01:40:43.660

3

You can do this by setting the yAlign tooltips configuration option to "bottom":

options: {
    tooltips: {
      yAlign: "bottom"
    }
}

JSFiddle Demo: https://jsfiddle.net/tksr7bn9/

edited May 29 '17 at 01:40

answered May 18 '17 at 14:24

Tot Zam

8,406
10
51
76

1

Thanks for your response. Had to accept the other one since it was first :) – May 18 '17 at 15:00
@CamielJacobs I'm okay with that. Glad I could help. I wrote up this answer at the same time, and only saw the other answer after I posted it. Once you get enough reputation, you can just upvote all helpful answers. – Tot Zam May 18 '17 at 15:06

Steven Ventimiglia · Answer 3 · 2017-05-18T14:36:25.327

Lot of ways to customize the tooltip. Here's a good example via CodePen.

https://codepen.io/mab213/pen/PZOXdE

customTooltips: function(tooltip) {
  // Tooltip Element
  var tooltipEl = $('#chartjs-tooltip');
  // Hide if no tooltip
  if (!tooltip) {
    tooltipEl.css({
      opacity: 1
    });
    return;
  }
  // Set caret Position
  tooltipEl.removeClass('above below');
  tooltipEl.addClass(tooltip.yAlign);
  tooltipEl.addClass(tooltip.xAlign);
  // Set Text
  tooltipEl.html(tooltip.text);
  // Find Y Location on page
  var top;
  if (tooltip.yAlign == 'above') {
    top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding;
  } else {
    top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding;
  }
  // Display, position, and set styles for font
  tooltipEl.css({
    opacity: 1,
    left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
    top: tooltip.chart.canvas.offsetTop + top + 'px',
    fontFamily: tooltip.fontFamily,
    fontSize: tooltip.fontSize,
    fontStyle: tooltip.fontStyle,
    xOffset: tooltip.xOffset,
  });
}

score 2 · Answer 4 · answered Oct 01 '21 at 18:58

For anyone struggling to get this working in 2021+, the tooltip alignment option applies to the caret's position. So if you set the yAlign to 'bottom', that means that the tooltip has to be aligned at the top (in order for the caret to remain at the bottom). So it's simply backwards - if you need the tooltip to render at the bottom, set the caret's yAlign: 'top' instead.

Example:

var ctx = document.getElementById("chart").getContext("2d");
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ['Jan', 'Feb', 'Mar'],
        datasets: [{
            label: 'dataset',
            data: [30, 50, 20],
            backgroundColor: ['rgb(153, 102, 255)', 'rgb(255, 205, 86)', 'rgb(54, 162, 235)']
        }]
    },
    options: {
        responsive: false,
        tooltips: {
            yAlign: 'top'
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="chart" height="180"></canvas>

Change Chart.js tooltip caret position

4 Answers4

Linked