Move tooltip further from data point for Chart.js?
Solution 1
I have something close, tooltips can accept a position
which is an alias for a function stored in Chart.Tooltip.positioners
. This function returns the x
and y
position for the tooltip.
You can add a custom one to adjust the x at an offset.
The only issue is that by adjust the x the layout (left/right direction) of the tooltip can change meaning that even after working out if the tool tip is below half way or above half way bu adjusting the x it then switches its layout meaning on tooltip in the middle will look odd as it is offset in the wrong direction.
This could be fixed by knowing the width of the tooltip and taking this into account but looking through the data provided to the function this is not given.
Anyway leaving this as an answer it gets you most of the way there and you/someone might be able to figure out how to get rid of that annoying last part
//Global Chart.js options
Chart.defaults.global.defaultFontFamily = 'Lato';
Chart.defaults.global.elements.responsive = true;
Chart.defaults.global.tooltips.xPadding = 10;
Chart.defaults.global.tooltips.yPadding = 10;
Chart.defaults.global.tooltips.titleMarginBottom = 10;
Chart.defaults.global.tooltips.position = 'average';
//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
}
}
//Individual chart config
var ctx = "myChart";
var myChart = new Chart(ctx, {
type: 'line',
options: {
title: {
display: true,
text: 'Precision-Recall Curve',
},
layout: {
padding: 32
},
tooltips: {
//use our new custom position
position: 'custom'
},
},
data: {
labels: ['0%', '10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%'],
datasets: [{
label: 'Precision',
data: [2, 42, 55, 50, 42, 38, 32, 24, 20, 18, 18],
borderColor: '#1abc9c',
backgroundColor: 'RGBA(26, 188, 156, .4)',
pointBorderColor: "#4BC0C0",
pointBackgroundColor: "#fff",
pointHitRadius: 10
}, {
label: 'Recall',
data: [2, 12, 24, 30, 39, 58, 70, 82, 86, 89, 93],
borderColor: '#34495e',
backgroundColor: 'RGBA(52, 73, 94, .3)',
pointBorderColor: "#34495e",
pointBackgroundColor: "#fff",
pointHitRadius: 10
}]
}
});
<div class="container">
<div>
<canvas id="myChart"></canvas>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script>
Solution 2
I think it's simpler by change the number of caretPadding. We can increase the distance from tooltip to data point by caretPadding
option: {
tooltip: {
caretPadding: 20,
}
}
Megaroeny
Information architect: (part designer, developer & strategist) ♥ to learn and experiment! My passion is to make people's lives joyful through technology.
Updated on June 13, 2022Comments
-
Megaroeny almost 2 years
I started messing with Chart.js today, and I'm really impressed so far by how easy it is to understand, even for a javascript beginner like myself.
I'm wanting to add some spacing horizontally between the tooltip and the data point on the graph. By default, the caret point touches the data point. I can't figure it out. I know there's a
position
option, but I don't quite get how it's used. I also tried using thetooltips: { x }
option but no luck either. Guessing I'm misunderstanding what that is for.Below is what I have so far for one chart...
Thanks, appreciate it!
//Global Chart.js options Chart.defaults.global.defaultFontFamily = 'Lato'; Chart.defaults.global.elements.responsive = true; Chart.defaults.global.tooltips.xPadding = 10; Chart.defaults.global.tooltips.yPadding = 10; Chart.defaults.global.tooltips.titleMarginBottom = 10; Chart.defaults.global.tooltips.position = 'average'; //Individual chart config var ctx = "myChart"; var myChart = new Chart(ctx, { type: 'line', options: { title: { display: true, text: 'Precision-Recall Curve', }, layout: { padding: 32 }, tooltips: { x: 20 }, }, data: { labels: ['0%', '10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%'], datasets: [{ label: 'Precision', data: [2, 42, 55, 50, 42, 38, 32, 24, 20, 18, 18], borderColor: '#1abc9c', backgroundColor: 'RGBA(26, 188, 156, .4)', pointBorderColor: "#4BC0C0", pointBackgroundColor: "#fff", pointHitRadius: 10 }, { label: 'Recall', data: [2, 12, 24, 30, 39, 58, 70, 82, 86, 89, 93], borderColor: '#34495e', backgroundColor: 'RGBA(52, 73, 94, .3)', pointBorderColor: "#34495e", pointBackgroundColor: "#fff", pointHitRadius: 10 }] } });
<div class="container"> <div> <canvas id="myChart"></canvas> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script>
-
Megaroeny over 7 yearsoh wow thank you haha! I would never be able to figure that out myself being a js newbie. I was thinking of using CSS too if it's possible, to target the tooltip. Thanks again!
-
Quince over 7 yearsQuite alright, should get you closer to what you want. Also, the tooltip is drawn on the canvas so CSS won't help here unfortunately
-
Quince over 7 yearsBut i remember in chart.js 1.x they came out with a custom tooltip where you could display a html tooltip (i think, it's been a while), but i don't remember seeing that in 2.x
-
Our_Benefactors almost 7 yearsMassively helpful! Thanks for putting this together! IMO the official docs needs a comprehensive example like this.
-
Marko Bonaci over 6 yearsFYI you can do HTML tooltips in 2.x too.
-
Quince over 6 yearsoh nice, i completely missed that
-
sho about 6 yearsYou my friend are a boss! I have a chart with some extremely large values. Rather than distort the chart, I set a max value for the ticks that crops the chart. The problem was that tooltips continued to be drawn near the end of the bar and was hidden for those that extended. This custom positioning helped tremendously!
-
NewBie1234 about 3 yearsdepending on the tooltip might not be as simple.