3👍
I think this is the way you want to see the hover over tooltips:
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["Buchen (65%)", "Eschen (11%)", "Ahorn (8%)", "Eichen, Linden und weitere Laubhölzer (11%)", "Nadelholz (5%)"],
datasets: [{
backgroundColor: ["#2F4F4F", "#008080", "#2E8B57", "#3CB371", "#3AC9A3"],
data: [65, 11, 8, 11, 5]
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
onClick: (e) => e.stopPropagation(),
display: true,
position: 'right',
},
tooltip: {
callbacks: {
label: function(context) {
return context.label;
}
}
}
}
}
});
1👍
After testing this might be the solution and also soft coded the labels. As your labels were hard coded and if the values would change it should match up automatically.
Added a video as well breaking it down: https://youtu.be/b6oVAcQijIw
// Created an array to soft code your values in the labels.
const datavalue = [65,11,8,11,5];
const datalabels = ['Buchen', 'Eschen', 'Ahorn', 'Eichen, Linden und weitere Laubhölzer', 'Nadelholz'];
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: [datalabels[0], datalabels[1] + ' (' + datavalue[1] +'%)', datalabels[2] + ' (' + datavalue[2] +'%)', datalabels[3] + ' (' + datavalue[3] +'%)', datalabels[4] + ' (' + datavalue[4] +'%)'],
datasets: [
{
backgroundColor: ["#2F4F4F", "#008080","#2E8B57","#3CB371","#3AC9A3"],
data: datavalue
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
tooltips: {
enabled: false
},
plugins: {
legend: {
onClick: (e) => e.stopPropagation(),
display: true,
position: 'right',
},
// For the tooltipItem is the trigger of the hover effect.
tooltip: {
callbacks: {
label: function(tooltipItem){
let label = myChart.data.labels[tooltipItem.dataIndex];
let value = myChart.data.datasets[tooltipItem.datasetIndex].data[tooltipItem.dataIndex];
return label;
}
}
}
}
}
});
0👍
Just read the description and I noticed you are gonna change tooltips.
Okay, I am gonna write how I solve that problem.
tooltips: {
titleFontSize: 15,
titleMarginBottom: 10,
bodyFontSize: 15,
bodySpacing: 5,
xPadding: 15,
yPadding: 10,
enabled: false,
callbacks: {
label: function (context, data) {
return parseFloat(context.value).toFixed(1);
},
title: function (context) {
return mediaList.length;
},
},
custom: function (tooltipModel) {
let tooltipEl = document.getElementById("chartjs-tooltip");
// Create element on first render
if (!tooltipEl) {
tooltipEl = document.createElement("div");
tooltipEl.id = "chartjs-tooltip";
tooltipEl.innerHTML = "<table></table>";
document.body.appendChild(tooltipEl);
}
tooltipEl.classList.add("tooltip-wrapper");
// Hide if no tooltip
if (tooltipModel.opacity === 0) {
tooltipEl.style.opacity = 0;
return;
}
// Set caret Position
tooltipEl.classList.remove("above", "below", "no-transform");
if (tooltipModel.yAlign) {
tooltipEl.classList.add(tooltipModel.yAlign);
} else {
tooltipEl.classList.add("no-transform");
}
function getBody(bodyItem) {
return bodyItem.lines;
}
// Set Text
if (tooltipModel.body) {
let titleLines = tooltipModel.title || [];
let bodyLines = tooltipModel.body.map(getBody);
let innerHtml = "<thead>";
titleLines.forEach(function (title) {
innerHtml +=
"<tr><th style='text-align: left'>" + title + "</th></tr>";
});
innerHtml += "</thead><tbody>";
bodyLines.forEach(function (body, i) {
const colors = tooltipModel.labelColors[i];
let style = "background:" + colors.backgroundColor;
style += "; border-color:" + colors.borderColor;
style += "; border-width: 2px";
style += "; width: 15px";
style += "; height: 15px";
style += "; display: inline-block";
style += "; margin: 0px 5px";
style += "; border-radius: 50%";
let span = '<span style="' + style + '"></span>';
innerHtml +=
"<tr><td style='display: flex;align-items: center'>" +
parseFloat(body[0].split(":")[1]).toFixed(1) +
"%" +
span +
body[0].split(":")[0] +
"</td></tr>";
});
innerHtml += "</tbody>";
var tableRoot = tooltipEl.querySelector("table");
tableRoot.innerHTML = innerHtml;
}
// `this` will be the overall tooltip
const position = this._chart.canvas.getBoundingClientRect();
// Display, position, and set styles for font
tooltipEl.style.backgroundColor = "rgb(45 54 89 / 75%)";
tooltipEl.style.color = "white";
tooltipEl.style.borderRadius = "6px";
tooltipEl.style.opacity = 1;
tooltipEl.style.position = "absolute";
tooltipEl.style.width = "max-content";
tooltipEl.style.transform = "translate(-106%, -50%)";
tooltipEl.style.left =
position.left + window.pageXOffset + tooltipModel.caretX + "px";
tooltipEl.style.top =
position.top + window.pageYOffset + tooltipModel.caretY + "px";
tooltipEl.style.fontFamily = tooltipModel._bodyFontFamily;
tooltipEl.style.fontSize = tooltipModel.bodyFontSize + "px";
tooltipEl.style.fontStyle = tooltipModel._bodyFontStyle;
tooltipEl.style.padding =
tooltipModel.yPadding + "px " + tooltipModel.xPadding + "px";
tooltipEl.style.pointerEvents = "none";
},
},
As you can see here, you should create a custom tooltip in the tooltip option.
-1👍
Under Tooltip Callbacks there is a reference to modifying the tooltip label: https://www.chartjs.org/docs/3.0.2/configuration/tooltip.html#label-callback
I think you need to add something like this:
options: {
plugins: {
tooltip: {
callbacks: {
label: function(context) {
var newLabel = context.label || '';
var lastIndexOfSpace = newLabel.lastIndexOf(' ');
if (lastIndexOfSpace > 0) {
newLabel = newLabel.substring(0, lastIndexOfSpace);
}
return newLabel;
}
}
}
}
}
Source:stackexchange.com