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

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);

  }



  
}

Does this answer your question? [Chart.js v2: How to make tooltips always appear on pie chart?](https://stackoverflow.com/questions/36992922/chart-js-v2-how-to-make-tooltips-always-appear-on-pie-chart) — francisco neto, Oct 05 '20 at 12:40

score 0 · Accepted Answer · edited Oct 05 '20 at 13:19

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

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

1 Answers1