How can I show profit and loss indication lines using the highchart in angular?

Hello guys I want to create a chart in angular using the highchart, which indicates the upgrade and downgrade flow for profit and loss. Does anyone have Idea, how can I achieve this situation?

Here is the stackblitz example that I have created. Stackblitz

Chart image that I want to create

This feature is not available in Highcharts by default, and its implementation can be quite laborious. However, I have created a proof of concept that you can base on. The main concept involves utilizing the mouseOver event on the main series and manipulating the color using certain side settings. For the second series, I used fake data as an example.

   series: [{
     type: 'areaspline',
     data: data,
     tooltip: {
       valueDecimals: 4,
     },
  
     fillColor: {
       linearGradient: {
         x1: 0,
         x2: 0.5,
         y1: 0,
         y2: 0.9
       },
       stops: [
         [0, 'rgba(232, 54, 54, 0.24)'],
         [
           1,
           Highcharts.color('#FF0000').setOpacity(0.0).get('rgba'),
         ],
       ],
     },
   }, {
     type: 'areaspline',
     enableMouseTracking: false,
     states: {
       inactive: {
         enabled: false
       }
     },
     data: profi,
     color: 'transparent',
     fillColor: 'transparent'
   }],

plotOptions:{
  zoneAxis: 'x',
  series: {
       point: {
         events: {
           mouseOver() {
             let hoveredPoint = this,
               series1 = hoveredPoint.series,
               series2 = hoveredPoint.series.chart.series[1],
               hoveredIndex = hoveredPoint.index,
               chart = this.series.chart,
               series1leftZone = {
                 value: hoveredPoint.x,
                 fillColor: {
                   linearGradient: {
                     x1: 0,
                     x2: 0.5,
                     y1: 0,
                     y2: 0.9,
                   },
                   stops: [
                     [0, 'rgba(232, 54, 54, 0.44)'],
                     [1, Highcharts.color('#FF0000').setOpacity(0.0).get('rgba')],
                   ],
                 },
               },
               series1rightZone = {
                 color: 'transparent',
                 fillColor: 'transparent',
               };

             series1.update({
                 zones: [series1leftZone, series1rightZone],
               },
               false
             );

             let series2leftZone = {
                 color: 'transparent',
                 fillColor: 'transparent',
               },

               series2rightZone = {
                 value: series2.data[hoveredIndex].x,
                 color: 'greeen',
                 fillColor: {
                   linearGradient: {
                     x1: 0,
                     x2: 0.5,
                     y1: 0,
                     y2: 0.9,
                   },
                   stops: [
                     [0, 'rgba(54, 255, 54, 0.44)'],
                     [1, Highcharts.color('#00FF00').setOpacity(0.0).get('rgba')],
                   ],
                 },
               };

             series2.update({
                 zones: [series2leftZone, series2rightZone],
               },
               false
             );

             chart.redraw();
           }
         }
       },
       ...
     }
   }
}

Demo: https://jsfiddle.net/BlackLabel/kLcut3gr/

API Reference: https://api.highcharts.com/highcharts/series.areaspline.events.mouseOver