memory usage increases when recreating chart

[spencer19]

I'm seeing memory usage increasing when repeatedly recreate a chart after options changes. I'm seeing this with version 3.0.10 and 4.0.3.

My application updates a chart with options changes every 5 minutes. Over time browser memory usage increases until the browser crashes. It seems worse on Chrome, but it does happen on IE and Firefox too.

My code when recreating the chart is:

var chart = $chartDiv.highcharts();
chart.destroy();
$chartDiv.highcharts(options);

Is this the correct approach?

Thank you in advance for any help you can provide.

[seba]

I have passed this query to the secnd line of support. Someone will contact with you as soon as possible.

[torstein.honsi]

Are there specific options you are using that makes the chart leak?

I tried with a basic chart but it doesn't seem to leak any DOM nodes. Here's what I do:

1. Open http://jsfiddle.net/highcharts/wqdNa/ with Chrome.
2. Click the "Recreate" button to display a chart.
3. In the Developer Tools, take a Heap Snapshot.
4. Click Recreate again, once or more, to destroy and recreate.
5. Take a heap snapshot and compare it with the first one.
6. Sort by Delta. I see no elements added.

[hansend]

We are using HighCharts in a Dashboard format where there could be up to 50 charts on the page, each with a few hundred points that get updated every 5 minutes. In our scenario, it takes a few hours for memory to run out (happens in all browser types, just faster with Chrome).

To accelerate the test in your demo, if you put the destroy/create logic in a loop (e.g., 1000) and press the Recreate button many times, you will see the Chrome memory continue up until it runs out.

[spencer19]

Here is a link to my public fiddle that boils down the problem and easily reproduces the memory increasing problem

http://jsfiddle.net/Spencer19/PL37p/

This is setup to create 10 Highcharts based on the same static data. If you select the Start Timer button, it will recreate the charts every 10 seconds. You can easily change the two JavaScript variables to change the number of charts and the timer interval. The Recreate button is useful if you don’t want to use the timer and want to control when the charts are recreated.

[spencer19]

We have continued to investigate this issue and found that the memory increasing problem can be resolved by using jQuery version 1.11.1 instead of 2.1.1.

You can see the memory usage differences by using the jsfiddle I provided in my previous post by changing the jQuery version.
http://jsfiddle.net/Spencer19/PL37p/

We would like to use jQuery 2.x in our web app, so please let us know if there is a solution.

[torstein.honsi]

I have now spend hours exploring this, but haven't found a fix yet (though I have a workaround).

The problem seems to lie with the new Data object in jQuery 2.x, and it's cache property. When running 2.x, a lot of arrays are leaked that can be traced back to the Data object (as seen in Comparison in the Heap Profiler). I haven't been able to debug further than this.

The workaround is to use the Highcharts Standalone Framework instead. It can be used in parallel with jQuery 2.x: http://jsfiddle.net/highcharts/PL37p/7/

[torstein.honsi]

For the records: My own test that starts with 10 iteration and a blank page, then runs 10 iterations at the time: http://jsfiddle.net/highcharts/PL37p/8/

[torstein.honsi]

New finding: running the Highcharts Renderer alone, without a chart object, also displays the same pattern with leaks in jQuery 2.x, but no leaks in 1.x. The following sample creates a renderer instance and 1000 rectangles for each run:
http://jsfiddle.net/highcharts/PL37p/9/

[torstein.honsi]

Continue discussion (or monologue) at https://github.com/highslide-software/h ... ssues/3342