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👍
You could define a custom positioning map.
http://www.chartjs.org/docs/latest/configuration/tooltip.html#position-modes
Source:stackexchange.com