We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Show Scroll On right side

Hello,

I am using bar chart type for showing the data.The problem is that when you scroll out, the scroll bar is placed over the legend. See attached image you will get my point.
Is there any way that scroll placed on right side or any solution so that the scroll not overlap with the text.

Regards
Raghav

Attachment: Untitled_c5f9d902.rar

7 Replies

MM Manikandan Murugesan Syncfusion Team June 20, 2019 05:59 AM

Hi Raghav, 

Currently, we are analyzing the problem at our end. And, we will update further details by tomorrow (June 21, 2019). 

Regards, 
Manikandan. 



MM Manikandan Murugesan Syncfusion Team June 21, 2019 02:24 AM

Hi Raghav, 

You can resolve this problem by using following code snippet. 

Code Snippet: 
var pivotGridObj = new ej.pivotview.PivotView({ 
    chartSettings: { 
      scrollEnd: function(args) { 
        if (args.axis.name === 'primaryXAxis') { 
          let scrollX = document.getElementById(pivotGridObj.element.id + '_chart_scrollBar_svgprimaryXAxis'); 
          let left = parseInt(scrollX.style.left); 
          let rectx = Math.round(args.axis.rect.x - scrollX.getBoundingClientRect().width); 
          if (left !== rectx) { 
            scrollX.style.left = rectx  + 'px'; 
          } 
        } 
      } 
    } 
  }); 
  pivotGridObj.appendTo("#PivotView"); 
 


Please let us know if you need further assistance on this. 

Regards, 
Manikandan. 



RA Raghav June 21, 2019 02:55 AM

Hello Manikandan,

Thanks for the help. The code works for me.

Regards
Raghav


RA Raghav June 21, 2019 04:33 AM

Hello Manikandan

I was testing your code. It works fine but there is one scenario where it break down. When I select the chart type "Column" after that when I move the x axis scroll (scroll below the chart) left or right after that scroll is not visible. I have attached two screenshots. Please help me on this. 

regards


Attachment: Desktop_f9329c75.rar


JP Jagadeesan Pichaimuthu Syncfusion Team June 24, 2019 12:42 AM

Hi Raghav, 
  
You can resolve this using following code snippet. 
  
Code Snippet: 
chartSettings: { 
    scrollEnd: function(args) { 
      if (args.axis.name === 'primaryXAxis' &&pivotGridObj.chartSettings.chartSeries.type === 'Bar') { 
        let scrollX = document.getElementById(pivotGridObj.element.id +'_chart_scrollBar_svgprimaryXAxis'); 
        let left = parseInt(scrollX.style.left); 
        let rectx = Math.round(args.axis.rect.x -scrollX.getBoundingClientRect().width); 
        if (left !== rectx) { 
          scrollX.style.left = rectx  + 'px'; 
        } 
      } 
    } 
  } 
  
  
  
Please let us know if you need further assistance on this. 
  
Regards, 
Jagadeesan


RA Raghav June 25, 2019 01:14 AM

Hello Jagadeesan,

Thanks for the help. It works for me. 

Regards
Raghav


DB Dinesh Babu Yadav Syncfusion Team June 25, 2019 01:16 AM

Hi Raghav,  
  
Thanks for the update. Please get back to us if you need further other assistance from us.  
  
Regards,  
Dinesh Babu Yadav 


Loader.
Live Chat Icon For mobile
Up arrow icon