Question

I have a HighStock chart that is pulling in some OHLC data and creating a chart with 3 series – 1 candlestick, 1 volume, and 1 set of flags. This all works fine.

I want to add some custom trend lines to the chart. I will determine the points and do the paths based on custom logic.

The problem is that when I use the Renderer from the Chart to draw my path, the path is not connected to the underlying chart. As the chart date range is modified and/or new points are added to the primary series, the placement and size of my custom path remains unchanged. It is constant.

I need the location/endpoints of the custom path to be tied to the datapoints of the chart, not the coordinates of the svg drawing. Is there a way to accomplish this?

Here is the portion of the code that is adding a simple path from pointa to pointb. The path renders as expected but is then static:

    buildPath: function(pointa, pointb){
        this.myChart.renderer.path(this.buildPathArray(pointa,pointb))
            .attr({
                'stroke-width': 2,
                stroke: 'red'
            }).add();
    },
    buildPathArray: function(pointa, pointb){
        var pathArray = [];
        pathArray.push('M');
        pathArray.push(pointa.plotX);
        pathArray.push(pointa.plotClose);
        pathArray.push('L');
        pathArray.push(pointb.plotX);
        pathArray.push(pointb.plotClose);
        pathArray.push('Z');
        return pathArray;
    }

Per request, I created a JS Fiddle that demonstrates the general issue.

Any help is much appreciated.

Answer 1

SOLVED

This doesn’t seem to come for free with Highcharts. Or if it does I did not find out the technique.

I had to use both the load and redraw events of the chart object contained in my StockChart.

On load, I draw the initial paths, aligned with the Point objects involved in my trending lines. As I build these path objects (SVGElement objects containing the genuine SVG path elements) I keep track of them in an array.

On redraw, I have to both destroy the old trend lines and create new ones. So I loop over my array of old elements and remove each from their own parentNode. Then I draw a fresh version of my trend lines based on the newly plotted location of each of my relevant Point objects.

The end result is that on each redraw event, the lines appear to move with the chart, when they’re really being destroyed and recreated.