Echarts UX
Problem to solve
I have two use cases for the same pattern within area charts:
[A] is part of what comprises [D] | [A] + [B] + [C] = [D] |
---|---|
Essentially, the first design (left) shows that the orange area is part of what makes up the gray, whereas the second design (right) shows stacked data. I tried to show the difference between these by using some transparency for the orange area on the left (20% opacity), and no transparency on the right (100% opacity), but this is a poor solution for 2 reasons:
- The differences between the two aren't clear/ the data being communicated isn't clear.
- The background lines on the graph are covered on the right, which makes it harder to determine which exact Y-axis value the graph data corresponds to.
Proposal
- Design a solution for each use case ([A] is part of [D]; [A]+[B]+[C]=[D])
- Determine what control we have over echarts design