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

Question

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

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. — Community, Aug 04 '23 at 11:31
How should the functionality work? Should it continuously display the risk and profit from the right side of the crosshair while it is being moved, or would you prefer it to appear only when clicking on the crosshair? Please provide additional details to clarify your requirements. — magdalena, Aug 04 '23 at 15:38
@magdalena It should continuously display the risk and profit from the right side of the crosshair while it is being moved. — sugnay patel, Aug 05 '23 at 16:31

score 0 · Accepted Answer · answered Aug 07 '23 at 13:59

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

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

1 Answers1