Mark a point and draw plot lines in Multi Series Highchart

Question

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.

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.

you can use https://api.highcharts.com/highcharts/xAxis.plotLines — Patata, Feb 13 '18 at 10:02
Already tried using it. But I didn't get the customized plot line. See the updated question. — monica, Feb 13 '18 at 10:04
you can use https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path . useful link https://www.highcharts.com/demo/renderer — Patata, Feb 13 '18 at 11:15
I don't quite understand how this custom line should exactly look like. Can you provide an image of that? What do you mean by "highest points"? How many of them and which point(s) they should be connected to? — Kamil Kulig, Feb 14 '18 at 10:09
@KamilKulig I have updated the image. It would be clear to you now. — monica, Feb 21 '18 at 06:42

score 1 · Accepted Answer · answered Feb 14 '18 at 09:29

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

Mark a point and draw plot lines in Multi Series Highchart

1 Answers1