How to customize tooltip in ngx-charts?

Question

Angular

The documentation describes the ability to customize the tooltip for the vertical chart. I tried to do it in the following code, but did not get the expected result, please help me figure it out.
DEMO is here.
component:

sources = [
    { "id": 0, "name": "qw1", "value": 8000 },
    { "id": 1, "name": "er2", "value": 7500 },
    { "id": 2, "name": "ty3", "value": 7300 }
  ]

  view: any[] = [400, 200];
  showXAxis = true;
  showYAxis = true;
  showXAxisLabel = false;
  showYAxisLabel = false;
  showDataLabel = true;

  constructor() {}

template:

<ngx-charts-bar-vertical
  [view]="view"
  [results]="sources"
  [xAxis]="showXAxis"
  [yAxis]="showYAxis"
  [showXAxisLabel]="showXAxisLabel"
  [showYAxisLabel]="showYAxisLabel"
  [showDataLabel]="showDataLabel">
    <ng-template #seriesTooltipTemplate let-item="item">
      <h1>
        {{1+2}}
      </h1>
      <h2>{{item.name}}: {{item.value}} : {{item|json}}</h2>
    </ng-template>
</ngx-charts-bar-vertical>

I wanted to ensure that in the tooltip that appears when you hover over the diagram, there was a non-standard value, mine: This:

<h2>{{item.name}}: {{item.value}} : {{item|json}}</h2>

Markup is important too

Answer 1

If I understood correctly what you need, then instead of seriesTooltipTemplate it was necessary to pass tooltipTemplate, like this .