Ngx-charts: How can I make custom tooltip data dynamic?

[faisalnet5]

I'm submitting a ... (check one with "x")

• [ ] bug report - search github for a similar issue or PR before submitting
• [ ] feature request
• [X] support request - use StackOverflow (add the ngx-charts tag) or the gitter chat for support questions

Current behavior

Expected behavior

Reproduction of the problem

What is the motivation / use case for changing the behavior?

Please tell us about your environment:
Windows

• ngx-charts version: x.x.x
  "@swimlane/ngx-charts": "^7.4.0"

• Angular version: x.x.x
  Angular 7

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  Chrome

• Language: [all | TypeScript X.X | ES6/7 | ES5]

Trying to resolve:

I am trying to modify tooltip with model as follows:

{{statusSeries.current}}

However, it is not dynamic. Means if I hover over on any data point it is showing the same model data for all. My intention is to show additional information for each data point when use will hover over.

Is there any suggestion or good example I can get plz?

Regards

[faisalnet5]

I already solved it! Actually, we don't have to modify the model with our custom one. We can simply utilize the default model which is as follows:

<ng-template #tooltipTemplate let-model="model"> ----- </ng-template>

And once we have access to the default model, we can get each and every element of that model and when necessary we can use *ngFor or any condition either in <div>/<span>/<p>, to filter/custom our data.

One simple example can be as follows:

<ng-template #tooltipTemplate let-model="model"> <div style="text-align: left;"> <div *ngFor="let data of dataSeries; let i = index"> <p *ngIf="data .name === model.name"> Here is the data: {{data .value}} </p> </div> </div> </ng-template>
Note: Here 'dataSeries' is the model/array coming from my component

This is not a difficult problem to solve but for me it was a little tricky. Took a lot of my time today. I wish there could have any better documentation. Btw, hope the above example will help others.

Regards

[DwieDima]

There is actually a better way to map custom properties to your tooltip using "extra" attribute on results:

  private setResults(data: Array<any>) {
    this.results = data.map(data => {
      return {
        name: data.name,
        value: data.value
        extra: {
          myData: data
        }
      };
    });
  }

<ngx-charts-bar-vertical
  ...
  [results]="results"
   <ng-template #tooltipTemplate let-model="model">
        {{ model.extra.myData | json }}
   </ng-template>
  ...
</ngx-charts-bar-vertical>

[jainsrijan]

There is actually a better way to map custom properties to your tooltip using "extra" attribute on results:

  private setResults(data: Array<any>) {
    this.results = data.map(data => {
      return {
        name: data.name,
        value: data.value
        extra: {
          myData: data
        }
      };
    });
  }

<ngx-charts-bar-vertical
  ...
  [results]="results"
   <ng-template #tooltipTemplate let-model="model">
        {{ model.extra.myData | json }}
   </ng-template>
  ...
</ngx-charts-bar-vertical>

this does not work for heat map as the model is showing only name, series, and value