Display Vertical Line On Intersection Point

I'm trying to represent a Pareto chart with Highcharts, as you can see here. The horizontal line shows the 80% value, but now I wanted to display a vertical line where that horizon

Solution 1:

I have find it for 80:20 calculation.

First I have find the first value in series from Spline data which greater than or equal to 80.

i.e. >= 80

Suppose it is DataX Then find out the that index in array plus one for DataX.

i.e. DataX location is DataIndex = index+1

(as array start from 0th calculation need plus one)

formula is DataX : DataIndex :: 80: ?

let the question mark is xIndexOf80

then xIndexOf80 = (DataIndex *80)/(DataX ).

xIndexOf80 isnothing but position of80on X axis.

which gives you exact marks on X-Axis

function findInetrSectionPoint(arrSplineData) {

    var intLen = arrSplineData.length;

    for (var index = 0; index < intLen; index++) {

      if (arrSplineData[index] >= 80) {

        interSectPoint = ((index + 1) * 80) / arrSplineData[index] - 1;
        break;
      }

    }

    return interSectPoint;
  }

Here is the Plunker

Solution 2:

You can calculate position of 80% point and then use http://api.highcharts.com/highstock#Renderer rect. Apart from that you can also check this option http://api.highcharts.com/highstock#Axis.addPlotLine() / http://api.highcharts.com/highstock#yAxis.plotLines