Plot Area being displayed weird after changing date range

[laxytt]

I've encountered an issue with my plot area. When I'm changing date range on the graph (more back to the past) the plot area is acting weird as on the screen:

I've set graph to display, default date range:
https://ibb.co/7SM2G8n

Changed date range 3M back
https://ibb.co/Rcx67vJ

and as you can see the red plot area seems to be broken.
When I console log the data behind it, it seems to be fine

What's interesting when I would set the graph to display with 3M interval at first it would display properly

That's how my plot area looks like:

Code: Select all

const plotArea = useMemo(() => {
    return [
      ...plotAreaData.map((data) => ({
        type: 'area',
        marker: {
          enabled: false,
        },
        data: showPlotArea
          ? [
              { x: data.start, y: data.goal },
              { x: data.end, y: data.goal },
              { x: data.end, y: minY },
              { x: data.start, y: minY },
            ]
          : [],
        color: 'red',
        showInLegend: false,
        enableMouseTracking: false,
      })),
    ] as SeriesOptionsType[];
  }, [plotAreaData, minY, showPlotArea]);

[laxytt]

http://jsfiddle.net/qouyerkp/38/ Here is link to JSFIddle when you play with the zoom in the buttom you can finde the goal area, which is displaying weridly

[hubert.k]

Hello laxytt!
We appreciate you reaching out to us with your inquiry.

You can see that you have an error 15 in the console, which means:

Highcharts expects data to be sorted
This happens when creating a line series or a stock chart where the data is not sorted in ascending X order.

For performance reasons, Highcharts does not sort the data, instead it requires that the implementer pre-sorts the data.

If you correct points in area series, the problem is gone. Please, check the demo here: http://jsfiddle.net/BlackLabel/bdfp68cj/

Let me know if you have any further questions.
Kind regards!