[SimpleBarChart] Horizontal bars become compressed when legend wraps onto multiple lines

[acmertz]

Bug summary

The thickness of bars rendered in a <SimpleBarChart> are currently determined automatically based on the chart height that was set in chartContainer.minHeight on the theme definition. Although this appears to be an intentional behavior in the code so that everything (including the legend) fits within the provided bounds, it can lead to situations where bar charts that are supposed to look similar actually render bars with vastly different heights because their legends take up a different amount of space.

Current behavior

fixed-chart-height-with-wrapping-legend.mp4

Desired behavior

We've worked around this behavior by using the renderLegendContent prop to render a custom legend with height: 0 and overflow: visible, and then using a ResizeObserver to monitor the height of the legend's children so we could apply padding to the container to reserve enough space so that the legend doesn't visually clip the bottom bound.

Despite its naming convention, chartContainer.minHeight is treated as a fixed height in ChartDimensions.tsx and the chart does not expand vertically when the legend wraps.

Implementing one of the following options (or similar) could alleviate the need for workarounds to maintain a stable bar height:

• Add a prop to configure the height of the bars
• Add an option to let the legend flow beneath the chart instead of reserving space within the bounds

Reduced test case

https://codesandbox.io/s/polaris-viz-wrapping-legend-with-fixed-chart-height-m438th?file=/src/index.tsx

Open the code sandbox and resize the preview area so that the legend reflows onto multiple lines. The horizontal bars get narrower as the legend takes up more vertical space.

Specifications

• Polaris-Viz version number: v9.8.1
• Browser: Chrome 115
• Device: MacBook Pro with M1 Pro
• Operating System: macOS Ventura 13.4.1