Highstock + angular material + flex-layout problems

Question

I am trying to use Highcharts (Highstock) in larger Angular project using Angular Material UI components and flex-layout. I prepared a little demo where are 3 expansion panels (mat-expansion-panel). First two contains only empty divs and the third one contains a Highstock chart with some data. I am using official highcharts-angular wrapper (2.7.0) and Highcharts (8.1.2).

1.) There is some strange behavior after expanding panels. How to reproduce: 1. Expand third panel with the chart. Try to zoom in ( "highcharts-selection-marker" is created as expected); 2.) Expand first or second panel, scroll down to the graph if needed and try to zoom in - "highcharts-selection-marker" is created shifted or not at all. 3.) If you move mouse pointer off the chart and then back over chart - everything is "fixed" and zooming works as expected... The same shifting of zoom selection marker can be seen if you resize the browser window so that buttons in mat-action-row are wrapped in two lines instead of just one. And again if you move mouse over graph, then off the graph and then back over graph - all looks OK.

2.) When I use highchart's "View in full screen" module - zoom in is not working (same problem as above). And after exiting the full screen, chart is out of bounds of the container (it looks like the height stays the same as was in the full screen mode).

Tested on Firefox and Chrome. BTW. chart in firefox feels little bit slower (painting/updating the selection marker rectangle while zooming).

I need to know if this is some problem on my part (CSS, flex, Material settings) or if there is some crucial problem with highcharts and flex-layout or Angular Material and it is not recommended to use them together.

Here is the demo: https://stackblitz.com/edit/angular-ivy-mpzekw

Thanks for any help.

Mateusz Kornecki Mateusz Kornecki · Accepted Answer · 2020-07-29T07:03:35

It looks like a regression bug (it was working correctly in the < 7.2.0v.) that has been already reported and fixed (the fix was merged to the master, but it is not released yet): https://github.com/highcharts/highcharts/issues/12868.

Workaround copied from the issue thread:

Manually clear chart.pointer.chartPosition when mouse enters container:

https://jsfiddle.net/BlackLabel/176294kx/

      chart: {
        renderTo: 'test' + i,
        zoomType: 'x',
        events: {
          load: function() {
            const chart = this;
            Highcharts.addEvent(
              chart.container,
              'mouseenter',
              function() {
                chart.pointer.chartPosition = null;
              }
            );
          }
        }
      },

Highstock + angular material + flex-layout problems

1 Answers