ngx-charts custom tooltip

Question

I'm trying to add a custom tooltip to heatmap cells in ngx-charts-heat-map. However, the data I want to show is neither the series, nor the value, nor the name. It's coming from the source data object, but a different property that's available to me while populating each cell in each series.

I'm aware of tooltipTemplate and I'm already using that, but how can I access data in there that's not the value, name or series?

Update This is in my html:

<ngx-charts-heat-map
            [view]="view"
            [scheme]="colourScheme"
            [showXAxisLabel]="showXAxisLabel"
            [showYAxisLabel]="showYAxisLabel"
            [animations]="animations"
            [trimXAxisTicks]="trimXAxisTicks"
            [trimYAxisTicks]="trimYAxisTicks"
            [legend]="showLegend"
            [xAxis]="xAxis"
            [yAxis]="yAxis"
            [xAxisLabel]="xAxisLabel"
            [yAxisLabel]="yAxisLabel"
            [tooltipDisabled]="tooltipDisabled"
            [results]="heatmap"
            (select)="onSelect($event)">
            <ng-template #tooltipTemplate let-model="model">
              <pre>{{model|json}}</pre>
            </ng-template>
          </ngx-charts-heat-map>

In my ts:

  showLabels = true;
  animations = true;
  xAxis = true;
  yAxis = true;
  showYAxisLabel = true;
  showXAxisLabel = true;
  tooltipDisabled = false;
  xAxisLabel = "Environment";
  yAxisLabel = "Framework";
  rotateXAxisTicks = true;
  trimXAxisTicks = false;
  trimYAxisTicks = false;
  showLegend = true;
  colourScheme = {
    domain: ["#C91414", "#E3071D", "#FF7E01", "#FFBE00", "#75AD6F", "#1D7044"],
  };

  heatmap = [
  ];

...
series.push({
          name: f.name,
          value: f.value,
          tooltipText: `${ f.percentage }% - ${ f.number } foo`
        });

On the frontend however, when rendering {{model|json}} there is only series, name and value, no tooltipText.
Looking at https://github.com/swimlane/ngx-charts/blob/master/projects/swimlane/ngx-charts/src/lib/heat-map/heat-map-cell-series.component.ts#L78 I'm not sure how to get the tooltip to display the tooltipText.

I believe this is answered here:, is this not what you're looking for? https://stackoverflow.com/questions/51557129/custom-tooltip-contents-ngx-charts-angular2-typescript — LeftBrain, Jan 04 '23 at 04:38
@LeftBrainCreated that doesn't seem to work for the heat map. The tooltip is empty when using the `tooltipText`. — David O'Brien, Jan 04 '23 at 09:43
@LeftBrainCreated this does work if I use `ngx-charts-bar-horizontal-stacked` by the way. So it seems the heat map doesn't have `tooltipText` implemented. — David O'Brien, Jan 04 '23 at 09:47

score 0 · Answer 1 · answered Jan 05 '23 at 00:16

I actually worked it out I'm ecstatic.
HTML:

          <ngx-charts-heat-map
            [view]="view"
            [scheme]="colourScheme"
            [showXAxisLabel]="showXAxisLabel"
            [showYAxisLabel]="showYAxisLabel"
            [animations]="animations"
            [trimXAxisTicks]="trimXAxisTicks"
            [trimYAxisTicks]="trimYAxisTicks"
            [legend]="showLegend"
            [xAxis]="xAxis"
            [yAxis]="yAxis"
            [xAxisLabel]="xAxisLabel"
            [yAxisLabel]="yAxisLabel"
            [tooltipDisabled]="tooltipDisabled"
            [tooltipText]="tooltipText"
            [results]="heatmap"
            (select)="onSelect($event)">
          </ngx-charts-heat-map>

TS:

  tooltipText(data): string {
    return (JSON.parse(JSON.stringify(data))).cell.tooltipText;
  }

Making sure that each series has a custom tooltipText set, this then shows a heatmap with custom tooltip:

ngx-charts custom tooltip

1 Answers1