Skip to content

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

@codehealer

Description

@codehealer

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 😀.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enThis issue is in Englishnew-featurependingWe are not sure about whether this is a bug/new feature.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions