CODEWITHSUNDEEP
javascriptjqueryhighcharts
Miles Yucht
Miles Yucht

Reputation: 564

Strange tooltip behavior with long series in highcharts

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!

Upvotes: 0

Views: 958

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

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, e.g. 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
        }
    },

Upvotes: 2

Related Questions