Search code examples
angularhighchartsangular2-highcharts

Mark a point and draw plot lines in Multi Series Highchart


I am using highcharts. I want to make a chart like in the image below. Need to mark a point where a line drawn from series 1 highest points connect to the series 2(shown in the image below).

Couldn't find any useful resource. Any leads would be appreciated. Thanks in advance.enter image description here

Was able to achieve this, but not exactly what I want. You can use the code snippet below:

(Fiddle link)

Highcharts.chart('container', {
    xAxis: {
        plotLines: [{
            color: 'red',
            width: 2,
            value: Date.UTC(2010, 0, 4)
        }],
        tickInterval: 24 * 3600 * 1000, // one day
        type: 'datetime'
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4],
        pointStart: Date.UTC(2010, 0, 1),
        pointInterval: 24 * 3600 * 1000
    }, {
        data: [39.9, 91.5, 196.4, 159.2, 164.0, 180.0, 188.6, 187.5, 246.4],
        pointStart: Date.UTC(2010, 0, 1),
        pointInterval: 24 * 3600 * 1000
    }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

EDIT: I am able to achieve it to some level as answered by Gaurav. Check here.


Solution

  • As mentioned in the comments you can use the Highcharts SVGRenderer class to draw out a line. You can use something like a load event of Highcharts within which you can make use of the SVGRenderer to create a path line.

    chart: {
         events: {
            load: function () {
                    console.log(this.chart); // This will get tou the chart reference where in you can find the coordinates of the point from where you want to draw the line
    var x1 = this.series[0].data[this.series[0].data.length - 1].plotX + this.plotLeft;
    var y1 = this.series[0].data[this.series[0].data.length - 1].plotY + this.plotTop;
                var label = this.renderer.path(['M', x1,y1,'L', 550, y1])//M 75 223.5 L 593 223.5
            .attr({
                    'stroke-dasharray': '2,2',
                'stroke-width': 2,
                stroke: 'red'
            })
            .add();
            var label = this.renderer.path(['M', 550, this.plotTop + this.plotHeight,'L', 550, y1])//M 75 223.5 L 593 223.5
            .attr({
                    'stroke-dasharray': '2,2',
                'stroke-width': 2,
                stroke: 'red'
            })
            .add();
    
    
            }
        }
    }
    

    The x-coordinate 550, I selected randomly, but if you know the x-point then it is the way you do it. Here is the new fiddle link . Hope it helps