Chartjs tooltip anchor point position on bar charts

Question

I have a bar chart using Chartjs, with a fixed y-axis max. Sometimes the data can exceed the max, but the hover tooltip is always anchored to the top of the bars so it cannot be seen. The tooltips' position option does not really work for me.

So, is there a way to display the tooltip at the bottom of the bars? Or can it follow the hovering mouse cursor like canvasjs?

var ctx = document.getElementById("chart").getContext("2d");
var barChart = new Chart(ctx, {
    type: 'bar',
    options: {
        scales: {
            yAxes: [{
                display: true,
                ticks: {
                    min: 0,
                    max: 120
                },
            }],
        },
        tooltips: {
            // position: 'nearest',
            position: 'average',
        },
        legend: {
            display: false
        }
    },
    data: {
        labels: ["A", "B", "C", "D"],
        datasets: [{
            label: "Data Set 1",
            backgroundColor: [
                '#44b2d7',
                '#44b2d7',
                '#44b2d7',
                '#44b2d7',
            ],
            borderColor: [
                '#44b2d7',
                '#44b2d7',
                '#44b2d7',
                '#44b2d7'
            ],
            borderWidth: 0,
            data: [131, 65, 165, 85]
        }]
    }
});

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

Seems there is a bug with SO's snippet like [this one](https://meta.stackoverflow.com/questions/326126/error-while-calling-jquery-show-in-stack-overflow-snippet). Please go to full page. — Luobster, Feb 21 '19 at 23:00

score 4 · Accepted Answer · answered Feb 22 '19 at 12:00

4

New modes can be defined by adding functions to the Chart.Tooltip.positioners map. You can create your custom postitioning like in the Doc of chartjs:

    Chart.Tooltip.positioners.custom = function(elements, eventPosition) {
    /** @type {Chart.Tooltip} */
    var tooltip = this;

    /* ... */

    return {
        x: eventPosition.x,
        y: eventPosition.y
    };
}

you need to set your custom function into your options when rendering your chart:

tooltips: { 
            position : 'custom',   //<-- important same name as your function above      
            callbacks: {
              label: function(tooltipItem, data) {
               var label = Math.floor(tooltipItem.yLabel*100)/100+" "+data.datasets[tooltipItem.datasetIndex].label;
               return label;
              }
            }
          }

Look my full Fiddle example.

answered Feb 22 '19 at 12:00

Edi

615
5
15

Works like a charm! One trivial follow-up question, the tooltip follows the mouse cursor movement in your fiddle but not in my own dev environment (same chart option, same browser). What could be the possible cause? – Luobster Feb 23 '19 at 19:25
In yours DevTools is showing some error ? Did you clear your browser cache ? Can you give more details about your dev environment ? – Edi Feb 25 '19 at 10:55
@EdiCarlos, will you please share same demo in angular using ng2-charts? – jay khatri Oct 13 '20 at 10:25

Chartjs tooltip anchor point position on bar charts

1 Answers1