score:2

Accepted answer

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>


Related Query

More Query from same tag