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

[Ovilia]

@aweibell Hi, I made this demo for your. https://jsfiddle.net/ovilia/8o7n41e5/4/ See if this helps.

[aweibell]

I appreciate your efforts, @Ovilia, but I don't see how the demo addresses my request?

What I want is multiple Y-axis with axisLabels distributed evenly, or at least so that the numbers are readable and not conflicting with each other. I want them to be inside the plot area in the X-direction, but the min/max numbers to be outside the plot area in the Y-direction.

My first screenshot was a hack where I used yAxis.name to show the values that I calculated from the data set (for the yAxis.min/max props). However, I was not able to spread them evenly across the plot area, since the only option is the offset value in pixels.

Ideally I would prefer to use the yAxis.axisLabel values, with a setting that could position them outside the plot area to not interfere with the series line. Maybe that should be a separate feature request?

I have modified my sandbox example. It kind of works for a wide chart, but having pixels as the only option does not make it easy to spread the axis evenly and avoid collision, e.g. when the plot is narrow. See attached images.

[Ovilia]

I'm not sure what does the x value in your chart mean but it looks somehow hard to understand what the chart means. Not sure if your are looking for this: https://echarts.apache.org/examples/zh/editor.html?c=parallel-aqi

[aweibell]

Sorry for not being specific, I thought my data set in the sandbox was showing that my X values are timestamps. My data are timeseries. From what I read in the documentation, parallell is meant for data that are not timeseries?

Apart from that, the automatically spread out multiple Y axis feature of the parallell plot is exactly what I am looking for, just for a series plot!

I would also prefer if splitNumber: 1 was forcing the graph to display only min/max values. Now you can't tell for sure if there will appear a value in the middle or not.

[aweibell]

Any additional thoughts on this, @Ovilia ?

[github-actions[bot]]

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

[github-actions[bot]]

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!