Distribute axes evenly

[aweibell]

What problem does this feature solve?

When positioning a yAxis, one can set position left/right and offse (in pixels?). If none of these are set, and multiple axes added, the axes should be evenly distributed along the xAxis of the chart. It may be preferable to let position get two new options: 'inside', which distributes axes inside the chart, or 'outside', which distributes outside the plot area, ensuring that names and labels don't interfere with each other.

An alternative solution, of lower value, but still better than the existing options, could be to allow the use of percentage values in offset instead of pixels.

Example of using current features

Here I've put the y values in axis names instead of showing the axisLines. Using offsets in steps of -100 as I don't know the size of the chart area. Eventually they interfere, as can be seen in the upper right.

What does the proposed API look like?

yAxis: [
  {
    position: 'inside',
    axisLine: { show: false }
    ...
  },
series: [{ yAxisIndex: 0, ... }]
]

[echarts-bot]

Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that it contains a minimum reproducible demo and necessary images to illustrate. Otherwise, our committers will ask you to do so.

A minimum reproducible demo should contain as little data and components as possible but can still illustrate your problem. This is the best way for us to reproduce it and solve the problem faster.

You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe our mailing list.

Have a nice day! 🍵

[Ovilia]

Sorry I didn't understand why do you need to do that. More commonly, you set the data with x and y values for each data and each series with the same x value will have the same position.

[aweibell]

The situation where I need this is when multiple series have different value ranges and my users want a separate Y axis for each series to utilize the full chart height. I want to indicate the min/max range of each series, without wasting a lot of space outside the plot area (limiting the available space for the actual plot). If putting the axis labels outside the plot area, it is also difficult to achieve high utilization of the space as the positioning is fixed by offset in pixels, and not dynamic according to the size of the actual label content.

I also find the possibilities for controlling the axis labels to be limited. They appear ON the min and max lines, while I would prefer to have them below and above, respectively, i.e. outside the plot area. Even if I set splitNumber: 1 there sometimes appear a value in the middle. That is why I tried to put them in the axis name, as a workaround/hack.

Was this clarifying? Please let me know if I can do anything more to explain the problem.

[Ovilia]

You need multiple grid, xAxis and yAxis and make sure that all grids are in the same position.
Take this example as a start and change the position of the second grid to be the same as the first one.

[aweibell]

Thank you for reaching out, but I really don't understand how multiple grids will help. I am not very familiar with grids, but all my testing so far has been unsuccessful.

1. How can multiple grids provide automatic placement for multiple y axes without collisions?
2. When adding one yAxis and one xAxis per series, and one grid per yAxis, everything is put on top of each other, just as with one grid? Please see my codesandbox
   https://codesandbox.io/s/react-echarts-multiple-y-axes-3efrb?file=/src/plotConfig.js
   Add series by clicking the button. Option object below.