I have a series of graphs to be displayed. I am dynamically generating these graphs using below code with in a for loop.
<div>
<mat-grid-list cols="2" rowHeight="2:1">
<mat-grid-tile *ngFor="let item of _homeservice.userDashboardGraphData; let i = index">
<mat-card style="display: flex;flex-direction: column;justify-content: space-evenly;align-items: center;">
<h3><u>{{item.graph_title}}</u></h3>
<ngx-charts-bar-vertical [view]="view" [scheme]="colorScheme" [results]="item.graph_data"
gradient="false" xAxis="true" yAxis="true" [legend]="boolFalse" showXAxisLabel="true"
showYAxisLabel="true" [xAxisLabel]="item.x_axis_label" [yAxisLabel]="item.y_axis_label">
<ng-template #tooltipTemplate let-model="model">
<div class="tooltip">
{{model.tool_tip_text}}
</div>
</ng-template>
</ngx-charts-bar-vertical>
</mat-card>
</mat-grid-tile>
</mat-grid-list>
</div>
Everything looks fine except for the tooltip, I am getting an empty tooltip. Not sure if #tooltipTemplate reference is causing the issue.
here is my series data
[
{name: "Doe, John", tool_tip_text: "Doe, John 00:11:39", value: 699}
{name: "Will, Smith", tool_tip_text: "Will, Smith 00:00:52", value: 52}
{name: "Joe, Biden", tool_tip_text: "Joe, Biden 00:00:22", value: 22}
{name: "Trump, Donald", tool_tip_text: "Trump, Donald 00:00:07", value: 7}
]
Everything look just fine in you code, maybe the problem is with
model
, try to add some text like:Just to make sure if text in the tooltip is displaying or not.
otherwise check this live demo maybe it will help you out.