Shared legend and consistent colour assignments for multiple charts

[hughess]

Feature Description

This may fit better under a "small multiples" feature, but I think it would be good to be able to connect charts individually to a shared legend.

Noticed this when using the Grid component from Evidence Labs (https://github.com/evidence-dev/labs).

In this scenario, I think I would like a shared legend which sits above the charts and uses the full width of the article to avoid so much pagination in the legend.

Colours for each series should be consistent across charts when used in this way.

It would also be nice to have easy control over which axis labels are displayed. This can be manually adjusted, but there may be a better way to do that for situations like this.

Goal of Feature

Quickly build multi-chart sections using the same dataset.

Current Solution

I believe the only solution to get the colours to be identical would be sorting according to the series column, but even that doesn't guarantee the same colours.

Alternative Ideas

A small multiples feature, which might fit best within individual charts. E.g., adding a facet prop:

<BarChart data={query}
   x=date
   y=sales
   series=product
   facet=country
/>

[exit99]

Yes, this is a must have feature. Without it, everything is too confusing.

[hughess]

@exit99 would something like this work for you?

seriesColors={{
   'West Region': '#2B5A72',
   'East Region': '#891B07',
   'North Region': '#078907'
}}

This would be applied in each chart where you want them to be applied, like so:

<BarChart
   data={mydata}
   x=date
   y=sales
   series=region
   seriesColors={{
      'West Region': '#2B5A72',
      'East Region': '#891B07',
      'North Region': '#078907'
   }}
/>

[exit99]

Yes, but we'd also need the order of the legends to match also. Even if we could just sort the legend that would be fine.

[archiewood]

as a workaround you can sort the legend with the echartsOptions property

echartsOptions = {{
  legend: {
    data: [
      { name: 'Category B', icon: 'circle' },
      { name: 'Category A', icon: 'circle' },
      { name: 'Category C', icon: 'circle' }
    ]
  }
}}

[hughess]

That echartsOptions workaround also works with an array of series names, so you could do something like this:

<BarChart
   data={my_query}
   x=date
   y=count
   series=my_series_column
   echartsOptions = {{
     legend: {
       data: my_query.map(d => d.my_series_column)
     }
   }}
/>

If your query is ordered by the series column, this should put the items in the correct order.

This also doesn't need to be the same query going into the chart - you could use the same echartsOptions code for every chart where you need this order - so long as the query you use in echartsOptions includes all the series contained in the chart.