Legend Text is being truncated/cut off

plotly.js
#1

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!

Link to example on our development site - the chart and code has been edited a bit while I’ve played around with some parameters, but with no luck in finding a fix.

<script src="https://cdn.plot.ly/plotly-latest.min.js">
</script>

…

<div id="divPlot" style="background-color:lightskyblue;padding:10px;"></div>
<script type="text/javascript">
    function PlotGraph() {
        var i, j, k, l;
        var x_experimental = [];
        var y_experimental = [];
        var x_control = [];
        var y_control = [];
        var FemaleWTdata = <%= FemaleWTAsJSArray %>;
            var FemaleHomdata =  <%= FemaleHomAsJSArray %>;
            var MaleWTdata = <%= MaleWTAsJSArray %>;
            var MaleHomdata = <%= MaleHomAsJSArray %>;
            var Parameter_Name = document.getElementById('<%=hfParameterName.ClientID %>').value;
        for (i = 0; i < FemaleWTdata.length; i++) {
            y_control.push(FemaleWTdata[i]);
            x_control.push("Female");
        }
        for (j = 0; j < FemaleHomdata.length; j++) {
            y_experimental.push(FemaleHomdata[j]);
            x_experimental.push("Female");
        }
        for (k = 0; k < MaleHomdata.length; k++) {
            y_experimental.push(MaleHomdata[k]);
            x_experimental.push("Male");
        }
        for (l = 0; l < MaleWTdata.length; l++) {
            y_control.push(MaleWTdata[l]);
            x_control.push("Male");
        }
        var trace1 = {
            y: y_control,
            x: x_control,
            name: 'Control',
            marker: { color: '#3D9970' },
            type: 'box'
        };
        var trace2 = {
            y: y_experimental,
            x: x_experimental,
            name: 'Experimental',
            marker: { color: '#FF4136' },
            type: 'box'
        };
        var data = [trace1, trace2];
        var layout = {
            automargin: false,
            showlegend: true,
            autosize: true,
            margin: {
                l: 100,
                r: 200,
                b: 40,
                t: 40,
                pad: 4
            },
            paper_bgcolor: '#FAFAFA',
            plot_bgcolor: '#FFFFFF',
            legend: {
                x: 1,
                y: 1,
                bgcolor: '#E2E2E2',
                bordercolor: '#000',
                borderwidth: 1
            },
            yaxis: {
                title: Parameter_Name,
                zeroline: false
            },
            boxmode: 'group',
        };
        Plotly.newPlot('divPlot', data, layout);
    }
    </script>

Resulting Plot
Resulting Plot700×450 14.5 KB

#2

var layout = {
showlegend: true,
legend: {“orientation”: “h”}
};
Or
var layout = {
margin: {
l: 1,
r: 100, //increase right margin
b: 1,
t: 1,
pad: 0
},
}

#3

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.

horizontal align
horizontal align700×450 3.37 KB

#4
  • 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.
#5

I believe the traceorder is fine. I played with the different settings, but I don’t want to reverse it or anything. The tracegroupgap didn’t appear to change much.

Is there css I can override for the legend width or something? I assume the layout.legend.width doesn’t work. I’ve tried various sizes with no luck.

#6

If you have the container layer configured with styles these affect the graph, I had a problem with the margins and until I removed the styles in the container layer it was solved

#7

Yeah, it seems it’s inheriting some css that is causing the legend to be cut off. Thank you for your input. The problem is that it’s nested in multiple controls and I cannot pinpoint the problem now.

#8

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?

#9

Hi everyone,

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?

#10

To anybody having this issue, I solved it by switching my LESS.JS script tags to come BEFORE the PLOTLY script tags

#11

Hi Everyone I was also facing the same issue that is legends truncated from right side. But I resolved this with CSS.

I had 2 legends. By setting the translateX position to -10px, you can set according to your requirement. But you need to pick the Y position from the DOM.

#myDiv g.traces:first-child {
transform: translate(-10px,16.9px)!important;
}
#myDiv g.traces:last-child {
transform: translate(-10px,40.7px)!important;
}