[Bug] Zoom (Panning) outside last data in series

[MariiieP]

Version

5.5.1

Steps to Reproduce

I want to shift the data on the axis beyond the date. After the shift, get new data and redraw the data on the graph. See ER.

I tried to do this using the current capabilities and attaching the configuration below. If you set a large percentage, it starts to work in a similar way. But it is unrealistic to select a percentage for the gap between the data every time Also, this solution allows you to shift the axis only in one direction, and not in two at once.

Example:

option = {
  xAxis: {
        type: 'time',
        splitNumber: 5,
    },
  dataZoom: {
    start: 99.9992, // !!! 
    type: "inside",
    moveOnMouseMove: "ctrl",
  // rangeMode: [1570627800000, 50]
  },
    yAxis: {
        type: 'value',
         splitNumber: 3,
         min: 0,
         max: 5,
         alignWithLabel: true
    },
    series: [
      {
        data: [[1721906700000, 0], [1721906400000, 1], [1721906100000, 2], [1721905800000, 0], [1721905500000, 1]],
        type: 'line',
        zoom: 0.15, // !!!
      },
      {
        type: 'scatter',
        data: [
          [1570627800000, 2]
        ]
      }
    ]
}

Current Behavior

I can't achieve this behavior at the moment. rangeMode allows you to change the axis only inside the current segment 0-100. Behavior with the configuration above:

Expected Behavior

ER:

The highcharts library allows you to do this:

simplified example: https://jsfiddle.net/BlackLabel/uab5mw0d/

Environment

- OS: windows
- Browser: Chrome 126.0.6478.185
- Framework: React 18

Any additional comments?

Is it possible to achieve ER with current capabilities?

[helgasoft]

Panning can be achieved with xAxis.min and xAxis.max - Demo

this issue is not a Bug or a Feature, but a "how-to" question 🚩 Please follow Official posting guidelines (below). This is not a good place to ask questions about usage, "how to" or extensive debugging assistance.

---

The issue list is reserved exclusively for bug reports and feature requests. For usage questions, please use the following resources:

• Read the docs
• Find in examples

• Look for / ask questions on Stack Overflow

Another good resource is website makeapie.cn with many code examples.

[MariiieP]

I already wrote above, min / max does not work, as start, rangeMode. The data needs to be requested AFTER scrolling the axis, pls look at the ER carefully.

more detailed example:

• I have a set of points for a period in the last three hours (h0,h1,h2). There is no other data.
• I hold down ctrl (or using another hotkey) and scroll the axis to the left (backward along the time axis) or to the right (forward along the time axis) for two (or 30min/1day/2 week etc) hours. Now the time is: -h2,-h1,h0 // h2,h3,h4
• The graph has drawn new axis and dates, a data request has been sent by new dates, after receiving a new portion of data, the series are drawn on the graph. Such scrolling is possible even before 1970. At each moment of scrolling, the user can view data for only three hours.

also, you do not know what data you will receive, what min/max you will have.

@helgasoft

[helgasoft]

Detailed explanation helps. It's about using the dataZoom as data selector. Not easy but feasible - link.

BTW, the Highcharts code example uses xAxis.max, same as ECharts 😉