ngx-charts 自定义工具提示

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 .

Answer 1

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: