Diagnose Highcharts Error: Chart data could not be parsed

In this article, we'll determine what's causing the Chart data could not be parsed error on your Highcharts widgets.

There are three possible reasons why you may be receiving this error, either:

  • The chart type hasn't been declared.
  • The chart type isn't supported in Geckoboard.
  • There are errors in the chart's payload.

Investigating each of these sequentially should determine where the problem lies with your Highcharts widget.

Get help

If you're still unable to resolve the issue, please don't hesitate to reach out to us for help.

The chart type hasn't been declared

In Geckoboard, all Highcharts charts must be sent with the chart property:

{
chart: {
type: 'areaspline'
}
// ...
}

If the payload you're sending does not declare the chart type, you will receive an error while displaying the Highcharts.

The chart type isn't supported in Geckoboard

Geckoboard supports the following Highcharts chart types:

  • Line
  • Spline
  • Area
  • Areaspline
  • Column
  • Bar
  • Pie
  • Scatter

If you're using a chart type that isn't listed above and are experiencing an error, then this is likely the cause.

Get in touch

If you're using a unlisted Highcharts chart type, drop us a line to tell us which Highcharts chart type you would like to see supported and what types of data and metrics you would like to use it with.

There are errors in the chart's payload

If you've declared the chart type and it's a type that Geckoboard supports, then it's most likely that there are errors in the syntax/formatting of your chart's payload.

To find and remove any errors in your Highcharts chart payload, follow these steps

  1. You can use a tool like JSFiddle to find where there are errors in your chart's payload. Here's a JSFiddle set up to use Highcharts. Paste your Highcharts chart payload in place of the // comment in the JavaScript section of that JSFiddle and then click Run.
  2. If the chart doesn't render, it's likely improperly configured. Using a tool like JSLint can be helpful to find missing brackets or other errors. Further, using an interpreter like Node.js will most quickly spot anything malformed.
  3. If everything appears to be syntactically correct, then the next step would be to consult the Highcharts API to determine if any options or parameter names are defined incorrectly.
  4. Another method is to find one of Highchart's demo charts of the same type you would like to use, and compare it to the chart you have built. This will help you narrow down where the error is.
Was this article helpful?

Awesome! 👍  Thanks so much for your feedback!