I use this technique to achieve highslide effect on my highchart:
events: {
click: function() {
debugger;
var container = this.renderTo;
var containerId = $(container).attr("id");
var currChart = $(container).highcharts();
hs.htmlExpand(document.getElementById(containerId), {
width: 9999,
height: 9999,
allowWidthReduction: true,
preserveContent: false
}, {
chartOptions: currChart.userOptions
});
}
}
hs.Expander.prototype.onAfterExpand = function() {
debugger;
if (this.custom.chartOptions) {
var chartOptions = this.custom.chartOptions;
if (!this.hasChart) {
chartOptions.chart.renderTo = $(".highslide-body")[0];
chartOptions.chart.events.click = function() {};
var hsChart = new Highcharts.Chart(chartOptions);
}
this.hasChart = true;
}
};
It's working fine except after I zoomed my chart and I clicked the Reset zoom button, the pop up still showed up instead of the chart got zoomed out. How can I have that pop up after I click everywhere within the chart except the button Reset zoom's place and the legend too?