ChartJS: changing the positions of tooltips
I have a problem with ChartJS: I need to use a polar plot for my project and I have to show this plot in a PDF file.
I also need to display tooltips without hovering. The problem is that these tooltips are at the center of every information. I want this particular one to be found outside of the graph. I changed Chart.js a lot and now I have:
Unfortunately, when the labels are long, the display doesn't fit:
My method is not very good. Someone has already managed to display tooltips outside the circle?
source to share
Currently, the center of your label text is where you want the label to appear. If you change it to the start of your label, or the end of your label for labels to the right and left of the chart, you have a much better layout.
You can also align the labels closer to the end point of the sector rather than to the extreme edge of the scale.
This is how you do it
1. Redefine the scale
So that the diagram does not occupy the entire canvas. I hardcoded these values for a sample dataset, you could just as easily use the input to get the appropriate values
scaleOverride: true,
scaleStartValue: 0,
scaleStepWidth: 40,
scaleSteps: 10,
2. Draw your labels
The best place would be the end of your animation.
onAnimationComplete: function () {
this.segments.forEach(function (segment) {
Figure out the outer edge of each sector - it's not that hard. We just use the same function as in tooltip position
var outerEdge = Chart.Arc.prototype.tooltipPosition.apply({
x: this.chart.width / 2,
y: this.chart.height / 2,
startAngle: segment.startAngle,
endAngle: segment.endAngle,
outerRadius: segment.outerRadius * 2 + 10,
innerRadius: 0
})
externalRadius decides how far from the center you want your labels to appear. X 2 is because the tooltip usually appears in the middle of the sector. "+ 10" is filled so that the label does not stick too close to the end of the sector
If you want the labels to appear on the outer edge of the scale use outerRadius = self.scale.drawingArea * 2
(self-adjusting to Chartjs chart object)
3. Set text alignment
It depends on whether you are on the right or left side of the graph (or above or below).
To do this, first normalize the angle (so that it is between 0 and 2 * PI)
var normalizedAngle = (segment.startAngle + segment.endAngle) / 2;
while (normalizedAngle > 2 * Math.PI) {
normalizedAngle -= (2 * Math.PI)
}
Then just set the position of the text based on the angle range (0 radians are on the right side and radians increase counterclockwise).
if (normalizedAngle < (Math.PI * 0.4) || (normalizedAngle > Math.PI * 1.5))
ctx.textAlign = "start";
else if (normalizedAngle > (Math.PI * 0.4) && (normalizedAngle < Math.PI * 0.6)) {
outerEdge.y += 5;
ctx.textAlign = "center";
}
else if (normalizedAngle > (Math.PI * 1.4) && (normalizedAngle < Math.PI * 1.6)) {
outerEdge.y -5;
ctx.textAlign = "center";
}
else
ctx.textAlign = "end";
Center makes the labels that appear near the top and bottom of the graph and aligns their text to the edge of the sector. +5 and -5 are filled so that they don't stick too close.
ctx.fillText(segment.label, outerEdge.x, outerEdge.y);
Fiddle - http://jsfiddle.net/nyjodx4v/
And this is how it looks
source to share