Legend and Axis titles not showing in Highcharts Graph

Question

I have a Highcharts Graph that is displaying three different energy costs. I can't seem to get my legend to show nor can I get the axis titles to show.

The Legend should have the titles on; Gas, Electric, Oil and they should also be on the axis too.

The link to the JSFiddle is:

http://jsfiddle.net/petenaylor/HHEfW/3/

(function ($) { // encapsulate jQuery
    $(function () {
        var seriesOptions = [],
            yAxisOptions = [],
            seriesCounter = 0,
            names = ['Electric', 'Oil', 'Gas'],
            colors = Highcharts.getOptions().colors;

        $.each(names, function (i, name) {
            $(function () {
                $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
                    // Create the chart
                    window.chart = new Highcharts.StockChart({
                        chart: {
                            renderTo: 'container',
                            zoomType: 'x'
                        },
                        legend: {
                            layout: 'vertical',
                            align: 'right',
                            verticalAlign: 'top',
                            x: 10,
                            y: 100,
                            borderWidth: 0
                        },
                        rangeSelector: {
                            selected: 12
                        },
                        title: {
                            text: 'Energy Prices'
                        },
                        yAxis:[{opposite:false},{opposite:true},{opposite:true,offset:50}],
                        series: [
                            {
                                name: 'Electric',
                                yAxis:0,
                                data: [
                                    [1072915200000, 5.73],
                                    [1073001600000, 5.81],
                                    [1073088000000, 5.23],
                                    [1073174400000, 5.32]
                                ],
                                tooltip: {
                                    valueDecimals: 2
                                }
                            }, {
                                name: 'Oil',
                                yAxis:1,
                                data: [
                                    [1072915200000, 29.73],
                                    [1073001600000, 29.73],
                                    [1073088000000, 29.73],
                                    [1073174400000, 29.73]
                                ],
                                tooltip: {
                                    valueDecimals: 2
                                }
                            }, {
                                name: 'Gas',
                                yAxis:2,
                                data: [
                                    [1072915200000, 0.823],
                                    [1073001600000, 0.82],
                                    [1073088000000, 0.82],
                                    [1073174400000, 0.82]
                                ],
                                tooltip: {
                                    valueDecimals: 2
                                }
                            }
                        ]
                    });
                });
            });
        });

        // create the chart when all data is loaded
        function createChart() {
            chart = new Highcharts.StockChart({
                chart: {
                    renderTo: 'container'
                },
                rangeSelector: {
                    selected: 4
                },
                yAxis: [{ // Primary yAxis
                    labels: {
                        formatter: function () {
                            return (this.value > 0 ? '+' : '') + this.value + '%';
                        },
                        style: {
                            color: '#89A54E'
                        }
                    },
                    title: {
                        text: 'Electric',
                        style: {
                            color: '#89A54E'
                        }
                    },
                    opposite: true
                }, { // Secondary yAxis
                    gridLineWidth: 0,
                    title: {
                        text: 'Oil',
                        style: {
                            color: '#4572A7'
                        }
                    },
                    labels: {
                        formatter: function () {
                            return this.value;
                        },
                        style: {
                            color: '#4572A7'
                        }
                    }

                }, { // Tertiary yAxis
                    gridLineWidth: 0,
                    title: {
                        text: 'Gas',
                        style: {
                            color: '#AA4643'
                        }
                    },
                    labels: {
                        formatter: function () {
                            return this.value;
                        },
                        style: {
                            color: '#AA4643'
                        }
                    },
                    opposite: true
                }],
                plotOptions: {
                    series: {
                        compare: 'percent'
                    }
                },
                tooltip: {
                    pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
                    valueDecimals: 2
                },
                series: seriesOptions
            });
        }
    });
})(jQuery);

Can anyone help me show the legend and axis titles?

The legend also needs to be click-able so that each line disappears and reappears when clicked.

Many thanks for your help

Pete

Answer 1

For legend you should add enabled parameter with true value. http://jsfiddle.net/HHEfW/5/

legend: {
    enabled: true
}

yAxis titles don't work, because are not defined, so you should add title parameter with text value. http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/title-text/