Two Axis linked with multiple Axis

What problem does this feature solve?

I want to have a functionality which allows to have the same values on every parallel axis. Actually the function alignticks don’t fit what I’m looking for.

Here a sample code:

option = {

  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      animation: false
    }
  },
  legend: {
    data: ['Value', 'Price'],
    left: 'center',
    icon: 'circle',
    itemGap: 30
  },
  xAxis: {
    type: 'category',
    data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
  },
  yAxis: [
    {
      name: 'Valor',
      type: 'log',
      scale: true
    },
    {
      name: 'Price',
      alignTicks:true,
      type: 'log',
      scale: true,
      logBase: 10
    }
  ],
  series: [
      {
      name: 'Valor',
      type: 'line',
      lineStyle: { color: '#0066ff', width: 1.5 },
      itemStyle: { color: '#0066ff' },
      showSymbol: false,
      z: 10,
      data: [500, 780, 750, 760, 770, 2000, 3500, 1500, 30000, 3900, 7800, 7900, 8000, 9000, 7000, 8500, 8000, 7000, 6000, 4000]
    },
    {
      name: 'Price',
      type: 'line',
      yAxisIndex: 1,
      lineStyle: { color: '#000', width: 1.5 },
      itemStyle: { color: '#000' },
      showSymbol: false,
      z: 20,
      data: [300, 280, 250, 260, 270, 300, 550, 1000, 4000, 3900, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400]
    }
  ],
};

My request is based on the HighCharts library, which provides an API called linkedTo, which does the same thing as I described here.

Here a example of highcharts: jsfiddle

What does the proposed API look like?

Let’s say we have a boolean attribute yAxis.linkedTo. By setting it to 0, its ticks will get aligned with every other axis in the yAxis array which has the same value. That way, if one of the axis has a value of 100, all the other axis will also have a value of 100 and get aligned altogether.

[Ovilia]

@aleixtusetbadia A pull request is welcomed. You may checkout how we aligned ticks of multiple axes with ECharts and how to debug.

[aleixtusetbadia]

I tried already with min and max, also setting a functions for min and max and with log charts anything works. Highcharts provide this option with linkedto, grafana, plotly, tableau, and other chart providers do it aswell.

Would be great to implment some similar solution, the main idea would be to set one of the Y axis as master and the other that take the axis values from master and align with them.

See solution that grafana implemented here

And here solution for plotly

Someone asked the same here https://github.com/apache/echarts/issues/16154, so is a feature that would be great to implement.