Tooltip is getting cropped off when mousehover on chart plot

[Lalit Sharma]

We have integrated Syncfusion eChart with Tooltip in our application and we need scrollbar at certain height due to large data. We have set overflow auto in parent so the issue is coming on when we hover on chart plot and tooltip is getting cropped:

Please give me solution for this asap.

This issue is coming on Mac, windows in specific environment. Not reproducible on our local environment.

[Srihari Muthukaruppan]

Hi Lalit, 

 

We have analysed your query. From that, we would like to let you know that we can overcome the reported scenario by setting the position as “Auto”. And also we suggest you to upgrade your chart package to latest version 18.4.39 to overcome common tooltip related issues. Based on your requirement we have prepared the sample for your reference. Please find the sample and screenshot below. 

 

Sample: https://stackblitz.com/edit/angular-g6ouui-7yzxbd?file=app.component.ts 

 

Screenshot: 

 

 

If you still face this issue. kindly revert us with the following information which will be more helpful for further analysis and provide you the solution sooner.   

1. Try to reproduce the reported scenario in the provided sample.  
2. Share the angular package version used in the sample.

Regards,  

Srihari M  

[Lalit Sharma]

Issue is still exist. Please add div in parent and add styles overflow: auto;height: 320px;

Please try this code.

<div style="overflow: auto;height: 320px;">

<ejs-chart #chart style="display:block;" height="220px" [chartArea]="chartArea" [width]="width" align="center"

id="chartcontainer" [primaryXAxis]="primaryXAxis" [primaryYAxis]="primaryYAxis" [tooltip]="tooltip"

(load)="load($event)" (tooltipRender)="tooltipRender($event)">

<e-series-collection>

<e-series [dataSource]="data" type="Column" xName="x" yName="y" width="2" [marker]="marker">

</e-series>

<e-series [dataSource]="data1" type="Column" xName="x" yName="y" width="2" [marker]="marker">

</e-series>

<e-series [dataSource]="data2" type="Column" xName="x" yName="y" width="2" [marker]="marker">

</e-series>

</e-series-collection>

</ejs-chart>

</div>

[Srihari Muthukaruppan]

Hi Lalit,  

  

We have analysed your query. As stated earlier, by setting the position as “Auto” the tooltip is working fine in latest version 18.4.39. We have also attached the sample used for testing. Please find the sample and screenshot below.  

  

Sample: https://stackblitz.com/edit/angular-g6ouui-cu9sxq?file=app.component.html 

 

Code Snippet: 

App.component.html: 

 

<div style="overflow: auto;height: 320px;"> 

              <ejs-chart #chart style="display:block;" height="220px" [chartArea]="chartArea" [width]="width" align="center" 

                             id="chartcontainer" [primaryXAxis]="primaryXAxis" [primaryYAxis]="primaryYAxis" [tooltip]="tooltip" 

                             (load)="load($event)" (tooltipRender)="tooltipRender($event)"> 

                             <e-series-collection> 

                                           <e-series [dataSource]="data" type="Column" xName="x" yName="y" width="2" [marker]="marker"> 

                                           </e-series> 

                                           <e-series [dataSource]="data1" type="Column" xName="x" yName="y" width="2" [marker]="marker"> 

                                           </e-series> 

                                           <e-series [dataSource]="data2" type="Column" xName="x" yName="y" width="2" [marker]="marker"> 

                                           </e-series> 

                             </e-series-collection> 

              </ejs-chart> 

</div> 

 

App.component.ts: 

// add your additional code here 

public tooltip: Object = { 

    enable: true, 

    position: "Auto" 

  }; 

 

Screenshot:  

 

  

If you still face this issue. kindly revert us with the following information which will be more helpful for further analysis and provide you the solution sooner.    

1. Try to reproduce the reported scenario in the provided sample.  
2. Share the screenshot of the tooltip cropped.
3. Please share the details if you have done any other customization for the chart.

Regards,   

Srihari M