XYChart Legend #1143
-
|
Hi team, Firstly thanks for the awesome work on visx! Question: how do I add a legend to an XYChart? For instance on the gallery of the XYChart https://airbnb.io/visx/xychart how would I add an ordinal legend to the bottom (underneath the X axis) that had the three series listed horizontally (San Fran, NY, Austin) and a coloured dash to present the line color? I've looked into the legends package https://airbnb.io/visx/legends but I don't understand how to access the scale instance/objects that are required for the legend and are buried within the XYChart somewhere! Any pointers appreciated, |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
Hey @JamesIrish 👋 thanks for checking out Legends were initially on the MVP features for
|
Beta Was this translation helpful? Give feedback.
-
|
Perfect!! Thanks Chris, great example. |
Beta Was this translation helpful? Give feedback.
Hey @JamesIrish 👋 thanks for checking out
visx. Here's a demo incorporating a legend intoXYChart. The key is theDataContextwhich is described underAdvancedUsagein the@visx/xychartdocs.Legends were initially on the MVP features for
@visx/xychartbut didn't make the cut. Thankfully it's pretty straight forward to integrate. I left additional comments in the sandbox. Note this is an HTML legend (which is what@visx/legendis based on), so you can't render it as a child ofXYChartsince the chart is SVG based. Hope that helps!