Does anyone know how to use highcharts to render the same chart twice? My code that I have is:

$(function () {
$('#SuccessFailedRatio, #CounterfeitRatio').highcharts({
    chart: {
....

I have two divs in my html with the id's shown above. Only one chart appears in CounterfeitRatio. Does anyone know how to make it appear in both divs? Thanks for the help!

Does anyone know how to use highcharts to render the same chart twice? My code that I have is:

$(function () {
$('#SuccessFailedRatio, #CounterfeitRatio').highcharts({
    chart: {
....

I have two divs in my html with the id's shown above. Only one chart appears in CounterfeitRatio. Does anyone know how to make it appear in both divs? Thanks for the help!

• javascript
• html
• highcharts

Share Improve this question Follow asked Aug 12, 2013 at 1:58 kchow23kchow23 4711 silver badge66 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

I would separate your options into an object and then add that to two charts. Highcharts by default will only load your chart into the first element that fits your jQuery selector, so you have to add it to two elements specifically. Here is a jsFiddle!

var options = {
    title: {
        text: 'Monthly Average Temperature',
        x: -20 //center
    }
    //etc...
};

$('#container').highcharts(options);
$('#container2').highcharts(options);

You can use this option:

$('#container').highcharts($.extend({},options));
$('#container2').highcharts($.extend({},options));