Create a "stick-inside" mode for ticks labels

[EBoisseauSierra]

Context

Say we have a first quadrant chart:

One can notice that ticks' label are horizontally/vertically centred (compared to the ticks themselves) on the horizontal/vertical axis, respectively.

This makes that first and last ticks value "stick out" from the graph; what can be a bit ungainly — especially if one shows one axis only:

This is also inconvenient when you want to precisely align you axes with elements surrounding your picture (e.g., in the example above, if you want the 0% tick mark to be the most-left point of the picture).

Question

➥ Could it be possible to have a "stick inside" mode for ticks values?

The idea is to change the vertical/horizontal alignment of the first and last ticks values:

• left and right aligned, respectively, for the horizontal axis:

• bottom and top aligned, respectively, for the vertical axis:

Our first example would then look like this:

Variant

An even more super-duper mode would enable us to choose which end on the axis to "stick inside", so that one could make such graph:

[jonmmease]

Hi @EBoisseauSierra,

Thanks for the detailed description of your request. This is something that would need to be implemented in plotly.js, and then plotly.py would get it automatically. Would you mind moving this issue to https://github.com/plotly/plotly.js/issues? Thanks!

[EBoisseauSierra]

@jonmmease done, see issue #3292!

It might not be the right place to ask, but could you please {explain me/redirect me to where I could understand} why changes in plotly.js are automatically got by plotly.py?

[etpinard]

now in https://github.com/plotly/plotly.js/issues/3292

[jonmmease]

Thanks @EBoisseauSierra!

It might not be the right place to ask, but could you please {explain me/redirect me to where I could understand} why changes in plotly.js are automatically got by plotly.py?

Sure! plotly.js is the JavaScript library that actually performs all of the rendering (drawing axes, markers, etc.). In plotly.js world, all visualization are specified using JSON (e.g. https://github.com/plotly/plotly.js/blob/master/test/image/mocks/scatter-colorscale-colorbar.json). The primary job of plotly.py is to provide a nice Python API for creating these JSON data structures.

plotly.js maintains a detailed schema describing all of the valid properties for each trace type and the layout (See https://github.com/plotly/plotly.js/blob/master/dist/plot-schema.json). The schema includes not only the property names, but also data types, valid ranges of values, and descriptions.

In plotly.py, each time we update the version of plotly.js the entire plotly.graph_objs hierarchy of Python classes is automatically generated from the updated plotly.js schema (See https://github.com/plotly/plotly.py/tree/master/codegen). So when plotly.js introduces new properties (say a new layout.xaxis.stickinside property), as long as the property has an existing datatype (probably just a boolean in this case) then this property will automatically be added by plotly.py to the plotly.graph_objs.layout.XAxis class during this code generation process. And the new property will automatically have a docstring and detailed property validation (i.e. validating that the property is set to a boolean value).

This code generation step is something we added in version 3.0, and it has really helped us keep plotly.py up to date with plotly.js much more quickly and reliably.

Hope that helps!