ng2-charts: How to change Hover with chartHovered Event

Question

my problem is, I want to see the difference between every point when hovered. f.e I have the points 5,4,3 so I dont want to see 5,4,3 when hovered. I want to see 0(because it is the startpoint),1,1.

Can someone help me please.

Thank you

Answer 1

if you want to edit the tooltip when hovered, you should use with label callback in tooltip options:

HTML:

<div  style="display: block">
             <canvas baseChart #chart1="base-chart"
                     ...
                     [options]="chartOption"                       
                     (chartHover)="chartHovered($event)"
                     ...
           </div>

component.ts

public chartOption = {
tooltips: {
  callbacks: {
      label: function(tooltipItem, data) {

            //your logic...

             var label= tooltipItem.index || 0;          
             return label;

          }
        }  
     }        
  }

for deep look see : https://www.chartjs.org/docs/latest/configuration/tooltip.html#label-callback