@zlodiak

Как кастомизировать тултип в ngx-charts?

В документации описана возможность кастомизировать тултип для вертикальной диаграммы. Я попытался это сделать в следующем коде, но не получил ожидаемого результата, помогите пожалуйста разобраться.

ДЕМО здесь.

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>


Я хотел добиться того чтобы во тултипе, который появляется при наведении курсора на диаграмму, было не стандарное значение, моё: Такое:
<h2>{{item.name}}: {{item.value}} : {{item|json}}</h2>

Разметка тоже важна
  • Вопрос задан
  • 170 просмотров
Решения вопроса 1
0xD34F
@0xD34F
Если я правильно понял что вам нужно, то вместо seriesTooltipTemplate надо было передавать tooltipTemplate, типа так.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы