2D xaxis overlap

plotly.js
1

Hello all,

I have a 2D xaxis and the ticklabels and I cannot position them nicely.

plotl

First of all the text at the bottom is cut in half and second if there are a bit more entries the bottom text does not rotate as expected.

Is there a nice way of solving this?

Thanks in advance :slight_smile:

2

Hi, can you share the data and layout settings you used with us to help us find potential workarounds.

3 
{'x': [['Region region 1', 'Region region 1', 'Region region 1', 'Region region 1', 'Region region 1', 'Region region 1', 'Region region 2', 'Region region 2', 'Region region 2', 'Region region 2', 'Region region 2', 'Region region 2', 'Region region 3', 'Region region 3', 'Region region 3', 'Region region 3', 'Region region 3', 'Region region 4', 'Region region 4', 'Region region 4', 'Region region 4', 'Region region 4', 'Region region 4', 'Region region 5', 'Region region 5', 'Region region 5', 'Region region 5', 'Region region 5', 'Regio 6', 'Regio 6', 'Regio 6', 'Regio 6', 'Regio 6', 'Region region 7', 'Region region 7', 'Region region 7', 'Region region 7', 'Region region 7', 'Region region 8', 'Region region 8', 'Region region 8', 'Region region 8', 'Region region 8', 'Region region 8', 'Region region 9', 'Region region 9', 'Region region 9', 'Region region 9', 'Region region 9', 'Region region 10', 'Region region 10', 'Region region 10', 'Region region 10', 'Region region 10', 'Region region 11', 'Region region 11', 'Region region 11', 'Region region 11', 'Region region 11', 'Region region 11', 'Region region 12', 'Region region 12', 'Region region 12', 'Region region 12', 'Region region 12', 'Region region 13', 'Region region 13', 'Region region 13', 'Region region 13', 'Region region 13', 'Region region 13', 'Region region 14', 'Region region 14', 'Region region 14', 'Region region 14', 'Region region 14'], ['Action action 1', 'Action action 2', 'Action action 3', 'Action action 4', 'Action action 5', 'Action action 6', 'Action action 1', 'Action action 2', 'Action action 3', 'Action action 4', 'Action action 5', 'Action action 6', 'Action action 1', 'Action action 2', 'Action action 4', 'Action action 5', 'Action action 6', 'Action action 7', 'Action action 1', 'Action action 2', 'Action action 4', 'Action action 5', 'Action action 6', 'Action action 1', 'Action action 2', 'Action action 4', 'Action action 5', 'Action action 6', 'Action action 1', 'Action action 2', 'Action action 4', 'Action action 5', 'Action action 6', 'Action action 1', 'Action action 2', 'Action action 4', 'Action action 5', 'Action action 6', 'Action action 7', 'Action action 1', 'Action action 2', 'Action action 4', 'Action action 5', 'Action action 6', 'Action action 1', 'Action action 2', 'Action action 4', 'Action action 5', 'Action action 6', 'Action action 1', 'Action action 2', 'Action action 4', 'Action action 5', 'Action action 6', 'Action action 7', 'Action action 1', 'Action action 2', 'Action action 4', 'Action action 5', 'Action action 6', 'Action action 1', 'Action action 2', 'Action action 4', 'Action action 5', 'Action action 6', 'Action action 7', 'Action action 1', 'Action action 2', 'Action action 4', 'Action action 5', 'Action action 6', 'Action action 1', 'Action action 2', 'Action action 4', 'Action action 5', 'Action action 6']], 'y': [0.0, 0.0, 0.0, 38.82, 21.21, 37.29, 0.0, 0.0, 0.0, 38.68, 19.71, 42.59, 0.0, 0.0, 66.58, 29.18, 31.87, 0.0, 0.0, 0.0, 52.14, 25.36, 39.64, 0.0, 0.0, 56.86, 29.29, 31.51, 0.0, 0.0, 47.33, 26.56, 43.92, 0.0, 0.0, 47.45, 13.58, 44.9, 0.0, 0.0, 0.0, 62.63, 24.1, 40.34, 0.0, 0.0, 60.89, 29.23, 31.87, 0.0, 0.0, 52.19, 26.06, 40.26, 0.0, 0.0, 0.0, 53.58, 24.58, 32.64, 0.0, 0.0, 67.04, 20.86, 27.07, 0.0, 0.0, 0.0, 55.59, 24.12, 41.13, 0.0, 0.0, 66.59, 22.81, 27.59], 'type': 'bar', 'name': 'Something 1'}


                <Plot
                    data={ data }
                    layout={{
                        barmode,
                        autosize: true,
                        xaxis: {
                            tickangle: 45,
                            fixedrange: true
                        }
                    }}
                    style={{
                        width: '100%',
                        height: 750
                    }}
                    graphDiv="graph"
                    useResizeHandler
                />

In the original post I forgot to mention I am using plotly-react.

4

Hi, would you have any suggestions based on the data and styling :slight_smile: