Bar chart half cut-off

plotly.js
1

When rendering a chart, based on asynchronous server data, half of the chart seems to be ‘hidden’ from view:

Peek%202019-02-20%2018-52

The chart layout and render call look like this:

const layout = {
        autosize: true,
        height: 300,
        xaxis: {
          showline: true,
          automargin: true,
          showticklabels: true,
          tickfont: {
            size: 10,
          },
          tickwidth: 1,
          ticklen: 4
        },
        yaxis: {
          title: "Resident name",
          showline: true,
          automargin: true,
          showticklabels: true,
          tickfont: {
            size: 10,
          },
          tickwidth: 1,
          ticklen: 4
        },
        margin: {
          r: 10,
          t: 10,
          b: 40,
          l: 10
        },
        bargap: 0.05,
        barmode: 'stack',
        showlegend: true,
        legend: {
          traceorder: 'normal',
          x: 0,
          y: 5,
          orientation: 'h'
        }
      };

      // Render plot
      Plotly.newPlot('residentActivitiesSummary', data, layout, { displayModeBar: false, responsive: true });

How can I get the lower half of the chart to be displayed?

2

I removed the margin: b:40 and it renders slightly better, but still cuts off about 1/3 of the residents (showing only 13 of 19):

Screenshot%20from%202019-02-20%2019-03-23

3

OK, sorry. There was some CSS style that was hard-coding the SVG height… footgun:

 #residentActivitiesSummary svg {
  height: 20em;
}