Question

Using this example: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick-and-volume/

When you hover over points on the chart, you get a nice vertical line showing you which point you’re currently on. I want to modify the click event so that the vertical line stays when I hover away after a click. Changing the line color would be ideal on click, but not necessary.

If I click another point I’d want to remove any previous lines. Any ideas on how I could accomplish this?

Answer 1

You can do it in several ways

Highchart has a very cool renderer that allows you to add various graphics to the chart. One of the options is to add a path I will be illustrating the same here.

We shall reuse the path of the crosshair and add the same to the chart with some additional styles like color you mentioned. The path of the crosshair can be optained as this.tooltip.crosshairs[0].d this is in string form and can be easily converted to an array using the Array.split() function

click: function() {
    this.renderer.path(this.tooltip.crosshairs[0].d.split(" ")).attr({
        'stroke-width': 2,
         stroke: 'red'
  }).add();
}

This will accomplish adding the line. You can store the returned object into a global variable and then when you are about to add another such line, you can destroy the existing one by calling Element.destroy()

 var line;
 ...
 chart:{
    events: {
        click: function() {

            if (line) {
                line.destroy();
            }
            line = this.renderer.path(this.tooltip.crosshairs[0].d.split(" ")).attr({
                'stroke-width': 2,
                stroke: 'red'
            }).add();

        }
    }
...

Persist tooltip / crosshair on click @ jsFiddle

Assuming you don’t have much meta data to be shown along with the line, this is the easiest (or the coolest 🙂 ) approach. You can also attach meta data if you want to using the renderer’s text object etc.

An alternate way could be adding vertical plotLines to the xAxis

UPDATE

Refer my other solution to this question, that would work with zoom,scroll,etc