Setting large x values for ViewportOrigin doesn't work

[mohzameer]

With a x range set with a state like thisxDomain={{ min: 0, max: xMax }} which xMax state value comes around 65. When we set the origin as this where viewport={{ size: { width: 7 }, initialOrigin: {x: xMax, y: 0}}, doesn't scroll to 65, but like half of it. But if we set 65 directly it works, but with a changing state it doesn't work.

[xanderdeseyn]

Hmm, you are setting the initialOrigin to the most-right point of the chart though, so that wouldn't work. If you want to scroll immediately to the end, can you try setting initialOrigin to xMax - width (7 in this case)?

[mohzameer]

xMax - 7 => 65 - 7 Comes to the left most - starting point. Doesn't go to the right most point.

[xanderdeseyn]

I'm still not entirely clear to me what your issue is, could you provide a screenshot maybe?

[mohzameer]

With this setting,

 xDomain={{ min: 0, max: xMax }}
        yDomain={{ min: 0, max: 200 }}
        viewport={{
          size: { width: 7 },
          initialOrigin: { x: xMax, y: 0 },

(xMax is set to 65 in the state) This is what I get, at the first render graph is going to half of the graph.

But given the documentation, this is how it should be? the graph should be scrolling to any X value (in this case far end of the right corner - to X= 65). Check the dates on X axis.

Your suggestion

setting initialOrigin to xMax - width (7 in this case)

Did not work, because xMax is 65 and width is 7, so,

 xDomain={{ min: 0, max: xMax }}
        yDomain={{ min: 0, max: 200 }}
        viewport={{
          size: { width: 7 },
          initialOrigin: { x: xMax-7, y: 0 }, // x will be 65 - 7

[xanderdeseyn]

Just so we're on the same page; in the following situation:

xDomain={{ min: 0, max: 50 }}
yDomain={{ min: 0, max: 200 }}
viewport={{
  size: { width: 10 },
  initialOrigin: { x: 40, y: 0 },
}}

We would expect the chart to render the part from 40-50 on the x axis. viewport.width + initialOrigin.x can never exceed xDomain.max, because that would put the viewport outside of the domain.

[mohzameer]

Thanks for bearing with me on the issue. This will work initialOrigin: { x: 40, y: 0 }, my issue is that,

this will not work setxMax(10); //in the useEffects

and initialOrigin: { x: xMax, y: 0 }, That's the issue I'm talking, when it's set through the useState hook in useEffects, it doesn't work (only comes to half like in the first snapshot I've posted). Except that, really great work, library works great and fits for our use case than almost all chart libraries out there.

[xanderdeseyn]

Chart now has a method setViewportOrigin where you can imperatively change it! Please close if this solves your issue :)

[mohzameer]

Solved it! thanks!