Move tooltip farther from data point for Chart.js?

Question

Today I started messing around with Chart.js, and so far I'm really impressed with how easy it is to understand, even for a beginner javascript like me.

I want to add a few horizontal intervals between the tooltip and the data point on the chart. By default, a caret point touches a data point. I can not understand. I know that there is a position option, but I don’t quite understand how it is used. I also tried using the tooltips: { x } option, but no luck. I think I don’t understand what this means.

Below is what I have for one chart ...

Thanks, rate 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> 

Answer 1

I have something close, the hints can take position , which is an alias for the function stored in Chart.Tooltip.positioners . This function returns the x and y position for the tooltip.

You can add custom to adjust x to offset.

The only problem is that by adjusting x, the layout (left / right direction) of the tooltip can change the value, which even after development, if the tip of the tool is halfway or above half way, and then adjusts x, it switches its layout value the tooltip in the middle will look strange, because it is shifted in the wrong direction.

This could be fixed, knowing the width of the tooltip and considering this, but looking at the data provided by the function, this is not indicated.

In any case, leaving this as an answer, you get most of your path, and you / someone can figure out how to get rid of this 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>