(JS) Legend text gets cutoff

[Jason94]

For longer legend labels, the character at the end gets cutoff slightly:

I noticed that padding one of the lines with spaces seems to fix the problem:

Here is the code that we use to render the plot, with the spaces added (2nd line):

 // Extra space on legend keys is a workaround for plotly cutting off the last character
  const oldBars = bar(getOldData(metrics).reverse(), names, `Submitted before ${cutoff}   `, OldColor);
  const newBars = bar(getNewData(metrics).reverse(), names, `Submitted since ${cutoff}`, NewColor);

const bar = (values, labels, name, color) => ({
  type: 'bar',
  y: labels,
  x: values,
  hoverinfo: 'x',
  orientation: 'h',
  marker: { color },
  name,
});

    <Plot
      data={[newBars, oldBars]}
      layout={{
        autosize: false,
        barmode: 'stack',
        width: 900,
        height: 600,
        margin: { l: 5, r: 0, t: 0, b: 60, pad: 1 },
        xaxis: {
          fixedrange: true,
          showline: false,
          showticklabels: false,
          zeroline: false
        },
        yaxis: {
          fixedrange: true,
          showline: true,
          showgrid: true,
          showticklabels: false,
          zeroline: false
        },
        legend: {
          font: {
            color: 'black',
            family: 'Helvetica',
            size: 16
          },
          traceorder: 'grouped'
        }
      }}
      config={{
        displayModeBar: false,
        scrollZoom: false,
        showAxisDragHandles: false,
        showAxisRangeEntryBoxes: false,
        sendData: false
      }}
      onClick={handleClick}
    />

[rutabagaist]

Also having the same issue, using plotly in RShiny. Adding 4-5 spaces after just one of the legend items fixes the issue. Not sure if there are margin or padding parameters for the legend box or the legend items, but it doesn't look like it from the documentation. I looked at it through Firefox's inspector, and after editing a few values couldn't determine which parameter controlled this.

[Benjamin-Lee]

Adding four (no fewer!) worked for me. Thanks for the suggestion @rutabagaist

[andoks]

Possibly related problem from forums: https://community.plotly.com/t/legend-cut-off-when-plot-wrapped-in-details-html-tag/13232/2