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

App Building
#1

Hi,

not able to find this topic on here
image

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?

#2

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.

chart
chart1575×511 24 KB

For further reference: Horizontal bar charts in JavaScript (plotly.com)

#3

Ohh,

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

#4

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?

mstsc_4nSTK6DiWx

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
#5

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

1 Like