Limit start & end date

[rmehner]

👋

First of all: Thanks for all the work on this library, worked really well for us so far :)

For our app, we need to be able to limit the start date and the end date and need to disallow zooming / panning beyond that. We're setting the date range initially like this:

const config = {
 // ... omitting other values for readability
  range: {
    start: new Date('2019/01/01'),
    end: new Date('2019/05/27'),
  },
}

So the initial state is correct, but it allows to scroll beyond that. onZoomEnd triggers after the chart already has been redrawn and even with the other event listeners, the redraw usually happens before we can limit the date again, leading to some flickering.

Any ideas / hints on how to achieve what we want to achieve? Thank you :)

[Busteren]

This is not currently in version 1.3.0. However I made a pr for this: #269

So it uses extents in D3 to do this. So the initial boundaries are start and end range. Also make sure to set max zoom to 1 so you cannot zoom out of bounds (think it’s max zoom scale).

Just download the repo and build it from th zoomInprovements branch and you should have what you need.

There are also some bug fixes not released yet, so really recommend using latest

[Busteren]

@rmehner did it solve your need?

If not let me know and if it did, then please close the issue 🙌

[rmehner]

@Busteren haven't had the time to test that, will report back (albeit would prefer a proper 1.4 release, but I realize that this might be much more work :))