Is Highcharts experiencing issues when there are over 999 items in the series data?

Question

Is Highcharts experiencing issues when there are over 999 items in the series data?

Check out my demonstration on JSFiddle. I incorporated some of the techniques mentioned in Nick's response to this particular question.

However, when applying these methods to my own data model, nothing seemed to be happening. After a thorough debug session, I discovered that the following code snippet was causing the issue:

var maxItems = 1000;
var chartData = new Array(maxItems);
for (var i = 0; i <= maxItems; i++) {
    chartData[i] = { y: 3, x: 1380385867013, myData:'hello' };
}

Surprisingly, Highcharts failed to display anything with this setup. Strangely enough, reducing the value of maxItems to 999 resolved the problem.

An alternative approach:

chartData[i] = [ 1380385867013, 3 ];

This configuration allowed me to add as many items as needed, but I require the "myData" option for tooltip functionality. What steps should I take next?

javascript highcharts

Answer 1

Answer №1

Upon running the jsfiddle example and checking the console log, the following is displayed:

Highcharts error #12: www.highcharts.com/errors/12

The content from the provided link is detailed as follows:

Highcharts Error #12

Highcharts expects point configuration to be numbers or arrays in turbo mode

If the series.data option includes object configurations and the number of points exceeds the turboThreshold, this error will occur. To resolve it, either adjust the turboThreshold value or update your point configurations to numbers or arrays. Refer to turboThreshold for more information.

Review Highcharts documentation on turboThreshold:

turboThreshold: Number

In cases where a data array within a series surpasses this threshold, only one dimensional arrays of numbers, or two dimensional arrays with x and y values are permitted. Additionally, only the first point is validated, assuming the rest maintain the same format. This optimization avoids costly data checks and indexing in lengthy series. Setting it to 0 disables this feature, defaulting to 1000.

Hence, users Mark and strikers were correct.

Answer 2

Upon running the jsfiddle example and checking the console log, the following is displayed:

Highcharts error #12: www.highcharts.com/errors/12

The content from the provided link is detailed as follows:

Highcharts Error #12

Highcharts expects point configuration to be numbers or arrays in turbo mode

If the series.data option includes object configurations and the number of points exceeds the turboThreshold, this error will occur. To resolve it, either adjust the turboThreshold value or update your point configurations to numbers or arrays. Refer to turboThreshold for more information.

Review Highcharts documentation on turboThreshold:

turboThreshold: Number

In cases where a data array within a series surpasses this threshold, only one dimensional arrays of numbers, or two dimensional arrays with x and y values are permitted. Additionally, only the first point is validated, assuming the rest maintain the same format. This optimization avoids costly data checks and indexing in lengthy series. Setting it to 0 disables this feature, defaulting to 1000.

Hence, users Mark and strikers were correct.

Answer 3

Answer №2

To adjust the turboThreshold to 0 in the plotOptions under the series option, simply follow this setup:

plotOptions: {
    series: {
        turboThreshold: 0
    }
}

Answer 4

To adjust the turboThreshold to 0 in the plotOptions under the series option, simply follow this setup:

plotOptions: {
    series: {
        turboThreshold: 0
    }
}

Is Highcharts experiencing issues when there are over 999 items in the series data?

Answer №1

Answer №2

Similar questions

Automated error checking using Javascript, HTML, and PHP

Expand and collapse dynamically while scrolling

Interested in leveraging string functions on the information retrieved from the API?

Transcluding an element into an ng-repeat template in AngularJS: How can it be done?

Effective Ways to Redirect During or After Executing the onClick Function of Button

Can a web application access USB devices across different browsers and operating systems?

What's the best way to showcase information from a document on the screen?

Implementing ordering and limiting of elements in NestJS TypeORM relations

What is the best way to invoke an API two times, passing different parameters each time, and then merge both responses into a single JSON object using a callback function?

Is there a way to retrieve the value of an element by clicking on its corresponding button using MUI framework?

Creating a repository of essential functions in AngularJSDiscover the steps to set up a

choose among various options in Javascript

Retrieve the screen dimensions, including the source code panel and debug panel, utilizing jQuery

Using the Trigger Method in a Vue JS Component with Sibling Components

Cordova plugin for Ionic has not been defined

Challenges with date formatting arise for Spanish speakers when the date returns as NaN or an Invalid

Leveraging the useEffect hook in conjunction with the "async" keyword

Having trouble loading an image from an external website onto the page

Transmit information from Ajax to CodeIgniter's controller

What is the best way to trigger the jQuery-File-Upload event within this function?