how to set tooltip on ngx-charts in angular

3.3k Views Asked by At

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. enter image description here

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}
] 
1

There are 1 best solutions below

4
On

Everything look just fine in you code, maybe the problem is with model, try to add some text like:

            <ng-template #tooltipTemplate let-model="model">
                <div class="tooltip">
                    MyToolTip: 
                    {{model.tool_tip_text}}
                </div>
            </ng-template>

Just to make sure if text in the tooltip is displaying or not.
otherwise check this live demo maybe it will help you out.