Highcharts: passing additional information to a tooltip

1
votes

I have an array of data points that I am passing to a Highcharts chart that looks like

mydata = [{
    x: 1,
    y: 3,
    nameList: ["name1", "name2"]
}, {
    x: 2,
    y: 4,
    nameList: ["name3", "name4"]
}]

I build the chart like this:

$("#chart").highcharts("StockChart", {
    series: [{
        data: mydata
    }, {
        data: yourdata
    }]
});

Now, I would like to be able to access the nameList array from the shared tooltip, which I'm trying to do as follows:

tooltip: {
    formatter: function() {
        var s = "";
        $.each(this.points, function(i, point) {
            s += point.point.nameList;
        });
        return s;
    },
    shared: true
}

but when examining the point objects in Firebug using console.log(point), I can't seem to find the nameList entry anywhere in them. How could I access this auxiliary information in a shared series tooltip? All help is appreciated.

2
javascriptjqueryhighcharts
Can you show us more from your code? Like how you examine it? I have a suspicion but Im not sure. – Entity Black
Live example works fine: jsfiddle.net/Yrygy/38 – Paweł Fus
Hmm, so after some additional testing, it seems like the issue is in the length of the array that I'm dealing with. I saw the turboThreshold option, but changing that doesn't seem to help. I'll keep you guys posted. Thanks for your quick responses, and sorry for getting back so late. Edit: The arrays I'm working with are of lengths between 500 and 3000. – Miles Yucht
Possible duplicate of Set Additional Data to highcharts series – Ravi Shekhar

2 Answers

2
votes

Eureka!

By default, Highcharts will accept several different types of input for the data of a series, including

  1. An array of numerical values. In this case, the numberical values will be interpreted and y values, and x values will be automatically calculated, either starting at 0 and incrementing by 1, or from pointStart and pointInterval given in the plotOptions.
  2. An array of arrays with two values. In this case, the first value is the x value and the second is the y value. If the first value is a string, it is applied as the name of the point, and the x value is incremented following the above rules.
  3. An array of objects with named values. In this case the objects are point configuration objects as seen below.

However, the treatment of type 3 is different from types 1 and 2: if the array is greater than the turboThreshold setting, then arrays of type 3 won't be rendered. Hence, to fix my problem, I just needed to raise the turboThreshold setting like so:

...
plotOptions: {
    line: {
        turboThreshold: longestArray.length + 1
    }
},
...

and the chart renders the longestArray data properly. Hurray! The only drawback is that there is a considerable time spent rendering the data for much longer arrays due to "expensive data checking and indexing in long series." If any of you know how I might be able to bypass this checking or otherwise be able to speed up the processing of this data, I'd be extremely thankful if you'd let me know how.

1
votes

I can see it here:

tooltip: {
    formatter: function() {
        var s = "";
        console.log(this.points[0].point.nameList); // ["name1", "name2"] 
        $.each(this.points, function(i, point) {
            s += point.point.nameList;
        });
        return s;
    },
    shared: true
}