Inject html into ng2-chart tooltip to preview image - html

Question

I have images with scores associated with them streaming to my app. As the scores come in I've plotted them on a line chart using ng2-charts.
I want to customize the tooltip on the chart to display a smaller preview of the image that it came with. I've scoured around but haven't been able to figure out how to inject the custom html into the tooltip or if it is even possible without creating a custom chart.
Any advice on whether or not this is possible and how would be greatly appreciated.
This is in Ionic 4 with angular 6 and my modules versions are:
"ng2-charts": "^2.2.2",
"chart.js": "^2.8.0",
Not sure this is necessary for my question but here's how I set up the chart so far.
Markdown
<ion-content padding>
<div class="row" style="display: block;">
<div class="col-md-6">
<div style="display: block;">
<canvas baseChart width="1200" height="600"
[datasets]="lineChartData"
[labels]="lineChartLabels"
[options]="lineChartOptions"
[colors]="lineChartColors"
[legend]="lineChartLegend"
[chartType]="lineChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
</ion-content>
Initializing the chart
// Initializing Chart settings
public lineChartLegend:boolean = true;
public lineChartType:string = 'line';
public lineChartData:ChartDataSets[] = [{ data: this.scoreArr, label: 'Image Scores' }];
public lineChartLabels:Label[] = [];
public lineChartOptions: (ChartOptions & { annotation: any }) = {
responsive: true,
scales: {
// We use this empty structure as a placeholder for dynamic theming.
xAxes: [{}],
yAxes: [
{
id: 'y-axis-0',
position: 'left',
}
]
},
annotation: {
annotations: [
{
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-0',
value: 'March',
borderColor: 'orange',
borderWidth: 2,
label: {
enabled: true,
fontColor: 'orange',
content: 'LineAnno'
}
},
],
}
};
public lineChartColors:Color[] = [
{ // dark grey
backgroundColor: 'rgba(77,83,96,0.2)',
borderColor: 'rgba(77,83,96,1)',
pointBackgroundColor: 'rgba(77,83,96,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(77,83,96,1)'
}
];

Answer 1

To anyone who is curious. This is how. However, the tooltip doesn't go away when you stop hovering but I'll figure it out in a bit.
customTooltips = function(tooltip) {
//**************** This is what was messing me up
var tooltipEl = document.getElementById('chartjs-tooltipsdfljsdflkswdjf');
// Apparently grabbing my existing tooltipel was causing my issue
// if you make tooltipel null and just make your own following the
// chart.js docs this will work fine.
// ***************
if (!tooltipEl) {
console.log("tooltipel was null");
tooltipEl = document.createElement('div');
tooltipEl.id = 'chartjs-tooltip';
tooltipEl.innerHTML = "<table></table>"
document.body.appendChild(tooltipEl);
}
// Hide if no tooltip
if (tooltip.opacity === 0) {
tooltipEl.style.opacity = '0';
return;
}
tooltipEl.classList.remove('above','below','no-transform');
if (tooltip.yAlign) {
tooltipEl.classList.add(tooltip.yAlign);
} else {
tooltipEl.classList.add('no-transform');
}
function getBody(bodyItem) {
return bodyItem.lines;
}
// Set Text
if (tooltip.body) {
console.log("Bodys not null: ", tooltip.body);
var titleLines = tooltip.title || [];
var bodyLines = tooltip.body.map(getBody);
var innerHtml = '<thead>';
titleLines.forEach(function(title) {
innerHtml += '<tr><th>' + title + '</th></tr>';
innerHtml += '<tr><th><img src="https://www.mariowiki.com/images/thumb/2/2b/Marioptds.png/146px-Marioptds.png" style="width:42px;height:42px;border:0;"/></th></tr>';
});
innerHtml += '</thead><tbody>';
bodyLines.forEach(function(body, i) {
var colors = tooltip.labelColors[i];
var style = 'background:' + colors.backgroundColor;
style += '; border-color:' + colors.borderColor;
style += '; border-width: 2px';
var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
innerHtml += '<tr><td>' + span + body + '</td></tr>';
});
innerHtml += '</tbody>';
var tableRoot = tooltipEl.querySelector('table');
console.log('TableRoot: ' + tableRoot);
tableRoot.innerHTML = innerHtml;
}
// `this` will be the overall tooltip
var position = this._chart.canvas.getBoundingClientRect();
// Display, position, and set styles for font
tooltipEl.style.opacity = '1';
tooltipEl.style.position = 'absolute';
tooltipEl.style.left = position.left + window.pageXOffset + tooltip.caretX + 'px';
tooltipEl.style.top = position.top + window.pageYOffset + tooltip.caretY + 'px';
tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
tooltipEl.style.fontSize = tooltip.bodyFontSize + 'px';
tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
tooltipEl.style.pointerEvents = 'none';
};
// Initializing Chart settings
public lineChartLegend:boolean = true;
public lineChartType:string = 'line';
public lineChartData:ChartDataSets[] = [{ data: this.scoreArr, label: 'Image Scores' }];
public lineChartLabels:Label[] = [];
public lineChartOptions: (ChartOptions & { annotation: any }) = {
responsive: true,
scales: {
// We use this empty structure as a placeholder for dynamic theming.
xAxes: [{}],
yAxes: [
{
id: 'y-axis-0',
position: 'left',
}
]
},
annotation: {
annotations: [
{
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-0',
value: 'March',
borderColor: 'orange',
borderWidth: 2,
label: {
enabled: true,
fontColor: 'orange',
content: 'LineAnno'
}
},
],
},
tooltips: {
enabled: false,
mode: 'index',
position: 'nearest',
custom: this.customTooltips
}
};
public lineChartColors:Color[] = [
{ // dark grey
backgroundColor: 'rgba(77,83,96,0.2)',
borderColor: 'rgba(77,83,96,1)',
pointBackgroundColor: 'rgba(77,83,96,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(77,83,96,1)'
}
];