CODEWITHSUNDEEP
javascriptchartschart.js2
user8010590
user8010590

Reputation:

Change Chart.js tooltip caret position

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)'
            ],
        }],
    }
})

Upvotes: 14

Views: 37563

Answers (4)

kano
kano

Reputation: 5926

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>

Upvotes: 3

Tot Zam
Tot Zam

Reputation: 8766

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

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

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

Upvotes: 4

Steven Ventimiglia
Steven Ventimiglia

Reputation: 905

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,
  });
}

Upvotes: 2

ɢʀᴜɴᴛ
ɢʀᴜɴᴛ

Reputation: 32879

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>

Upvotes: 26

Related Questions