Визуализировать Highcharts после того, как пользователь обновил метки

Я пытаюсь создать построитель диаграмм. У меня есть пользовательский ввод для заголовка и местоположения легенды. Я хочу, чтобы пользователь вводил заголовок, а при нажатии (размытии) диаграмма обновлялась с тем, что он набрал.

Проблема в том, что диаграмма отображается в первый раз, однако я никогда не смогу заставить char снова отобразиться. Вот краткий обзор кода.

$('#legendlocation-select').blur(function updateChartLegend(){
console.log($('#legendlocation-select').val());
if($('#legendlocation-select').val()==='none'){
    chartData.legend.enabled = 'false';
}else{
    chartData.legend.enabled = 'true';
    chartData.legend.align = $('#legendlocation-select').val();
}
renderChart();
});
function renderChart(){
if(chart == undefined){
    console.log("First Draw");
    chart = new Highcharts.Chart(chartData);
}else{
    console.log("Redraw");
    chart.destroy();
    chart = new Highcharts.Chart(chartData);
    chart.redraw();
}
};

Диаграмма отображается в первый раз, а во второй раз представляет собой пустую белую область. Любые идеи? chartData — это переменная со всеми параметрами, которая отображается правильно.

вот JSFiddle, который показывает проблему http://jsfiddle.net/zVjrb/3/