How to add a scrollbar inside the plot area in Wijmo chart

How to add a scrollbar inside the plot area in Wijmo chart

Posted by: surya on 7 October 2025, 4:57 am EST

• 

  surya

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 7 October 2025, 4:57 am EST

  Hi Team,

  I’m using a Wijmo chart (specifically the Gantt or FlexChart) in my Angular application, and I want to know if it’s possible to add scrollbars inside the plot area only—not around the entire chart.

  My goal is

  To keep the X and Y axes fixed/visible at all times.

  To allow only the chart plot area (the data/series part) to be scrollable when the data extends beyond the visible range.

  This should help in cases where I have many data points on the X-axis or Y-axis, but I don’t want the full chart (including axes and labels) to move.

  Basically, I want a scrollbar inside the chart area so that I can scroll through data horizontally or vertically while keeping axes in place — similar to how some chart libraries support “plot area scrolling.”

  Is this supported in Wijmo charts? If yes, could you please share an example or approach for implementing it?

  Thanks

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 7 October 2025, 7:57 am EST

  Hi Surya,

  Based on the information you shared, we have a demo sample that closely matches your requirements. Please check the sample link below and let us know if it meets your expectations or if there are any differences in the scrolling behavior you’re looking for.

  You can also customize the axis scrollbars to suit your exact needs — for instance, you can make them function like standard scrollbars if zooming isn’t required, or adjust their positioning as needed.

  Demo link: https://developer.mescius.com/wijmo/demos/Chart/Features/ScrollingAndRangeSelectors/angular

  Regards,
  
  Sonu Kumar Pandey

• 

  surya

  • Post Options:
  • Link
    Copy

  Posted 7 October 2025, 9:45 am EST - Updated 7 October 2025, 9:53 am EST

  Hi,

  I tried the approach you suggested, but there is one problem: in my case it’s not working seamlessly. I am attaching the screenshot. Please check and let me know if I can do anything else.

  And I want to show only the scrollbar in the y-axis, so let me know how to disable the zooming functionality.

  

  1935×1168 222 KB

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 8 October 2025, 2:18 am EST

  Hi Surya,
  
  You can refer to the following updated sample - https://jscodemine.mescius.io/share/w0GZOMleHUm3NNrj-iAVBQ/
  
  We have used only a vertical scrollbar in the above sample, and also disabled the zooming by keeping a fixed range scale. We have made some modifications in the ‘_createScrollbar’ method in the ‘AxixScrollbar.ts’ file. The scrollbar width can be controlled by the ‘minScale’ property that accepts a value between 0 and 1. You can take a look and follow the same approach on your end. Please note that you’ll need to apply some custom CSS to get the desired results as applied in the sample.
  
  In case, you still face any issues, please share a small sample with your current chart implementation with some dummy data, so that we can have a better understanding of your chart structure and assist you accordingly.
  
  Regards,
  
  Vivek Pannu

• 

  surya

  • Post Options:
  • Link
    Copy

  Posted 8 October 2025, 6:41 am EST

  Thank you, Team!! Your provided solution is working fine.

  Last one thing: in the screenshot, which I shared earlier, you can see between the chart and the y-axis label so much space is coming, so sometimes the label is not completely visible on the y-axis, and I am also formatting the label. So if you have any solution. Please share.

  **Note: **I checked your tooltip solution in the old post, but I don’t want to add the tooltip.

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 8 October 2025, 8:10 am EST

  Hi Surya,
  
  You can try applying translate transformation through CSS on the axis labels to shift their position as per your needs. If the labels are still not completely visible and the labels are also not very long, then you adjust the margin around the plot area of the chart using the ‘plotMargin’ property of the FlexChart.
  
  You can refer to the following sample demonstrating the same - https://jscodemine.mescius.io/share/gG-_0xyWbEe6uPjHdFyOaw/
  
  You can also refer to the following API link for more information about ‘plotMargin’ property - https://developer.mescius.com/wijmo/api/classes/wijmo_chart.flexchart.html#plotmargin
  
  Hopefully, your issue will be resolved with these updates. However, if the issue still persists, then please share a small sample with your current chart implementation with some dummy data. We would be able to help better that way.
  
  Regards

• 

  surya

  • Post Options:
  • Link
    Copy

  Posted 10 October 2025, 4:26 am EST

  Thank you Team!!