Reputation: 37
I have issue with custom position tooltip's. I can not make a custom anyone can help me with some tip ? how can I make the tooltip get further away from the point ??
//Individual chart config
var ctx = "myChart";
var myChart = new Chart(ctx, {
type: 'line',
options: {
title: {
display: true,
text: 'lala',
},
layout: {
padding: 32
},
tooltips: {
position: 'custom'
},
},
data: {
labels: ['0%', '10%', '20%', '30%', '40%', '50%'],
datasets: [{
label: 'one',
data: [44, 44, 55, 16, 33, 45],
borderColor: '#ab045',
backgroundColor: 'RGBA(33, 55, 167, .1)',
pointBorderColor: "#4ad1C0",
pointBackgroundColor: "#fff",
pointHitRadius: 10
}, {
label: 'two',
data: [82, 12, 24, 30, 2, 5],
borderColor: '#34315a',
backgroundColor: 'RGBA(33, 23, 124, .7)',
pointBorderColor: "#34495e",
pointBackgroundColor: "#fff",
pointHitRadius: 10
}]
}
});
My Fiddle
Upvotes: 1
Views: 634
Reputation: 645
New modes can be defined by adding functions to the Chart.Tooltip.positioners map (DOC). This function returns the x and y position for the tooltip.
You can add a custom one to adjust the x at an offset
//register custome positioner
Chart.Tooltip.positioners.custom = function(elements, position) {
if (!elements.length) {
return false;
}
var offset = 0;
//adjust the offset left or right depending on the event position
if (elements[0]._chart.width / 2 > position.x) {
offset = 20;
} else {
offset = -20;
}
return {
x: position.x + offset,
y: position.y
}
}
Do not forget set your custom function into your options when rendering your chart
Fiddle example working
Upvotes: 2