High Charts resize bug
HTML
<script type="text/javascript" src="http://highcharts.com/js/testing.js"></script>
Observe how the chart is initially rendered. All looks well. <br><br>
Now click these buttons in order...<br>
<button id="firstClick">First resize</button><br>
Result: It looks fine.<br>
<button id="secondClick">Second resize</button><br>
Result: A bit messy.<br>
<button id="thirdClick">Third resize</button><br>
Result: Browser crashing (or you can click second time on "Second resize", to do the same trick)
<div id="container" style="height: 300px"></div>
JavaScript
var chart = new Highcharts.Chart({
legend: {
enabled: true,
backgroundColor: '#FFFFFF',
borderWidth: 0,
itemStyle: {
fontFamily: 'Arial',
fontSize: '10px'
},
align: 'right',
layout: 'vertical',
floating: false,
verticalAlign: 'top',
y: 35
},
chart: {
renderTo: 'container',
animation: false,
backgroundColor: '#ffffff',
zoomType: 'xy',
alignTicks: false,
defaultSeriesType: 'spline'
},
xAxis: {
title: {
text: 'Time',
style: {
fontWeight: 'normal',
color: '#232323',
fontFamily: 'Arial',
fontSize: '11px'
},
margin: 20
},
lineColor: '#232323',
events: {
setExtremes: function (event) {
chart.resetZoom.element.setAttribute('display', 'inline');
chart.dragToZoom.element.setAttribute('display', 'none');
chart.resetZoomButton.hide();
}
},
tickColor: '#232323',
gridLineColor: '#d3d3d3',
labels: {
style: {
fontWeight: 'normal',
color: '#232323',
fontFamily: 'Arial',
fontSize: '10px'
}
},
lineWidth: 1,
type: 'datetime',
allowDecimals: false,
tickWidth: 1,
tickmarkPlacement: 'on'
},
series: [{
stickyTracking: false,
borderColor: '#ffffff',
pointPadding: 0.0,
marker: {
lineColor: '#232323',
symbol: 'diamond',
radius: 4.0
},
shadow: true,
borderWidth: 1.0,
name: 'Data1',
data: [{
y: 91.35,
x: 1334098800000
}, {
y: 84.62,
x: 1334185200000
}, {
y:...