Show Scroll On right side

[Raghav]

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

[Manikandan Murugesan]

Hi Raghav, 

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

Regards, 

Manikandan. 

[Manikandan Murugesan]

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"); 

 

Sample: https://stackblitz.com/edit/at7pyz?file=index.js 

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

Regards, 

Manikandan. 

[Raghav]

Hello Manikandan,

Thanks for the help. The code works for me.

Regards

Raghav

[Raghav]

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

[Jagadeesan Pichaimuthu]

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'; 

        } 

      } 

    } 

  } 

  

  

Sample: https://stackblitz.com/edit/eqanyz-h49bgt?file=index.js 

  

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

  

Regards, 

Jagadeesan

[Raghav]

Hello Jagadeesan,

Thanks for the help. It works for me. 

Regards

Raghav

[Dinesh Babu Yadav]

Hi Raghav,  

  

Thanks for the update. Please get back to us if you need further other assistance from us.  

  

Regards,  

Dinesh Babu Yadav