[Bug]: Series order unpredictable in AreaChart and others
Closed this issue · 0 comments
Describe the bug
When there's more than one series in an AreaChart
(and other types, e.g. LineCharts), the order of series depends on the data in (depending on the use-case) non-intuitive and hard to predict ways where playing with order by
or sort=true/false
doesn't result in a robust solution.
For some kinds of visualization we care about the order the series are represented, either because they imply a certain meaning or because we use more sophisticated echarts features that rely on the order of series for their logic.
Steps to Reproduce
As an example, I was trying to build a chart where one series is subtracted from the other:
```sql data
select 10000 as amount, '2022-01-01'::date as month, 'a' as type union
select 20000 as amount, '2022-02-01'::date as month, 'a' as type union
select 15000 as amount, '2022-03-01'::date as month, 'a' as type union
select 8000 as amount, '2022-04-01'::date as month, 'a' as type union
select 7000 as amount, '2022-05-01'::date as month, 'a' as type union
select 12000 as amount, '2022-06-01'::date as month, 'a' as type union
select 10000 as amount, '2022-07-01'::date as month, 'a' as type union
select -8000 as amount, '2022-01-01'::date as month, 'b' as type union
select -10000 as amount, '2022-02-01'::date as month, 'b' as type union
select -12000 as amount, '2022-03-01'::date as month, 'b' as type union
select -11000 as amount, '2022-04-01'::date as month, 'b' as type union
select -10000 as amount, '2022-05-01'::date as month, 'b' as type union
select -15000 as amount, '2022-06-01'::date as month, 'b' as type union
select -20000 as amount, '2022-07-01'::date as month, 'b' as type
```
```sql ordered_data
select * from ${data}
order by type
```
<AreaChart
data={ordered_data}
x=month
y=amount
series=type
seriesOptions={{
'stackStrategy': 'positive'
}}
seriesColors={{
'a': 'green',
'b': 'red'
}}
sort=false
/>
Now drop the first data point and the order of series has flipped, breaking the whole visualisation
Logs
No response
System Info
No response
Severity
annoyance
Additional Information, or Workarounds
Digging around on Slack a bit, the introduction of a seriesOrder configuration has come up a few times but as far as I can see hasn't been implemented so far.
I've prototyped this for myself (duplicating the AreaChart component and sorting the seriesConfig
according to a specific seriesOrder
) and it seems to be working fine.
I'm happy to work on a PR (maybe building this into the getSeriesConfig
function so the behavior is consistent for other types of chart) if that's the way we want to go with this.