DateAxis range

[OstapchelaEst]

I'm trying to create a chart with a live data and ran into one problem. When adding new data to the series, the DataAxes axis changes and instead of the chart continuing to be drawn to the right, it stays in place and shrinks. When trying to add min max parameters it helps, but if the graph is drawn beyond these values I lose the ability to scroll to these places

Here you can see what I'm talking about. https://jsfiddle.net/DzmitryOst/50mq7rxL/20/

Question How can I make DateAxis not change its range when adding new data to the series?

[martynasma]

Here's a trick: set start on your X axis to a very small fractional number. Visually, it will be the same, but now the chart will think that it's zoomed in and will try to preserve zoom across data updates:

var xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
  // ...
  start: 0.00001 // <-- this
}));

[OstapchelaEst]

@martynasma Unfortunately, it doesn't change the behavior of the schedule in any way. It still shrinks when adding new data because the time axis increases in the diapason. I want to achieve such behavior when the value of the date axis does not change, and the graph continues to be drawn going beyond the right border and if it reaches there, there was an opportunity to scroll there

[martynasma]

Gotcha. The only workaround I can think of is to log start end dates when the chart loads, then do dateAxis.zoomToDates() after data update.

[OstapchelaEst]

@martynasma that's an interesting thought. I tried to use this hack and the desired behavior is almost achieved, I think we are on the right track!

I added the following code to the place where I update the data.

  const startDate = xAxis.getPrivate('selectionMin')
  const endDate = xAxis.getPrivate('selectionMax')

  series.data.push({
    date: time,
    value: newValue
  })

  if (startDate && endDate) {
    series.events.once('datavalidated', function() {
      xAxis.zoomToDates(new Date(startDate), new Date(endDate))
    })
  }

And from the looks of it, everything works as expected, but if you zoom in on the graph (no matter where) you can see a small jump to the right each time a new data is added. If you disable animations it will be clearly noticeable.

Here is an example with animations: https://jsfiddle.net/DzmitryOst/50mq7rxL/66/

Here without them: https://jsfiddle.net/DzmitryOst/50mq7rxL/68/

I found an article on stack overflow as it seems to me a similar problem, which in version 3 of charts is solved with the help of the parameter

AmCharts.makeChart("...", {
  // ...
  zoomOutOnDataUpdate: false,
  // ...
});

But I have not found something similar for version 5. Maybe you have any other thoughts on this issue?

[martynasma]

OK, different approach: dynamically calculating and setting start / end of the axis.

Live demo: https://codepen.io/team/amcharts/pen/ExJGKXm/a1db65911ac7c1ee015d78cdeda92ef6

[OstapchelaEst]

@martynasma thanks for your replies, it helped me :) In general, I think this behavior is often expected from charts with live data , and all these solutions look like "tricks". Is it possible that in the future your team will implement to enable similar behavior via parameters?

P.S. you can close the issue after the answer

[martynasma]

We will consider this, however, most probably it won't be a built-in feature. All of these fuzzy logic features add up to complexity, and bugs / increased maintenance cost. 🤔