apache / apache/echarts

Can multiple y-axes share a single x-axis and be arranged vertically?

Open
#21,509 2 comments 0 reactions 0 assignees View on GitHub
en new-feature pending
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### What problem does this feature solve?

Image
Hello:
I want to achieve an effect like the one shown in Figure 1:
1. Display multiple ·yAxis· in a single group.
2. When the mouse moves, the marker lines remain consistent across each yAxis (correctly displaying the values corresponding to each indicator for the current date).
3. Be able to flexibly control which series are displayed in each yAxis

This chart is implemented using Highcharts12, where the height of each yAxis is calculated as `plotHeight - (Vpadding * (item.length - 1)) / item.length`. The space between each yAxis is used to draw the legend. Here, I achieved this by drawing rectangles and text using `chart.render`. I would like to ask if ECharts can achieve such graphic effects?

### What does the proposed API look like?

option = {
xAxis: [
{
id: 'xAxis-1'
},
{
id: 'xAxis-1'
}
],
yAxis: [
{
id:'group1',
type: 'multiple',
items: [
{
xAxisId: 'xAxis-1',
top:0,
height'45%',
padding:'5%'
},
{
xAxisId: 'xAxis-1',
top:'50%',
height'45%',
padding:'5%'
},
{
//...
}
]
}
],
series: [
{
xAxisId: 'xAxis-1',
group: 'group1',
data: []
},
{
xAxisId: 'xAxis-1',
group: 'group1',
data: []
},
{
xAxisId: 'xAxis-1',
group: 'group2',
data: []
}
]
};
----PS: This `options` is how I imagine it 😀.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.