Custom tooltip contents @ ngx-charts | Angular2+ | TypeScript

Question

I've been trying to set a custom label in a line chart's tooltip , e.g., modified number of minutes in HH:mm format (74 min --> 1:14), for quite some time now, but unfortunately without any success. Displaying the value as 1.283(...3) is not an alternative.

Number to HH:mm as tooltip label

Does anybody know how to preserve the x and y axis values (a date and a number respectively), and modify the tooltip display value?

For example: https://swimlane.github.io/ngx-charts/#/ngx-charts/line-chart

Instead of having a tooltip that displays Color, Country name and Number, --> Color, Country name and String (Number > 3000 ? 'high' : 'low';)

Current behavior Works as intended.

Expected behavior To display custom labels.

Reproduction of the problem Link in the description above

What is the motivation / use case for changing the behavior? Being able to customize tooltips' contents

Please tell us about your environment: OS: Win 10 x64, IDE: Eclipse EE

ngx-charts version: 3.0.2

Angular version: 6.0.2

Browser: [all]

Language: [TypeScript 2.3.3]

Answer 1

You can define your own tooltip templates and render any HTML you like in them:

<ngx-charts-line-chart        
    [scheme]="colorScheme"
    [results]="multi" ...>
  <ng-template #tooltipTemplate let-model="model">
    This is the single point tooltip template
    <pre>{{model|json}}</pre>
  </ng-template>

  <ng-template #seriesTooltipTemplate let-model="model">
    This is vertical line tooltip template
    <pre>{{model|json}}</pre>        
  </ng-template>
</ngx-charts-line-chart>

Example: https://swimlane.github.io/ngx-charts/#/ngx-charts/tooltip-templates

Code is here: https://github.com/swimlane/ngx-charts/blob/8ebb3dbcbbea443fefdcafd1f5c9069df0e0c4ae/src/app/app.component.html#L992-L998