Is there an option to create custom tooltips with ChartJS in Angular which displays custom icon on the left side and some data parameters on the right side (50% 50% witdh). I've seen some ideas but none with images included. Thank you!
Chart.js provides for "External (Custom) Tooltips" that can be built using whatever HTML you choose:
options: {
tooltips: {
// Disable the on-canvas tooltip
enabled: false,
custom: function(tooltipModel) {
// your custom tooltip code ...
Multiple examples are provided on the Chart.js samples page:
Based on your comment, here's a quick example of loading an image in a tooltip using the code in the documentation:
const tooltip = document.getElementById("tooltip");
new Chart(document.getElementById("chart"), {
type: "bar",
data: {
labels: ["A", "B", "C"],
datasets: [{
label: "Series 1",
data: [1, 4, 2]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
tooltips: {
enabled: false,
custom: function(tooltipModel) {
// Hide if no tooltip
if (tooltipModel.opacity === 0) {
tooltip.style.opacity = 0;
return;
}
// show the tooltip.
tooltip.style.opacity = 1;
// create the img element and append it to the tooltip element.
const img = document.createElement('img');
img.src = "https://www.gravatar.com/avatar/6fcc51ca5e7029116a383e7aeb0bbaa0?s=32&d=identicon&r=PG&f=1";
tooltip.innerHTML = "";
tooltip.appendChild(img);
// move the tooltip to the 'correct' position.
const position = this._chart.canvas.getBoundingClientRect();
tooltip.style.left = position.left + window.pageXOffset + tooltipModel.caretX + 'px';
tooltip.style.top = position.top + window.pageYOffset + tooltipModel.caretY + 'px';
}
}
}
});#tooltip {
opacity: 0;
position: absolute;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart"></canvas>
<div id="tooltip"></div>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments