Plotly - Make axis tick labels responsive

0
votes

using react-plotly, I'm trying to make a few charts responsive. I'm running into issues that when someone is using a low resolution, the axis tick labels are overlapping with the legend, which is positioned below the charts as well.

Is there some clever way to counteract this? Trying to adjust the font size in css using selectors such as 

.xtick > text

is quite a headache and doesn't result in a proper fix for me.

The legend itself is created like this:

  legend: {
    orientation: 'h',
    y: -0.05
  },

enter image description here

1
plotlyplotly.js

1 Answers

1
votes

This is an open issue that we're working on fixing, finally :) https://github.com/plotly/plotly.js/issues/1199