How to shift divisions and labels not to start at zero for apache echarts

Question

I have this chart with intervals of 7 for divisions and labels. The bottom X axis is correct by starting at 0 and showing intervals in every 7 values. For the top axis I want to do the same but to align with the series points, basically 1 value to the left. I can't figure out how to shift it.

Answer 1

You can achieve this via inversing one of the xAxis and than formatting its value. For example:

const option = {
  xAxis: [
    {
      type: 'value',
      interval: 7,
      min: -1,
      max: 49
    },
    {
      type: 'value',
      interval: 7,
      max: 49,
      min: -1,
      inverse: true,
      axisLabel: {
        formatter(v) {
          return (48 - v).toString()
        }
      },
    },
  ],
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [[-1, 150], [6, 230], [13, 224], [20, 218], [27, 135], [34, 147], [41, 260]],
      type: 'line'
    },
  ]
};

Playground