How can I enable tooltips for an igx-data-chart with a category X-axis and line series?

[Vighneshaa]

I am using an igx-data-chart with a line series and a category X-axis. I would like to know if it's possible to display the tooltip, as shown in the screenshot, for this configuration. Specifically, I am looking for tooltip functionality similar to what is available for the igx-data-chart with a category X-axis and line series.

The code snippet is shown below:- `<igx-data-chart domChange (onInit)="loadAxes(chart)" [crosshairVisibility]="crosshairVisibility" #chart height="100%" width="100%" [legend]="legend" [defaultInteraction]="defaultInteraction" [brushes]="brushColor" [isHorizontalZoomEnabled]="false" [isVerticalZoomEnabled]="false" [dataSource]="chartData" highlightingMode="FadeOthersSpecific" (plotAreaMouseLeftButtonDown)="chart_plotAreaMouseLeftButtonDown" (seriesMouseLeftButtonDown)="chart_seriesMouseLeftButtonDown($event)" highlightingBehavior="NearestItemsAndSeries">

                <igx-category-x-axis useClusteringMode="true" #xAxis [label]="xAxisLabel" overlap="0" gap="0.1">
                </igx-category-x-axis>

                <!-- (onInit)="seriesOnInit(lineSeries)" -->
                <igx-line-series [unknownValuePlotting]="unknownValuePlotting" #lineSeries
                    *ngFor="let axis of lineSeries" [xAxis]="xAxis" [yAxis]="yAxes[axis.template]"
                    [brush]="axis.lineColor" hitTestMode="ColorEncoded"
                    [markerType]="'None'" [valueMemberPath]="axis.title" [title]="axis.title" domChange
                    [thickness]="defaultThickness" showDefaultTooltip="true"
                    [isHighlightingEnabled]="true">
                </igx-line-series>
                
                <igx-data-tool-tip-layer></igx-data-tool-tip-layer>

                <!-- <igx-crosshair-layer brush="gray"></igx-crosshair-layer> -->

                <!-- <igx-final-value-layer></igx-final-value-layer> -->

            </igx-data-chart>`

[mddifilippo89]

Hello and thank you for reaching out. The sample above has showDefaultTooltip set to false because it's using the DataTooltipLayer.

eg. https://codesandbox.io/p/devbox/busy-turing-sekw0r

After toggling showDefaultTooltip to false, if you are still having issues please make sure similar modules are loaded, especially the IgxDataChartInteractivityModule

see app.module.ts in the sample above. Let me know if you have any questions.

[Vighneshaa]

@mddifilippo89 Hello I tried out the solution you suggested and it is not working. Also, I have added the module IgxDataChartInteractivityModule in module.ts file

[Vighneshaa]

@mddifilippo89 Any updates?

[mddifilippo89]

@Vighneshaa I will require a sample from you to investigate this further.

[Vighneshaa]

@mddifilippo89 The file attached below is the sample file:-

https://equitydatascience-my.sharepoint.com/:u:/p/vighnesha/EVQgoIDbqs1AhQnFHE41DVUBM4fmZbuC43NiYIf3vgEXdA?e=I7gOiW

[github-actions[bot]]

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