Hi Dash community,
I display a scatter plot on my application and the default legend position overlap the graph.
When I click on the one element of the legend, the legend is correctly display under the graph.
Using the inspect element, the bug is due to the transform=translate(12.199999999999, 386).
In a css file I wrote the following line to fix it but It not work
.legend {
transform:translate(30.20, 700);
pointer-events: all;
}
Please can you help me ?
Thanks,
Best regards,
Are you anchoring the legend outside the plot or not changing the default at all (which should be in the top right corner, outside the plot)? Have you tried to adjust the position manually or change the orientation via the plot layout?
Yes, the position legend is computed manually.
It’s important to note that is overlap disappear and the manual setting are used AFTER one click on the legend.
I see… Have you tried to anchor it using Edit: nevermind, I guess your x,y are with respect to the bottom left anchor already.xanchor and yanchor?
[…] and the manual setting are used AFTER one click on the legend.
This is very odd…
I try, but not work.
Manually if I change the transfomr:translate, the chart take into account the x, y position and it’s well display. However I don’t know how to do that using the code (f CSS ? react ?)
The thing is that it is not super simple to target the elements inside a plotly chart via an external css… In some cases it works, in others it doesn’t…
One way is to increase specificity of your CSS selector from .legend to something like .infolayer g.legend or even more specific than this. They you can take a look in the developer tools to see how low in the cascading stack is your CSS descriptor. If there are other rules taking precedence coming from the plotly stylesheets, then you can try to copy their selector and use !important or figure out a way to move your css up.
Needless to say, it would also be a good idea to target your chart id in the descriptor, otherwise your hack will spill out to other charts… 
It’s strange, yanchor and xanchor produce a correct chart in the Front-end app
However, I export also several chats in a pptx and only one has a bug.
I try the following CSS line but the bug on a specific graph persiste
.infolayer .legend .bg { transform:translate(30.20, 780); pointer-events: all;}
@ jlfsjunior
Have you an idea to solve it please ?
It is hard for me to reproduce your problem without a reprex. But if I understand you well, the problem is fixed in Dash with the anchors, is that right?
I never used Plotly in PPT presentations, so I don’t know what are the export options. If you are exporting to html, then the fastest might be to adjust the translate manually in the html before importing it in powerpoint.
Bon courage!
Hi @jlfsjunior,
Thanks a lot for your help, it’s nice.
The bug is fixed on the Dash app with anchors but it persite on only one graph during the pptx export.
Best regards
