Question

I am building a Dashboard and it has around 4 graphs on a row and on click of any graph i want to update another graph which is bigger in size to display the graph so that its visible to the user to analyze.

any idea how to Redraw the map on click on a button.

Answer 1

I did the similar thing on my project.

You can add one button zoom/popup, clicking on which would open a new big chart and disable the exporting buttons in this new chart.

Here’s the full code.

function callback($this) {
    var img = $this.renderer.image('images/zoom_icon.png', $this.chartWidth - 40, 5, 40, 12);
    img.add();
    img.css({
        'cursor': 'pointer'
    });
    img.attr({
        'title': 'Pop out chart'
    });
    img.on('click', function () {
        var params = {
            chart: {
                spacingLeft: 100,
                spacingRight: 100,
                renderTo: 'myChart'
            },
            title: {
                text: 'title'
            },
            exporting: {
                buttons: {
                    exportButton: {
                        enabled: false
                    },
                    printButton: {
                        enabled: false
                    }

                }
            }

        }

        new Highcharts.Chart(params, function (chart) {});
    })

}


new Highcharts.Chart(charts.params, callback);

// where charts.params is object which contains options for chart