CODEWITHSUNDEEP
javascripthighcharts
Andrei Herford
Andrei Herford

Reputation: 18729

How to update/add Highchart options/properties after the chart/object has been created?

I would like to display three different charts on a page which are almost the same. Thus I would like to use a common function to create/init the same basic chart and than add options to for each individual chart. How to do this?

$(document).ready(function () {    
    var initBaseChart = function(dchartId, data) {
        var chart = Highcharts.chart(chartId, {
            chart: {
                type: 'column',                     
                events: {   
                    selection: function(event) { ... }
                }
            }
            ...
        }
        return chart;
    }

    var chart1 = initBaseChart('chart1ID', someData);
    var chart2 = initBaseChart('chart2ID', otherData);

    // Add Options to show data labels ==> Does NOT work...
    chart1.options.plotOptions.column.dataLabels.enabled = true;
    chart1.options.plotOptions.column.dataLabels.format = '{point.y:.1f}%';

    // Add event handlers
    chart2.events.... // does not exist...

});

So: How to create a chart with common options and then add custom options?

Upvotes: 0

Views: 758

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

Use chart.update(newOptions), see docs: https://api.highcharts.com/class-reference/Highcharts.Chart#update

However, I would suggest to merge options before rendering a chart. Something like this initBaseChart('chart1ID', someData, additionalOptions) and:

var initBaseChart = function(dchartId, data, additionalOptions) {
    var options = {
        chart: {
            type: 'column',                     
            events: {   
                selection: function(event) { ... }
            }
        }
        ...
    };

    options = merge(options, additionalOptions);

    return Highcharts.chart(chartId, options);
}

Where merge is a function to merge two options. For example $.extend(), angular.copy() or Object.assign().

Upvotes: 2

Related Questions