Pre-creating chart objects based on templates - highcharts

Question

Is it possible to wrap a highcharts chart in a function that uses templates to define the chart, pass the chart data in during the render process then render it to a div. Essentially, I need to pre-build a chart object and render it to a div at a specific time.

Answer 1

You can prepare a global json and use merge() function or push objects directly to template.
var template = {
chart: {
type: 'pie'
},
title: {
text: ''
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
data:[]
}]
};
template.title.text = 'Pie chart 1';
template.series[0].data = [['aaa1',3],['bbb1',4],['ccc1',5]];
$('#container1').highcharts(template);
template.title.text = 'Pie chart 2';
template.series[0].data = [['aaa2',3],['bbb2',4],['ccc2',5]];
$('#container2').highcharts(template);
Simple demo: http://jsfiddle.net/80fsL5x5/
var template = {
chart: {
type: 'pie'
},
title: {
text: ''
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
data:[]
}]
};
var options1 = {
title:{
text: 'Pie chart 1'
},
series:[{
data: [['aaa1',3],['bbb1',4],['ccc1',5]]
}]
};
$('#container1').highcharts(Highcharts.merge(template,options1));
var options2 = {
title:{
text: 'Pie chart 2'
},
series:[{
data: [['aaa2',3],['bbb2',4],['ccc2',5]]
}]
};
$('#container2').highcharts(Highcharts.merge(template,options2));
Demo with merge: http://jsfiddle.net/w46rm4vj/