如何防止绘图图例的宽度限制图表数据的可用空间？

Question

我的应用程序中有一个绘图图表。我在绘图区上方有一个水平图例。当字符串被本地化为另一种语言时，图例的宽度自然会改变，但绘图本身也会缩小，就像是为其他图例文本腾出空间一样。

图例位于绘图上方，因此不应干扰任何绘图元素。是否有一些设置可以保护绘图尺寸不被图例更改？

这是我的布局：

{
    legend: {
      x: .5,
      y: 1.3,
      orientation: "h",
      traceorder: "normal",
      bordercolor: '#FFFFFF',
    },
    margin: {
        l: 80,
        r: 40,
        t: 60,
        b: 40
    },
    shapes: [
        {
            name: "4 hour threshold",
            type: "line",
            xref: "paper",
            yref: "y",
            x0: 0,
            y0: 4,
            x1: 1,
            y1: 4,
            line: {
                color: gray,
                width: 1,
                dash: "dot"
            }
        }
    ],
    title: {
        text: "<b>$therapy_report_usage_hours</b>",
        font: {
            family: "Helvetica"
        },
        x: 0.05,
    },
    xaxis: {
        tick0: 6, // start on the 6th tick
        dtick: 7, // label every 7 ticks
        range: [-1, 30]
    },
    yaxis: {
        showline: true,
        ticklen: 10,
        range: [0, 12],
        dtick: 2
    }
}

​

​

​

​

Answer 1

解决方案是锚定右侧的图例。以下是布局中更新的图例元素：

{
    x: 1,
    xanchor: "right",
    y: 1.3,
    orientation: "h",
    traceorder: "normal",
    bordercolor: '#FFFFFF',
}