Highcharts jQuery rendering problem - all browsers

javascript jquery highcharts
Matt picture Matt · Aug 3, 2011 · Viewed 23.5k times · Source

I have a strange problem whilst trying to build a stacked column chart using Highcharts

When the chart renders, the columns don't display, until, you resize the browser in anyway, causing the chart to redraw. (I think)! The rest of the chart displays (axis, titles, etc) but not the columns themselves.

I get the same behaviour in IE, Firefox and chrome.

I have put my code on jsfiddle - http://jsfiddle.net/gd7bB/173/ Load it up and you should see no data, resize the browser window and "tada", the data appears (rather the columns appear)!

Any help on this one would be massively appreciated.

Answer

Glycerine picture Glycerine · Jan 30, 2012

I had exactly the same problem - Highcharts JS v2.1.5 (2011-06-22) does not work with jQuery 1.7.1

After changing to jQuery 1.6.1 (The last stable release I used) it worked. Someone should check other versions of jQuery.

Related questions

How can i get access to a Highcharts chart through a DOM-Container

When i render a highcharts-chart to a div container, how can i get access to the chart object through the div-Container? i dont want to make the chart variable global. var chart = new Highcharts.Chart({ chart: { renderTo: "testDivId", ... I want …

Read More
Set Additional Data to highcharts series

is there any way to pass some additional data to the series object that will use to show in the chart 'tooltip'? for example tooltip: { formatter: function() { return '<b>'+ this.series.name +'</b>&…

Read More
how to hide highchart x - axis data values

I am drawing a bar chart using highchart.js I do not want to show the x - axis data values. Can any one tell me which option does it? full config: var chart = new Highcharts.Chart({ chart: { renderTo: container, …

Read More