Angular - ngx charts - how to show tooltip on command

Question

I'm trying to create a custom legend component where each data entry has its own material progress bar. If any of the entries are hovered, I want the pie chart tooltip to be shown on the corresponding data entry.

Here is my template:

<ngx-charts-pie-chart
    #pieChart
    ...
>
    <ng-template #tooltipTemplate let-model="model">
        <div style="padding: 5px;">
            <pre>{{ model.name }}</pre>
            <p style="font-size: 1rem;">{{ model.value | currency:'EUR':true }}</p>
        </div>
    </ng-template>
</ngx-charts-pie-chart>

<app-portfolio-preview-card-positions
    [portfolioHoldings]="portfolio.holdings"
    [portfolioTotal]="portfolio.total"
    (onPositionHovered)="positionHovered($event)"
></app-portfolio-preview-card-positions>

The problem I'm facing is that I am unable to explicitly show the tooltip using the template reference, like so:

@ContentChild('tooltipTemplate') tooltipTemplate!: TemplateRef<any>;
@ViewChild('pieChart') pieChart!: PieChartComponent;
...
positionHovered(name: string) {
    // Here I want to set the argument as the pie chart active entry and display its tooltip
    this.pieChart.activeEntries = [{name: name}, ...this.pieChart.activeEntries];
    this.pieChart.activate.emit({ value: {name: name}, entries: this.pieChart.activeEntries });
    console.log(this.tooltipTemplate);
}

The tooltipTemplate seems to always be undefined here.

What am I missing in order to call the tooltip on command? Is it even possible?

Answer 1

Tooltips implementation in ngx-charts

In component.html

<ngx-charts-pie-chart #pieChart [options]="pieChartOptions.options">
    <ng-template #tooltipTemplate let-model="model">
    </ng-template>
</ngx-charts-pie-chart>

In component.ts
Add tooltips key-value-object in options of configuration

@Component()
export class PieChartComponent {
   public pieChartOptions = {  
          options: {   
             tooltips: {
             shadowOffsetX: 1,
             shadowOffsetY: 1,
             shadowBlur: 8,
             shadowColor: "rgba(0, 0, 0, 0.25)",
             backgroundColor: "#fff",
             titleFontColor: "#000",
             bodyFontColor: "#000",
          }
       }
    }
}