How to always show line chart tooltip in ionic-angular.? - ionic-framework

Question

i am working on chart.js in ionic with angular and i am generating a chart which is line chart , i dnt want to show dots for each point and show tooltip on hover i want to show values alway without hover, i tried many ways which are mentioned on stackover flow as well but none of them working so i thought to share my code
following is my code
import { Component, OnInit, ViewChild, ElementRef } from "#angular/core";
import { Chart } from "chart.js";
#Component({
selector: 'app-bp',
templateUrl: './bp.page.html',
styleUrls: ['./bp.page.scss'],
})
export class BpPage implements OnInit {
#ViewChild("barCanvas") barCanvas: ElementRef;
private barChart: Chart;
constructor() {}
ngOnInit() {
setTimeout(() =>{
this.barChart = new Chart(this.barCanvas.nativeElement, {
type: "line",
data: {
labels: ["12-Apr", "13-Apr", "14-Apr", "15-Apr", "16-Apr", "17-Apr", "18-Apr"],
datasets: [{
label: "High",
backgroundColor: "#3e95cd",
borderColor: "#3e95cd",
pointBorderWidth: 10,
pointHoverRadius: 10,
data: [10943, 29649, 6444, 2330, 36694, 10943, 29649],
fill: false,
borderWidth: 3
}, {
label: "Low",
backgroundColor: "#ff3300",
borderColor: "#ff3300",
pointBorderWidth: 10,
pointHoverRadius: 10,
data: [9283, 1251, 6416, 2374, 9182, 9283, 1251],
fill: false,
borderWidth: 3
}]
},
options: {
scales: {
yAxes: [
{
ticks: {
beginAtZero: true
}
}
]
},
},
});
},1500);
}
}

Answer 1

To always show the tooltips, you must follow an approach similar to the one described here: Chart.js v2: How to make tooltips always appear on pie chart?
You have to define for your chart the showAllTooltips option as below:
let barChart = new Chart(this.barCanvas.nativeElement, {
type: "line",
//...
//...
},
options: {
showAllTooltips: true,
//...
}
});
And than you must call the code that defines the showAllTooltips behavior.
Here is a stackblitz of the working solution.
The method configureTooltipBehavior() is the one responsible for the magic.
https://stackblitz.com/edit/angular-ivy-fzpyva