[Feature] Get calculated max/min value of yaxis

[sammuell]

What problem does this feature solve?

I would like to retrieve the automatically calculated min/max value of an yaxis.

What does the proposed API look like?

I'm unsure about this. There seems to be no getter API except for chart.getOption(). Using this seems like a hack as the option property would only be readable but not writable using setOption().
option.yAxis[1].minCalculated

[jiawulin001]

As is designed, axis scale will automatically fit the user data so users won't worry about adjusting axis. What effect are you trying to attain?

[sammuell]

Here's my use case:
To highlight the weekend days for better readability of the chart I insert a fake bar chart in light gray (see image below). The height is determined before rendering by the max value of the data (right axis). However, the calculated max value of the yAxis is larger, making the weekend day bar look weird, because it's not at full height of the axis. I would like to get the max value of the axis after rendering and increase the data of the weekend bar to that value.

[jiawulin001]

Do you mind providing a similar option to test with? Also, do you mean that you want all gray bars to be at 250 in this picture?

[sammuell]

Also, do you mean that you want all gray bars to be at 250 in this picture?

Exactly. I first tried to draw the grey rectangles using the graphic option. That does not work due to the unknown specific coordinates.

[jiawulin001]

You can use markArea to achieve such effect, by setting the gray zone data to none and put markArea there. But this method is only applicable to static chart. Please check the sample for reference.

Code Sample

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, , 70, 110, 130],
      type: 'bar',
      markArea: {
        itemStyle: {
          color: 'rgba(0,0,0,0.1)'
        },
        data: [
          [
            {
              name: 'GrayZone',
              x: '44.5%'
            },
            {
              x: '55.7%'
            }
          ]
        ]
      }
    }
  ]
};

[Ovilia]

markArea is a simpler way to make it. Otherwise, you can use chart.getOptions().grid.height to get the size of the grid area.

[sammuell]

Thanks for pointing me to markArea.
I implemented it using two xAxis properties. However, the rendered result does not extend as far as expected (purple lines)
It seems to work nicely for line charts using xAxis.boundaryGap: false. However, bar charts uses a category xAxis.

---

There seems to be an error in the documentation: markArea.data is supposed to be an array, not an object.
https://echarts.apache.org/en/option.html#series-bar.markArea.data

// Taken from https://echarts.apache.org/examples/en/editor.html?c=line-sections
// works:
data: [
  [
    {
      name: 'Morning Peak',
      xAxis: '07:30'
    },
    {
      xAxis: '10:00'
    }
  ]
]

// produces an error:
data: [
  {
    name: 'Morning Peak',
    xAxis: '07:30'
  },
  {
    xAxis: '10:00'
  }
]

[sammuell]

Otherwise, you can use chart.getOptions().grid.height to get the size of the grid area.

That does not work either: the height is undefined:

console.log(opt.grid[0]);

[jiawulin001]

However, bar charts uses a category xAxis.

Right, so you might have to use position relative to DOM to locate the gray bar like what I did in the code sample here

[sammuell]

The issue at hand is that the chart is a non-static time line. The number of items of the xaxis is changing over time, so you cannot determine the necessary percentages.