Ticks: left-align first, right align last on x-axis

đź“Š Plotly Python
1

I have an horizontal bullet chart. The x-axis goes from 0% to 100%.

Currently, all ticks are by default “text-centered”:
Screenshot%20from%202018-11-19%2015-18-51

This makes that the first tick (0%) and the last tick (100%) stick out of the left and right ends of the chart. However, I’d like that my ticks don’t stick out:
Screenshot%20from%202018-11-19%2015-18-51_ideal

How to make the 0% (first) tick left aligned, the 100%(last) one right aligned, and all the others centred?

MWE:

import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.figure_factory as ff

app = dash.Dash(__name__)

fig = ff.create_bullet(
    orientation='h',
    ranges='range',
    measures='data',
    data=[dict(
        range=[.4, .5, 1],
        data=[0, .42],
    )],
    title=None,
    hovermode=False,
    xaxis=dict(
        range=[0, 1],
        fixedrange=True,
        tickformat=',.0%',
        automargin=False,
    ),
)

app.layout = html.Div(
    [
        dcc.Graph(
            id='bullet-chart',
            figure=fig,
            config=dict(
                displayModeBar=False
            ),
        ),
    ]
)

if __name__ == '__main__':
    app.run_server(debug=True)
2

Of course, a quick and dirty solution would be to use ticktext and use strings with prepending/trailing spaces (i.e., " 0%" and "100% "). But it’s obviously quite not right.

3

Hi @ebosi,

I don’t think it’s possible to do this directly. So I think your options are:

  1. The spaces hack that you mentioned
  2. Set the layout.xaxis.tickangle property to 90. This will rotate the labels 90 degrees reducing the amount that the first and last tick stick out:

newplot%20(17)
newplot (17).png1000Ă—600 3.04 KB

  1. Open a feature request with the plotly.js project at https://github.com/plotly/plotly.js :slightly_smiling_face:

-Jon

4

Thanks @jmmease: knowing it is not currently possible really helps!

Changing the tickangle isn’t acceptable in my specific real case (moreover, text still sticks out — although just a little), but thanks for suggesting an alternative.

5

See also feature request #1278 Create a “stick-inside” mode for ticks labels