Charts - legendAllowWrap callback

[dlabrecq]

Provide an optional callback for the chart legend's legendAllowWrap property. If the chart's legendAllowWrap property is also provided, the chart's parent container height may be adjusted as legend items wrap in response to chart width. For example, whenever a legend item is wrapped, a callback could be used to increase / decrease the parent container height.

Most chart components support the legendAllowWrap property, which allows the legend to be responsive when items are wider than the chart's parent container. The chart's SVG height and width are already 100%, so it can be responsive itself. However, if you define the the height and width of the chart's parent container, you must also accommodate the extra legend height due to wrapping.

In general, the legendAllowWrap feature works well for a majority of cases. However, there was an edge case which a user included 20+ legend items. The problem was the user never increased the height of the chart's parent container, so the some wrapped legend items were hidden from view. That is, part of the SVG was cut off by the size restriction defined by the chart's parent container.

User Example

The simplest solution would be to increase the height of the chart's parent container to accommodate the 20+ legend items. Using a CSS overflow may also be an option, so the chart's parent container doesn't cut off the SVG. It's possible to dynamically adjust the height of the container yourself, based on break points you defined, but more complicated.

That said, the example below shows how the parent's container height could be adjusted if the itemsPerRow value is known.

Items Per Row Example