How to resize EventDrops d3 chart/timeline?

Question

I am using the following library: https://github.com/marmelab/EventDrops

I have been able to successfully use it in angular 6 project. However, I cannot seem to figure out how I can resize the timeline based on switching from web view to a mobile view (enable responsiveness).

One way to get that to work was to redraw the timeline when the window resizes, however, that also I couldnt figure out the redrawing part and how to detect screen size change in angular to redraw timeline.

Answer 1

In order to resize the window you can create a method in any of your components (most like the one that uses the chart):

  resizeFix() {
    const fix = setInterval( () => { window.dispatchEvent(new Event('resize')); }, 300 );
    setTimeout( () => clearInterval(fix), 1500);
  }