how to display 2 same highcharts without duplicate the code

Question

I have 2 div of same content, I want to display the same pie charts inside the 2 div, however just the first one is showing, I know the idea of duplicate the js code and make the id like #container1, #container2, but is there a way to avoid code duplication. Thank you.

Here is the js:

$(document).ready(function () {

    // Build the chart
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: ''
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        series: [{
            name: 'Brands',
            colorByPoint: true,
            data: [{
                name: 'Unused',
                y: 40,
                color: '#eeeeee',
                sliced: true,
                selected: true
            }, {
                name: 'Used',
                y: 60,
                color: '#ff7900',
                selected: true

            }]
        }]
    });

    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: ''
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        series: [{
            name: 'Brands',
            colorByPoint: true,
            data: [{
                name: 'Unused',
                y: 40,
                color: '#eeeeee',
                sliced: true,
                selected: true
            }, {
                name: 'Used',
                y: 60,
                color: '#ff7900',
                selected: true

            }]
        }]
    });
});

And HTML :

<div id='container' style="margin-top:300px">pie1</div>
<div id='container' style="margin-top:500px">pie2</div>

Answer 1

You can define the Highchart configuration object once and use it multiple times, like this:

$(document).ready(function () {
    // Using classes to select multiple containers
    var $containers = $(".container");
    // You just set the configuration object once
    var chartConfig = {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: ''
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        series: [{
            name: 'Brands',
            colorByPoint: true,
            data: [{
                name: 'Unused',
                y: 40,
                color: '#eeeeee',
                sliced: true,
                selected: true
            }, {
                name: 'Used',
                y: 60,
                color: '#ff7900',
                selected: true

            }]
        }]
    };
    // And then for every container init Hightchart with the same object 
    $containers.each(function() {
      $(this).highcharts(chartConfig);
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.src.js"></script>


<div id="container1" class="container">pie1</div>
<div id="container2" class="container">pie2</div>