Retool Chart Disable Scroll and Zoom

💬 App Building
1

Hi there!

  1. My goal: Disable scrolling or zooming/panning of graphs.
  2. Issue: Retool's native chart can be dragged to any direction (and zoom in and out in tablet/mobile). I don't want the end-users to zoom in/out or drag the chart especially that they would most likely view this on a tablet.
  3. Steps I've taken to troubleshoot:
  • I checked the component inspector and there's no settings for me to disable this
  • I've also tried to add a CSS override on this and nothing seems to work (e.g. pointer-events: none; touche-action: none; overflow: hidden;)
  1. Additional info: Cloud

If this is not natively supported, is there any workaround here? It's not a good UX for our use-case.

Thanks

3

Hey @jocen, welcome back to the forum!
With Retool’s Native Chart, there’s no way right now to disable zooming or panning. Unlike the Legacy Chart, it doesn’t let you turn off drag or zoom with settings.

If you want to lock the chart interactions, the easiest way is to switch to the Chart (Legacy) component. In Legacy Chart, you can disable zooming and panning by setting "dragmode": false and "fixedrange": true on both the x-axis and y-axis in the layout settings.

Here’s the snippet for reference:

"dragmode": false,
"xaxis": {
  "fixedrange": true
},
"yaxis": {
  "fixedrange": true
}

It would be great if Native Chart had this feature too — maybe consider sending a feature request!

4

Hey @jocen

You can inspect the browser and on the click of the chart you can get the class of the chart

image
image1876×869 97 KB

Use the custom css for your functionality that scrolling and other things off

.nsewdrag.drag {
  pointer-events: none !important;
}

image
image1058×414 25.1 KB

It will work for the web

And for the mobile and tablet you have to use the custom css that dont give the pointer event on chart drags.

.ndrag,
.edrag,
.nsdrag,
.swdrag,
.wdrag,
.ewdrag,
.sdrag {
  pointer-events: none !important;
  touch-action: none !important;
  cursor: default !important;
}
1 Like
5

Thanks!

This worked for me!

1 Like