ChartJS tooltip position / placement - javascript

When I hover on point of my line chart I can see tooltip. Unfortunatelly the tooltip position is left or right by default. This is how it looks now ->
actual. And this is how I would like it to be -> expected
How can I change its position to top / bottom? any ideas?

Assuming you still need help with this.
Add the following option:
options: {
tooltips: {
yAlign: 'top'
}
}

In Chartjs v3, this works:
options: {
plugins: {
tooltip: {
yAlign: 'bottom'
}
}
}

Related

How to hide border in react-chart-js-2

I am facing a rather troublesome problem with chart as follows:
I want to remove the outermost border and keep the inner lines, but the chart doesn't allow me to do that. I tried using 'drawBorder: false', but it still doesn't work. Is there any way to handle this?
How to remove the value of the origin x-Axis and Y-Axis?
please refer to the image
How to edit the value of A-Xis? I want it to increase by 1000 each time on the X-Axis.
image
Setting the scales option like this:
scales: {
y: {
grid: {
drawBorder: false, // <-- this removes y-axis line
lineWidth: function (context) {
return context?.index === 0 ? 0 : 1; // <-- this removes the base line
}
}
},
x: {
grid: {
drawBorder: false,
lineWidth: 0 // <-- this removes vertical lines between bars
}
}
}
should achieve the desired look. Check out this code sandbox with an example.
You can find more information about styling the chart here.

ChartJS - Horizontal Stacked Bar Chart Tooltip being cut off by Bottom of Canvas

I am trying to add multiple lines in the tooltip for my horizontal stacked bar chart but the last couple lines are getting cut off by the end of the chart canvas. Is it possible to make the tooltip extend over the end of the chart canvas?
tooltips: {
mode: 'nearest',
intersect: true,
callbacks: {
footer: function() {
var withBreaks = "Hello World. \n My name is Jennifer. \n What is your name?"
return withBreaks;
},
}
},
Either you can add bottom padding to your canvas
options: {
layout: {
padding: {
bottom: 25 //set that fits the best
}
},
}
Another option is to set the yAlign of tooltip to center, so the tooltip won't occupy the bottom space of the canvas.
options: {
tooltips: {
yAlign: 'center'
}
}
Please have a look at this issue, especially https://github.com/chartjs/Chart.js/issues/622#issuecomment-72480781 comment.
A similar problem was faced here too.

Chart.js - style legend: smaller circles

I've create a line chart with chart.js. I changed the legend symbol form from rects to circles by using:
legend: {
display: true,
labels: {
usePointStyle: true,
},
}
I want to change the size of the circles. But according to the documentation this is only possible if I also change the font size:
Label style will match corresponding point style (size is based on fontSize, boxWidth is not used in this case).
- https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration
Does anyone know if there is another option to change the size? Or do I have to use generateLabels().
Here is a codePen to take a look on that.
You can use the boxWidth option to influence the size of the point in the legend:
options: {
legend: {
labels: {
usePointStyle: true,
boxWidth: 6
}
}
}
read the documentation of chartjs about legend

Where do chart.js positioners go for tooltips to move downward

I am wanting to move the tooltip downwards a few pixels instead of always at the top of each stack (on stacked bar chart).
I found this in the docs about positioners, but I cannot understand the structure of code and where it should actually go.
Chart.Tooltip.positioners.custom = function(elements, eventPosition) {
var tooltip = this;
return {
x: 0,
y: -50
};
}
For reference, you can see where I've tried to place it here ( not much wonder why its not working )
Config seems to have a position and yPadding, neither of which seem to have effect I want when I put them in the tooltips options:
tooltips: {
yAlign: 'top',
position: 'nearest',
yPadding: 50
}
yPadding distorts the tooltip, I'm not sure why but it muddles up the caret and box.

Chart.js bar chart: show tooltip on label hover

I'm using Chart.js library to draw a bar chart and I want to show tooltip not only on bar hover, but also on x-axis label hover for that bar. I found onHover method for configuration, but it only lets me access the array of currently hovered bars, which isn't useful.
So, how can I access mouse event and maybe take position from there to compare it against bar labels positions? Or there is another way to do it?
My current configuration:
const countryChartOptions = {
hover: {
onHover: this.onChartHover,
},
};
const onHover = (activeElements) => {
console.log(activeElements);
};
It only prints out hovered bars data, but I'm stuck to figure out how to extend it for behavior I need.
What about :
options: {
tooltips: {
// Add this..
intersect: false
}
}
It works for me
options: {
tooltips:{
intersect : false,
mode:'index'
}
}

Categories