[Chartjs]-Chart js tooltip position above chart

0👍

Well i had a similiar issue.

I use vue. After importing for Example Bar as your Chart, you can create your custom postitioning like in the Doc of chartjs:

<script>
import { Bar } from "vue-chartjs";
Chart.Tooltip.positioners.custom = function(elements, eventPosition) { //<-- custom is now the new option for the tooltip position
    /** @type {Chart.Tooltip} */
    var tooltip = this;

    /* ... */

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

This for example sets the positioning of the tooltip to the event(mouse) position.
Don’t forget to set your custom function into your options when rendering your chart:

export default {
  extends: Bar, ...
.
.
.
this.renderChart(
    { labels: this.labels, datasets: this.datasets },
    { ...
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;
              }
            }
          }

0👍

Leave a comment