I write a layout component called `WithLegend` - Given `renderLegend` and `renderChart` as render props, it will give space enough to render the legend and give the rest of the container to the chart (via flexbox). - `renderChart` is wrapped in `@vx/responsive/ParentSize` and will be given `parent`. Developer then can pass `parent.width` and `parent.height` to the chart. - Developer can also set the legend position (`top`, `left`, `bottom`, `right`), and it will put the legend there. - It will also pass the `flexDirection` to the legend component, which `@vx/legend` can directly use to arrange item left-to-right or top-to-bottom appropriately. For example, legend on the top should arrange legend items left-to-right, legend on the right should arrange legend items top-to-bottom
p.s. The `shape="rect"` gives rect, but my screenshot above was outdated. Thanks for the custom shape tldr tho. Very useful. [ Full content available at: https://github.com/apache/incubator-superset/pull/5758 ] This message was relayed via gitbox.apache.org for [email protected]
