Repository navigation
Shared legend and consistent colour assignments for multiple charts #1041
Description
Activity
Yes, this is a must have feature. Without it, everything is too confusing.
Reacted by Sean@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' }} />
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.
Reacted by Seanas a workaround you can sort the legend with the
echartsOptionspropertyechartsOptions = {{ legend: { data: [ { name: 'Category B', icon: 'circle' }, { name: 'Category A', icon: 'circle' }, { name: 'Category C', icon: 'circle' } ] } }}Reacted by SeanThat
echartsOptionsworkaround 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
echartsOptionscode for every chart where you need this order - so long as the query you use inechartsOptionsincludes all the series contained in the chart.- locked and limited conversation to collaborators
on Aug 14, 2024
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
Gridcomponent 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
seriescolumn, 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
facetprop: