I have searched through much of the community trying to find an answer to this issue. We are using a plotly.js box plot for displaying value for ‘Control’ and ‘Experimental’ groups with a ASP.net website. But the legend is only displaying the first character of each group. Code and plot result listed below. Any assistance is much appreciated!
Thank you for your response, but unfortunately that didn’t fix my issue. I had already set the right margin to 200 with no luck. It’s as if the width of the legend is set to some minuscule amount (< 50 pixels or so). When I try horizontal orientation as suggested, it did make the legend a bit wider, but it spaced out the markers only like 20 pixels and overlayed the text so they overlap (see image). I set the x, y positions to show it’s not an issue with the width of the div or the graph.
traceorder Parent:layout.legend Type: flaglist string. Any combination of "reversed" , "grouped" joined with a "+" OR "normal" . Examples:"reversed" , "grouped" , "reversed+grouped" , "normal" Determines the order at which the legend items are displayed. If “normal”, the items are displayed top-to-bottom in the same order as the input data. If “reversed”, the items are displayed in the opposite order as “normal”. If “grouped”, the items are displayed in groups (when a trace legendgroup is provided). if “grouped+reversed”, the items are displayed in the opposite order as “grouped”.
tracegroupgap Parent:layout.legend Type: number greater than or equal to 0 Default:10 Sets the amount of vertical space (in px) between legend groups.
I just recently joined this group and have the same issue. I am creating charts as shinyApp functions that get called in an RMarkdown report (in R). Within R-Studio the actual code that creates the chart works fine, but when called in the RMarkdown and Shiny I have the same issue as the other posters - clipped legends. Any news on this problem?
I am also experiencing the same issue, but only in a specific case. Indeed I create my graph in an html page (let’s call it A.html). When I open this html in my browser the legends is displayed correctly.
But then I insert this html in a Dash app through an html.IFrame element and this is when the legend is truncated.
Does someone know why this IFrame causes the problem? Maybe there is a better way to insert this html into my dash app?