I need to position some custom text on my charts. These notes aren’t tied to a specific trace or point, but to the chart as a whole. These may, for example, need to be positioned in the upper right and bottom left of the entire chart.
After scouring the docs, I found the paper-relative annotation positioning options. However, these positions (0, 0.5, 1, etc.) are all relative to the central plot area, and don’t take the size of the legend, axis labels, axis titles, etc. into account.
This makes it hard (impossible?) to reliably position text on the chart as a whole, since the size of the legend, axis labels, etc. is not constant. I can manually tweak the numbers for a specific known chart (e.g. make the annotation x/y values things like 1.09 or -.06, etc.), but this isn’t an option for me since we have arbitrary sets of dynamically generated charts.
Is there some trick to positioning things which take into account the variable sizes of things beyond the plot area? Or, if not, is there some trick to determining the relative size of the entire chart vs. the plot area, which can be used to dynamically adjust the positions of paper annotations?
2 Likes
Hey there,
Instead of using the autogenerated space you could reduce or remove the margin (https://plot.ly/javascript/reference/#layout-margin) or set the domain of the x and y axes: https://plot.ly/javascript/reference/#layout-xaxis-domain to be consistent across the charts and thereby reduce some of that autosized variability. Let us know if a sizing example would be helpful for you.
1 Like
Thanks Chelsea, but I don’t think either of those are options for me:
First, omitting the margin leaves it to Plotly to try and size the plot, and Plotly’s basic “auto margin” logic doesn’t do a very good job of using the available space.
Second, the axis domain doesn’t seem to help either, since all it seems to do is let you reduce the width and height of the axes (the range is only between 0 and 1).
Finally, neither of these really help with taking into account the size of the axis titles, plot title, or the size of the legend.
I have a JSFiddle set up where I was testing out these various options at http://jsfiddle.net/brian428/p5rvsm7n/. If you can think of anything that would help, please let me know. Again, please keep in mind that we have multiple dynamically created charts, so manually tweaking the annotation position isn’t an option either. I really need a way to position them that works regardless of the size of the titles or legend on any specific chart. Let me know what you think.
Thanks.
1 Like
I know this thread is old but I’m finding this to still be a nightmare in the latest plotly/dash releases. Has anyone developed a method for fixing annotations at constant positions in the overall chart space? The best I’ve been able to do so far is set a variable y position based on the string length of my xaxis labels.
y = -0.05 * data[xaxis_column].astype(str).str.len().max()
Seems like an “ideal” solution would be another reference system like xref/yref=‘figure’ from [0, 1] for the entire figure area regardless of margins. It would be nice to be able to specify margins in that space as well, eg. margin_b=0.05 vs. absolute pixel values.