Black Lives Matter. Please consider donating to Black Girls Code today.
https://www.blackgirlscode.com

Legend Text is being truncated/cut off

Graphing Library 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.