antvis / antvis/G2Plot

🤔 [QUESTION] Create a DualAxes chart with 2 stacked columns

Open
#3,654 0 comments 0 reactions 0 assignees View on GitHub
Question
Dominant language
TypeScript
Stars
2.7k
Forks
591
PR merge metrics
No merged PRs in 30d

Description

### 🐛 Creating a DualAxes chart with 2 stacked columns

Hello, we trying to create a DualAxes chart with 2 stacked columns, displaying the evolution of 2 metrics stacked by type over a period of time.
Our data is similar to this:
[{
"time": "2023-08-19 00:00:00",
"type": "type1",
"value1": 12995,
"value2": 27,
},
{
"time": "2023-08-19 00:00:00",
"type": "type2",
"value1": 78837,
"value2": 200,
},
{
"time": "2023-08-20 00:00:00",
"type": "type1",
"value1": 80007,
"value2": 150,
},
{
"time": "2023-08-20 00:00:00",
"type": "type2",
"value1": 65007,
"value2": 70,
}]
In our data, "value1" is always much bigger than "value2". We are trying to display "value1" and "value2" on the same chart with columns stacked by type. Meaning that we want a column for the day "2023-08-19" with the values of "value1" for the types "type1" and "type2" stacked, and another column side-by-side with the first one for the same day with the values of "value2" for the types "type1" and "type2" stacked. With "value1" being one Y axis and "value2" another. The problem we are facing is that the columns for each day are being presented one over the other resulting in the presentation of a single column, and the inability to read the data.

### 🏞 Expected result

Here is a modified screenshot of the expected result, only for visualization purposes:

![image](https://github.com/antvis/G2Plot/assets/127980665/09140d50-ebab-4311-af5c-17a11b93a06e)

* **G2Plot Version**: 2.4.31

Thank you for your time,
Rodrigo Santos

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the DualAxes chart with the supplied data and G2Plot version 2.4.31. Inspect the DualAxes configuration and related chart documentation to determine how the two metrics can use separate axes while keeping their stacked columns side by side. Done means each day shows separate stacked columns for value1 and value2, with readable independent Y axes.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.