在highcharts中使用长系列的奇怪工具提示行为

Question

I'm using Highcharts for a project in which I have to display two series with about a thousand points each. The x-axis represents a date, and the y-axis a quantity. In addition, each point has an associated list of namesMy data is day-by-day without gaps, with a structure such as

var mydata = [ ...
               {x: theDate, y: theValue, names: theNames},
               ... ]

where theNames is an array of strings. I can access these in the tooltip formatter through this.points.point.names , given that the range displayed on the chart is small enough . If I change the x-axes so that the start date and end date are more than roughly a year apart, then the tooltip is not rendered at all.

One of the possible avenues that I have tried but failed with so far is setting the turboThreshold limit to the length of the longest series plus 1. Setting this lets me at least display a graph when mydata.length > 1000 (the default value). However, this only displays the tooltip if the x-axis range is less than 261. Otherwise, the tooltip disappears entirely, as does the point.data object where I'm getting the name from.

I'm also not great at JavaScript, but I was wondering if there were a way to separate the names of the points from the array containing them (in my examples, myData1 and myData2 ) and somehow access those names from the tooltip function without going through the current point.

Here is the link to the jsFiddle demonstrating this issue.

All help is appreciated!

Answer 1

The problem is in dataGrouping, when disabled works fine: http://jsfiddle.net/34tfg/1/

DataGrouping is method in Highcharts to approximate points and display them when width of the chart is not enough, eg how to display 10 000points in a chart of width 1 000px -> 10 points in a one pixel..? And when dataGrouping is used, new points are created, so all your custom options like 'names' etc. are lost (at least not accessible).

Code:

    plotOptions: {
        line: {
            dataGrouping: {
                enabled: false
            },
            turboThreshold: 10000
        }
    },