Highstock tooltip Formatter not able to display extra data

Question

We started to develop in HighCharts but realised we needed to move to HighStock for the Zoom/slider functionality.

We had a graph working perfectly with the tooltip to display exactly the data we required as shown below from Highcharts.

To achieve this within in HighStock we just had the following code to format the ToolTip.

tooltip: {
    headerFormat: "",
    useHTML: true,
    formatter: function () {
        return '<span style="font-size: 10px">' + Highcharts.dateFormat('%I:%M:%S %P - %a, %e %b, %y', new Date(this.x)) + '</span><br/><span style="color:' + this.color + '">\u25CF</span> <b>' + this.point.name + '</b><br/>';
    }
},

We have attempted on the switch to HighStock to implement the same formatting, but all we receive through to the tooltip where it say's 'REASON_TIMED' is undefined as below.

our data object myData is created as follows :-

myData .push([Date.parse(obj.FixTimeLocal), obj.State, obj.Flags]);

This object worked correctly with the Fixtime being the X, state being the y and flags being a text description which would be populated in the ToolTip. We used keys to name the data x,y,name so we could access this.point.name. to add extra text to tooltip. Where are we going wrong ? we have tried for a couple of days now and can not get the data through.

Highcharts.stockChart('container', {
    //new chart style
    rangeSelector: {
       selected: 1
    },

    title: {
        text: 'Test Graph'
    },

    xAxis: {
        type: 'datetime'
    },

    yAxis: {
        categories: ['Unknown', 'State 1', 'Disarmed', 'Armed', 'Service Timed', 'Unauthorised', 'Alert', 'Watch', 'Alarm'],
        title: {
            useHTML: true,
            text: 'Alert Type'
        }
    },

    tooltip: {
        headerFormat: "",
        useHTML: true,
        formatter: function () {
            var s = '<span style="font-size: 10px">' + Highcharts.dateFormat('%I:%M:%S %P - %a, %e %b, %y', new Date(this.x)) + '</span>';

            $.each(this.points, function () {
                s += '<br/><span style="color:' + this.color + '">\u25CF</span><b>' + this.point.name + '</b><br/>'; // Code falls over here this.point.name is not recognised.
            });

            return s;
        }
    },

    series: [{
        type: 'areaspline',
        keys: ['x', 'y', 'name'],
        data: myData,
        marker: {
            enabled: true,
            radius: 1.5
        },
        threshold: null,

        fillColor: {
            linearGradient: {
                x1: 0,
                y1: 0,
                x2: 0,
                y2: 1
            },
            stops: [
                [0, Highcharts.Color(Highcharts.getOptions().colors[3]).setOpacity(0.5).get('rgba')],
                [1, Highcharts.Color(Highcharts.getOptions().colors[3]).setOpacity(0).get('rgba')]
            ]
        },

color: Highcharts.getOptions().colors[3],
lineWidth: 0.5,
threshold: null,
    }]
});

Answer 1

You can do this

see your html would be

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>

And code might like this

Highcharts.chart('container', {
        rangeSelector: {
       selected: 1
    },

    title: {
        text: 'Test Graph'
    },

        // Its your X data
    xAxis: {
        categories: ['2017/05/01', '2017/05/02', '2017/05/03', '2017/05/04', '2017/05/05', '2017/05/06','2017/05/07', '2017/05/08', '2017/05/09', '2017/05/10']
    },

    yAxis: {
        //categories: ['Unknown', 'State 1', 'Disarmed', 'Armed', 'Service Timed', 'Unauthorised', 'Alert', 'Watch', 'Alarm'],
        title: {
            useHTML: true,
            text: 'Alert Type'
        }
    },

tooltip: {
        headerFormat: "",
        useHTML: true,
        formatter: function () {
            var s = '<span style="font-size: 10px; width:100%;">' + Highcharts.dateFormat('%I:%M:%S %P - %a, %e %b, %y', new Date(this.x)) + '</span>';

            $.each(this.points, function () {
                s += '<br/><span style="color:' + this.color + '">\u25CF</span><b>' + this.point.name + '</b><br/>'; // Code falls over here this.point.name is not recognised.
            });

            return s;
        },
    },



series: [{
                type: 'areaspline',
        // its your yAxis category
        name: "Unknown",
        // Its your Y Data
        data: [5,10,56,22,54,35,32,26,36],
    },{
                type: 'areaspline',
        name: "State 1",
        // Its your Y Data value
        data: [10,30,59,22,24,55,52,66,46],
    }]

});

Here is live : https://jsfiddle.net/jalayoza/eaue85rb/6/

Hope this help

Answer 2

Thanks to – Grzegorz Blachliński for identifying the issue.

Within my series I had to set the following. Which is now working with my data and I can target the point.name to get it to display in the Tooltip.

 dataGrouping: {
                enabled: false
            },