Customizing tooltip's contents *updated: Aug 1st*

I’m submitting a … (check one with “x”)

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

Hello everyone,

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

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 a String (e.g. Number > 3000 ? ‘high’ : 'low’😉

Show old issues (from beginning up to Jul 31st, incl.)

Current situation, Jul 31th:

Adding the [tooltipTemplate]=“seriesTooltipTemplate” to ngx-charts-circle-series solved one of the problems and created another - minutes will be dispalyed as HH:mm via a custom pipe, but the name of the parameter is lost along the way.

As pseudo code intended:

<ngx-my-chart 
   [options]="options_values"
   <svgs.../>
   
   <svg:g ngx-charts-circle-series
      ...
      [tooltipTemplate]="seriesTooltipTemplate"
      ...
        />
       <ng-template #seriesTooltipTemplate let-model="model">
          {{model.name | date: 'dd.MM.yyyy'}} &diams; {{model.value | durationHhmm}}
        </ng-template>
   
   <svgs.../>
</ngx-my-chart>

Second issue is still there, unchanged. The vertical line’s tooltip would still not find a “defined” value, thus the NaN:NaN. The durationHhmm pipe takes a number and returns its string equivalent in HH:mm format.

<ngx-charts-line-chart id='chart' 
    ...
    ...
    ...
   >
    <ng-template #tooltipTemplate let-model="model">
          write your custom tooltip html here. the data is in model
    </ng-template>
 </ngx-charts-line-chart>

After having the code above implemented, the tooltip value was indeed overwritten ( only for the vertical line values, not when I hover over a data point ) and now shows nothing, i.e. the data binding fails.

As pseudo code intended:

<ngx-my-chart 
   [options]="options_values"
   <svgs.../>
   
   <svg:g ngx-charts-tooltip-area
      ...
      [tooltipTemplate]="tooltipTemplate"
      ...
        />
       <ng-template #tooltipTemplate let-model="model">
          {{model.name}}Name: {{model.value}}Value
        </ng-template>
   
   <svgs.../>
</ngx-my-chart>

And in the component.ts:

 @ContentChild('tooltipTemplate') tooltipTemplate: TemplateRef<any>;
 @ContentChild('seriesTooltipTemplate') seriesTooltipTemplate: TemplateRef<any>;

Any help/suggestion is very welcome.

Sorry for posting in the wrong section.

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]

[marjan-georgiev]

I replied to your stackoverflow comment. Here’s a stackblitz that shows how to use tooltip templates: https://stackblitz.com/edit/vertical-bar-chart-yvy5bx?file=app%2Fapp.component.ts

Also, any custom properties you assign are not passed down. There is an open issue around that.

[marjan-georgiev]

A fellow Berliner! I occasionally attend the Angular and Data Visualization meetups here. If you’re ever at those and see me, come say hi. 🍻

Glad we resolved the problem.