Tooltip for bar chart is getting hide while hovering & show axis label fullname without getting trim

[Unknown]

Hey, I have some queries-

1. Is there any option to show axis label in second line without getting trim in a chart ?

Here is the screenshot- 
https://prnt.sc/u23r7z

2. Is there any option to set position of tooltip in a bar chart  because tooltip getting hide while hovering on bar ?

Here is the screenshot- 
https://prnt.sc/u23p2b

I am using React js with syncfusion-ej2

[Durga Gopalakrishnan]

Hi Prachi, 

Thank you for contacting Syncfusion support. 

We have validated your scenarios and please find the following responses. 

 

1. Is there any option to show axis label in second line without getting trim in a chart ? 

 

We suggest you to specify labelIntersectAction as MultipleRows to display full axis labels without being trimmed. Please check with below code snippet and screenshot. 

 

Code Snippet 

 

<ChartComponent id='charts'  

         primaryXAxis={{ 

            labelIntersectAction:'MultipleRows', 

       }}> 

</ChartComponent> 

 

Screenshot 

 

 

Sample Multiple Rows 

 

2. Is there any option to set position of tooltip in a bar chart  because tooltip getting hide while hovering on bar ? 

 

By default, when there is no space on right side, then tooltip will be displayed on left side. We have prepared sample as per your screenshot, unfortunately, we are unable to reproduce the reported issue from our end. Please check with below sample and screenshot 

 

Screenshot 

 

Sample  Chart Tooltip 

 

Since we are unaware of your exact customization scenario used in your application on which you reported an issue, please share the following information which will be more helpful for further analysis and provide you the solution sooner. 

• Try to reproduce the reported scenario in the above sample.
• Please share your sample (or) code snippet with CSS settings that you used to design that part.
• Share the details if you have done any other customization in your sample.
• Share your chart data source file, if possible.
• Share your preview template version.

Kindly get back to us with our requested details to serve you better. 

Regards, 

Durga G 

[Unknown]

Hey Thanks for the quick reply !!

1. Is there any option to set position of tooltip in a bar chart  because tooltip getting hide while hovering on bar ? 

we have used dashboard layout panel directive & I am using bootstrap row column to show multiple charts in a single card & getting tooltip hide issue on hover in a bar graph

https://prnt.sc/u3eot1

Here is the sample file
https://stackblitz.com/edit/react-yndipa-dzujke?file=index.js

Open UI in a new window

I am also having one more query 
2 . We have used dashboard layout panel directive and multiple charts into it. In header attribute of panel. I want to trigger an event and convert chart into grid form but got stuck as the chart is not re-rendered again. 

[Durga Gopalakrishnan]

Hi Prachi, 

 

We have analyzed your queries. Please find the below responses for your queries. 

 

Query 1 : Is there any option to set position of tooltip in a bar chart  because tooltip getting hide while hovering on bar? 

 

We have validated your reported issue from our end and are confirming it as a bug and logged a defect report for this. This fix will be available in our upcoming weekly patch release which is scheduled to be rolled out on 1^st September, 2020. We appreciate your patience until then. You can keep track of the bug from the feedback portal below.  

  

Feedback Link : https://www.syncfusion.com/feedback/17243/ 

  

The provided feedback link is private, and you need to login to view this feedback. 

  

If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal. 

 

Query 2 : We have used dashboard layout panel directive and multiple charts into it. In header attribute of panel. I want to trigger an event and convert chart into grid form but got stuck as the chart is not re-rendered again. 

 

It is possible to render the chart with grid data, but we are not clear about your exact query what you meant by converting the chart into grid form. Please provide us more information about this query. In case, if your requirement is to re render the chart by refreshing it, you can use the created event of dashboard layout and refresh the chart object within it. We have prepared sample and attached for your reference.  

To render chart using grid data 

https://ej2.syncfusion.com/react/documentation/chart/how-to/grid-data-chart/ 

To re render chart using event 

 

Code Snippet 

<DashboardLayoutComponent created={this.created.bind(this)} ref={(scope) => { this.dashboardObj = scope; }} >  

         <div id="one" className="e-panel" data-row="0" data-col="0" data-sizeX="1" data-sizeY="1">  

            <div className="e-panel-content">  

                 <ChartComponent ref={(scope) => { this.chartObj = scope; }}  height="100%" width="100%" id="charts" >  

                  </ChartComponent>  

             </div>  

         </div>  

</DashboardLayoutComponent>  

 

created() {  

      // Refresh the chart component.  

       this.chartObj.refresh();  

    }  

  

 <style>  

      .e-chart {  

        height:100%;  

        width:100%;  

      }  

 </style>  

Sample 

https://stackblitz.com/edit/react-u4craf?file=index.js 

Please revert back with further information, if we have misunderstood your query. 

 

Regards, 

Durga G 

[Durga Gopalakrishnan]

Hi Prachi, 

Since chart width is too small, tooltip div is cropped due to overflow: hidden property of their parent element. We suggest you to specify the below styles in index.css file to overcome the tooltip cropping issue. Please check with below code snippet and sample. 

#edit_dashboard .e-panel-content { 

    height: calc(100% - 35px) !important; 

    overflow: visible; 

    width:100%; 

} 

#chart1, #chart2, #chart3, #chart4 { 

overflow: visible ! important; 

} 

#layout_0 { 

  z-index: 1001 ! important; 

} 

 

 

 

https://stackblitz.com/edit/react-yndipa-mlsdpu 

Please revert us, if you have any concerns. 

Regards, 

Durga G