Chart tooltip does not work with absolute positioning

[Michael Aston]

If a chart has a style of postion:absolute on its parent div then the tooltip feature no longer works.

We are using absolute positioning on chart to work around the issue that the chart renders after all the other content on the page. As we have the charts at the top of the page this causes the content below to "jump" down the page as the space is allocated for the charts under normal page flow. 

To avoid this we have empty div placeholders that create the space the charts will render into. We use absolute positioning to position the charts over the place holders. 

This approach seems to break the tooltip feature on the chart though.

Is it possible to get the tooltip feature working with absolute positioning?

If you have a better approach to prevent the content jump that doesn't break the tooltip that would also be a solution.

    <div class="container-fluid">

        <div class="vx-pagetitle">

            <span class="vx-icon-remediation"></span>

            <span>Remediation</span>

        </div>

        <div style="position: relative">

            <div style="position: absolute; top: 0; left: 0; right: 0;">

                <div class="row">

                    <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12" style="padding: 10px;">

                        <SfChart Title="Actions/Issues - 12 month trend" Theme="@Theme">

                            <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>

                            <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months" EdgeLabelPlacement="EdgeLabelPlacement.Shift">

                                <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>

                            </ChartPrimaryXAxis>

                            <ChartPrimaryYAxis LabelFormat="{value}" RangePadding="ChartRangePadding.None" Minimum="0" Maximum="100" Interval="20">

                                <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>

                                <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>

                            </ChartPrimaryYAxis>

                            <ChartTooltipSettings Enable="true"></ChartTooltipSettings>

                            <ChartSeriesCollection>

                                <ChartSeries DataSource="@ChartData" Name="Open" XName="Period" Width="2"

                                             Opacity="1" YName="Open" Type="ChartSeriesType.Line">

                                    <ChartMarker Visible="true" Width="10" Height="10">

                                    </ChartMarker>

                                </ChartSeries>

                                <ChartSeries DataSource="@ChartData" Name="Closed" XName="Period" Width="2"

                                             Opacity="1" YName="Closed" Type="ChartSeriesType.Line">

                                    <ChartMarker Visible="true" Width="10" Height="10">

                                    </ChartMarker>

                                </ChartSeries>

                                <ChartSeries DataSource="@ChartData" Name="New" XName="Period" Width="2"

                                             Opacity="1" YName="New" Type="ChartSeriesType.Line">

                                    <ChartMarker Visible="true" Width="10" Height="10">

                                    </ChartMarker>

                                </ChartSeries>

                            </ChartSeriesCollection>

                        </SfChart>

                    </div>

                    <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12" style="padding: 10px;">

                        <SfChart Title="Overdue Actions/Issues" Theme="@Theme">

                            <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>

                            <ChartPrimaryXAxis Title="Death Overs" Minimum="15" Maximum="21" Interval="1">

                                <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>

                            </ChartPrimaryXAxis>

                            <ChartPrimaryYAxis>

                                <ChartAxisLabelStyle Color="transparent"></ChartAxisLabelStyle>

                                <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>

                                <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>

                                <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>

                            </ChartPrimaryYAxis>

                            <ChartTooltipSettings Enable="true" Format="${point.x}th Over : <b>${point.y} Runs</b>"></ChartTooltipSettings>

                            <ChartSeriesCollection>

                                <ChartSeries DataSource="@ChartData1" XName="xValue" YName="yValue1" Opacity="1" Name="England" Fill="#1e90ff" Width="2" Type="ChartSeriesType.Column">

                                    <ChartMarker>

                                        <ChartDataLabel Visible="true" Position="Syncfusion.Blazor.Charts.LabelPosition.Top">

                                            <ChartDataLabelFont FontWeight="600"></ChartDataLabelFont>

                                        </ChartDataLabel>

                                    </ChartMarker>

                                </ChartSeries>

                                <ChartSeries DataSource="@ChartData1" XName="xValue" YName="yValue2" Opacity="1" Name="West Indies" Fill="#b22222" Width="2" Type="ChartSeriesType.Column">

                                    <ChartMarker>

                                        <ChartDataLabel Visible="true" Position="Syncfusion.Blazor.Charts.LabelPosition.Top">

                                            <ChartDataLabelFont FontWeight="600"></ChartDataLabelFont>

                                        </ChartDataLabel>

                                    </ChartMarker>

                                </ChartSeries>

                            </ChartSeriesCollection>

                            <ChartLegendSettings Visible="true"></ChartLegendSettings>

                        </SfChart>

                    </div>

                </div>

            </div>

        </div>

        <div class="row" style="z-index: -1;">

            <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12" style="padding: 10px;">

                <div id="PlaceHolder1" style="height: 450px;"/>

            </div>

            <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12" style="padding: 10px;">

                <div id="PlaceHolder2" style="height: 450px;"/>

            </div>

        </div>

[Srihari Muthukaruppan]

Hi Michael, 

 

We have analyzed your query. From that, we would like to let you know that we have already considered this scenario as a bug and logged a bug request on this and you can keep track of it from the below feedback portal link. 

       

Feedback Link: https://www.syncfusion.com/feedback/22653/user-interaction-not-working-while-setting-the-position-as-absolute-for-parent-div 

       

This fix will be available in our weekly patch release which is scheduled to be rolled out on or before 9 March 2021. We appreciate your patience until then  

  

Regards,  

Srihari M  

[Srihari Muthukaruppan]

Hi Michael, 

 

Sorry for the inconvenience. 

 

We have validated your code. From that, we would like to let you know that the reported scenario occurs since In this sample, used two div one for control render and another one for placeholder(empty div). When you set the control render div position absolute, placeholder div layout place over the chart control due to which the chart is unable to perform any mouse events. Hence the tooltip has not been rendered on mouse hover. Based on your requirement we have modified the sample for your reference. Please find the sample for your reference. 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/PositionAbsoluteSample693902056.zip 

 

Let us know if you have any concerns. 

 

Regards, 

Srihari M 

[Michael Aston]

Thanks

[Srihari Muthukaruppan]

Hi Michael, 

 

Most welcome. Kindly get in touch with us, if you requires further assistance. We are always happy in assisting you.   

   

Thanks,   

Srihari M