Tooltipにいろいろ要素を追加する方法。

JSON配列を用意しておいてindexOfでサーチをかけて、その要素をformatterで表示する。

<html>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://rawgithub.com/laff/technical-indicators/master/technical-indicators.src.js"></script>
<script>
    var chart;
    var options;
    var data_xy = [[1464678060000.0, 1], [1464678720000.0, 2], [1464679380000.0, 3], [1464688020000.0, 5], [1464689280000.0, 1]];
    var data_x = [1464678060000.0, 1464678720000.0, 1464679380000.0, 1464688020000.0, 1464689280000.0];
    var data_5 = [Taro, Jiro, Sabro, Shiro, Goro];

    $(function(){

        options = {
            chart: { renderTo: "container", type: line, zoomType: xy },
            title: { text: "5 shining stars" },
            xAxis: { type: datetime },
            tooltip: {
                formatter: function(){
                    var index = data_x.indexOf(this.x);
                    var guy = data_5[index];
                    var s = <b>x = + this.x + </b><br>;
                    s += <b>date(x) =  + Highcharts.dateFormat(%e - %b - %Y, this.x) + </b><br>;
                    s += <b>y =  + this.y + </b><br>;
                    s += <b>index =  + index + </b><br>;
                    s += <b>guy = + guy + </b><br>;
                    return s;
                }
            },
            rangeSelector: { selected: 1 },
            legend: { enabled: true, layout: vertical, align: right, verticalAlign: middle, borderWidth: 0 },
            plotOptions: { series: { marker: { enabled: false } } },
            series: [{ name: "Hages", data: data_xy, marker: { enabled: true, radius: 2 } }]
        };

        var chart = new Highcharts.StockChart(options);

    });
</script>
<body>
    <div id="container" style="width:1000px; height:500px;"></div>
</body>
</html>

時間datetimeのフォーマットの仕方。

stackoverflow.com