How to display a plotly chart partially on x-axes and see the rest scrolling right?


not able to find this topic on here

so asking directly.

I have a Plotly.js chart with a huge number of items on x-axes and is fine with me not to have all those compressed, rather would like to see just few of them and then scroll to see the remaining.

Is that possible?

Not sure if I fully understand what you're trying to do. I don't think vertical scrolling is natively supported for retool containers.

As a workaround, you could swap the Y and X axis. You can use "orientation: h" in your plotly JSON to change the orientation of the bars. Then put your chart in a container of a fixed size and enable "Overflow: Scroll" for the said container.

For further reference: Horizontal bar charts in JavaScript (


well thanks for that. That indeed could be a nice hack, a bit more narrow than the horizontal scrolling given a 16:9 screen.

Thanks for that anyway, let's see if someone comes up with a suggestion for an horizontal overflow scroll

Alright, I had to give it another shot :smile:

Plotly supports navigation too. So, instead of horizontal scrolling, you could use the plotly pan feature insted. Does this work for you?


Here's the layout JSON:

  dragmode: 'pan', // enables panning
  xaxis: {
    range: [0, 3] // sets "zoom" factor
  yaxis: {
    fixedrange: true, // prevents vertical panning
  margin: {
    l: 20,
    r: 20,
    b: 20,
    t: 20,
    pad: 4

And the data JSON I used in the example:

    x: ['Apples', 'Oranges', 'Watermelon', 'Pears', 'Apples1', 'Oranges1', 'Watermelon1', 'Pears1', 'Apples2', 'Oranges2', 'Watermelon2', 'Pears2', 'Apples3', 'Oranges3', 'Watermelon3', 'Pears3','Apples4', 'Oranges4', 'Watermelon4', 'Pears4'],
    y: [3, 2, 1, 4, 3, 2, 1, 4, 3, 2, 1, 4, 3, 2, 1, 4, 3, 2, 1, 4],
    type: 'bar'

EDIT: Commented the JSON example for better understanding what each setting stands for
EDIT 2: Added the data JSON, just in case someone needs it :+1:

1 Like

Well, that's quite astonishing! Thank you very much for that!

1 Like