React-vis: Legends for charts with multiple series

[samhogg]

I've been pondering this for the last couple days, working out a means of building a legend with interactivity hooks into the existing XY chart series.

Perhaps something like this could work as a starter - wrapping a higher order component around the series components. This component would essentially be an interface rendering a 'default legend' and include event handlers to do things like filtering on selection of a specific series.

<XYPlot
  width={300}
  height={300}>
  <HorizontalGridLines />
  <Legend onSelection={this.onSelection} style={style}>
    <LineSeries
      color='red'
      data={[
        {x: 1, y: 10},
        {x: 2, y: 5},
        {x: 3, y: 15}
      ]}/>
    <LineSeries
      color='blue'
      data={[
        {x: 1, y: 10},
        {x: 2, y: 5},
        {x: 3, y: 15}
      ]}/>
  </Legend>
  <XAxis />
  <YAxis />
</XYPlot>

An alternative would be just to have a standalone <Legend/> component that is fed information about series the chart from the XYPlot - potentially less complexity there, I guess.

Would appreciate thoughts (or alternative approaches!) on this, and happy to help with PR to get it landed.

[samhogg]

I guess an example wouldn't hurt - I'm thinking something along the lines of this (from plotly.js)

[bulyonov]

@samhogg , Yes, Sam, I have legends in the roadmap. It's not the most needed feature, but quite important though.

Thank you for you proposal. Yes, this is one of the ways to implement legends. However, legend placement differs from one vis to another. The number of items in legends may vary significantly as well.

We are considering creating standalone legend components and then providing an obvious (and optional) way to connect legends to a chart. I'll create a task for that shortly.

[samhogg]

@bulyonov cool! Yeah the positioning thing could get quite complex. The easiest way would probably be to have the legend as an overlay on the chart (absolutely positioned) and able to be hidden by a user if it's concealing data.

[bulyonov]

@samhogg yes, this is one of the options. The other option is to keep the legend _outside_ of the chart and provide a simple and easy way to connect it with the visualization.