Tooltip template does not get render when multi column charts are plot in igx-data-chart

[Vighneshaa]

When I set the property as unknownValuePlotting = UnknownValuePlotting.LinearInterpolate; and plot the igx-data Chart for multiple axis than only one axis tooltip is getting rendered and the remaining axis tooltip does not get rendered. So, How is it possible to apply the above property and chart multiple chart in igx-data-chart

Code Snippet:

<ng-template let-series="series" let-item="item" #tooltipTemplate>
        <div class="fs-10">
            <div>Date: {{ item[DateKey] | date: 'MM/dd/yyyy' }}</div>
            <div *ngFor="let tooltipField of getDataForTooltip(item, series)">
                {{ tooltipField.key }} : {{ tooltipField.value }}
            </div>
        </div>
    </ng-template>

    <igx-line-series [unknownValuePlotting]="unknownValuePlotting" #lineSeries
                    *ngFor="let axis of lineSeries" [xAxis]="xAxis" [yAxis]="yAxisMap[axis.template]"
                    [tooltipTemplate]="tooltipTemplate" [markerType]="'None'" [valueMemberPath]="axis.title"
                    [title]="axis.title" domChange (onInit)="seriesOnInit(lineSeries)">
        </igx-line-series>

[Vighneshaa]

Did you get a chance to check this? @mddifilippo89

[mddifilippo89]

Hello, tooltip-template.zip

Please see sample attached and reproduce the behavior. Are you setting the values null or NAN?

[Vighneshaa]

@mddifilippo89 In our scenario, we are utilizing multiple axes, which means we are employing various data types such as numerical axes, percentage axes, and so forth. So, the tooltip gets rendered for only single axis.

[Vighneshaa]

Did you get a chance to check this? @mddifilippo89

[Vighneshaa]

Any updates here? @mddifilippo89

[mddifilippo89]

Are you referencing the Interactivity module? I suggest using the DataTooltipLayer. Make sure to add the Annotations, and Interactivity modules in your app.module.ts (for example)

<igx-data-chart width="100%" height="100%" [dataSource]="data">

        <igx-data-tool-tip-layer
        name="DataToolTipLayer"
        #dataToolTipLayer>
        </igx-data-tool-tip-layer>

        <igx-category-x-axis #xAxisShared label="Date" gap=0.75></igx-category-x-axis>
        <igx-numeric-y-axis #yAxisRight
            labelLocation="OutsideRight"
            title="Stock Price"
            minimumValue="400"
            maximumValue="700">
        </igx-numeric-y-axis>
        <igx-numeric-y-axis #yAxisLeft
            labelLocation="OutsideLeft"
            title="Trade Volume"
            minimumValue="5000"
            maximumValue="45000"
            abbreviateLargeNumbers=true
            majorStrokeThickness="0">
        </igx-numeric-y-axis>

        <igx-column-series [xAxis]="xAxisShared"
            [yAxis]="yAxisLeft"
            valueMemberPath="Volume"
            showDefaultTooltip=false
            title="Trade Volume"
            unknownValuePlotting="LinearInterpolate">
        </igx-column-series>

        <igx-financial-price-series
            [xAxis]="xAxisShared"
            [yAxis]="yAxisRight"
            displayType="Candlestick"
            highMemberPath="High"
            lowMemberPath="Low"
            closeMemberPath="Close"
            openMemberPath="Open"
            showDefaultTooltip=false
            volumeMemberPath="Volume"
            unknownValuePlotting="LinearInterpolate"></igx-financial-price-series>
    </igx-data-chart>

[mddifilippo89]

import { NgModule } from "@angular/core"; import { FormsModule } from "@angular/forms"; import { CommonModule } from "@angular/common"; import { BrowserModule } from "@angular/platform-browser"; import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; import { AppComponent } from "./app.component";

import { IgxLegendModule, IgxNumberAbbreviatorModule, IgxDataChartCoreModule, IgxDataChartScatterModule, IgxDataChartScatterCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts';

@NgModule({ bootstrap: [AppComponent], declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, CommonModule, FormsModule, IgxLegendModule, IgxNumberAbbreviatorModule, IgxDataChartCoreModule, IgxDataChartScatterModule, IgxDataChartScatterCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule ], providers: [], schemas: [] }) export class AppModule {}

[mddifilippo89]

tooltip-template.zip

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.