3

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?

Manuel Brás
  • 413
  • 7
  • 21
  • ...Are you only trying to access `tooltipTemplate` from `ngAfterViewInit` ? If you try to access it too early (Say, during `ngOnInit` or the `constructor`), then it'll always be undefined. – Eliezer Berlin Aug 29 '23 at 11:15
  • Wait. Isn't `tooltipTemplate` supposed to be a `ViewChild` in your code, not a `ContentChild`? It'd only be a `ContentChild` if you were modifying the source code of `ngx-charts-pie-chart`, which you're obviously not doing. I think. – Eliezer Berlin Aug 29 '23 at 11:25
  • I updated the code. I am actually projecting some code into the ``tooltipTemplate``. I did also try ``@ViewChild('tooltipTemplate') tooltipTemplate: TooltipDirective`` but I'm not sure that is the appropriate way of getting the reference, however this allowed me to do ``this.tooltipTemplate.show.emit(true)`` which ultimately returned``TypeError: Cannot read properties of undefined (reading 'emit')``. – Manuel Brás Aug 29 '23 at 11:38
  • I don't think `TemplateRef` has an event called `show`, so, um. That's not going to work **at all**. But at least your `ng-template` is no longer undefined, which I suppose is progress. Maaaybe you could try to figure out which Token you're supposed to be casting it as, but I suspect more likely you're going to have to go hunting through `pieChart`'s code looking for the `show` event. – Eliezer Berlin Aug 29 '23 at 11:52
  • ``show`` is an ``EventEmitter`` from the ``TooltipDirective`` which is what I reference with ``@ViewChild`` but apparently this is not enough to trigger the display of the tooltip. – Manuel Brás Aug 29 '23 at 11:55
  • `EventEmitter` is a function we subscribe to (So we can do stuff when it's shown), it's not a function that ACTIVATES `show`. But even that was more than I expected. Maybe it IS a `TooltipDirective`. Maybe console.log on `@ViewChild(TooltipDirective) tooltipTemplate: TooltipDirective;` will produce something useful? – Eliezer Berlin Aug 29 '23 at 12:00

1 Answers1

0

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",
          }
       }
    }
}
Jerry
  • 1,005
  • 2
  • 13