Highstocks / Highcharts API : how to add spline/line to already rendered chart?

Question

I am able to add/update the bottom range selector series, with http://api.highcharts.com/highcharts#Chart.addSeries but haven't been able to figure out a way to add a line to the top candlestick graph as seen in the example here:

• http://www.highcharts.com/stock/demo/candlestick-and-volume

I would like to be able to do something like:

http://www.highcharts.com/demo/combo

But only after it is rendered, this updates the bottom rangeselector series, and does not render on top of the candlestick series, any suggestions?

var $chart = $("div#container-area").highcharts()
var translated = $chart.series[0].yData.map(function(c,i,a){
    return c[3]*.8
})
var sma_line = {
    type: 'spline',
    name: 'sma',
    data: translated,
    marker: {
        lineWidth: 2,
    },
    dataGrouping: {
        units: groupingUnits
    },
    seriesStacking: 'normal'
}
$chart.addSeries(sma_line, true)

Related:

• Highcharts add series dynamically
• highcharts Adding New Series Not Working
• trouble with highchart and .clone()
• drawing custom lines on highchart graph

Answer 1

Problem is with missing information about x-values. In your chart click "All" and probably you will see first point on the chart with data for 1970 year. So simply attach such info for your data:

        var $chart = $("#container").highcharts(),
            xData = $chart.series[0].xData, //get main data
            translated = $chart.series[0].yData.slice().map(function (c, i, a) {
                return [xData[i], c[3] * .8]; // return array for [x, y] pair
            });

And demo: http://jsfiddle.net/oun65uq3/