Chart js tooltip position above chart

Question

Is there a way of positioning the tooltip on top of the chart, so when i'm showing it on mobile my tooltips won't overlap the chart so easily.

I'm using vue charts.

Thanks in advance.

Answer 1

You could define a custom positioning map.

http://www.chartjs.org/docs/latest/configuration/tooltip.html#position-modes

Answer 2

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