Reputation: 595
I have a chart where i allowed zooming in/out. Each time user zoom in/out "Reset Zoom" appears.
Now I have added a new customize button where i need to show X most updated column data. I have changed categories and data, but need also to reset the zoom.
Can this be done ? I still want to keep the "Reset Zoom" when user tries to zoom in/out. PS: I tried doing this.zoomOut() but then the "Reset Zoom" appeared :(
Regards Chanan
Upvotes: 7
Views: 17950
Reputation: 1106
for react projects
import Highcharts from 'highcharts'
inside your react component function add
useEffect(() => {
// Reset all Highcharts charts' zoom
if (Highcharts.charts) {
Highcharts.charts.forEach((chart) => {
if (chart) {
chart.zoomOut()
}
})
}
}, [condition1, condition2])
in this situation i have 2 conditions (any update to cause a reset) where i want the chart to reset the zoom add your state vars in the useEffect dependency array.
Upvotes: 0
Reputation: 41
We had a similar situation - user zooms, we add a 'save this zoom stage' button, user clicks the button, we save the new min/max time, but now we have to make the reset zoom button disappear.
This code did it and the button returns if the user zooms even further afterwards:
chart.resetZoomButton.hide();
chart.resetZoomButton = chart.resetZoomButton.destroy();
Upvotes: 0
Reputation: 19
chart: { resetZoomButton: { theme: { display: 'none' } } }
buttons: { resetButton: { symbol: 'url(redo_icon.svg)', _titleKey: "resetZoom", y: 20, x: -20, onclick: function () { this.xAxis[0].setExtremes(null,null); this.yAxis[0].setExtremes(null,null) } } }
Upvotes: 0
Reputation: 288
I just called the button's click event and it worked fine.
given: v_chart is variable for Highcharts chart;
if (typeof v_chart.resetZoomButton !== 'undefined') {
v_chart.resetZoomButton.element.onclick();
}
Upvotes: 1
Reputation: 105
If you want to reset the zoom on an external button click then do it as follows:
$("#YourOwnZoomBtnID").click(function(){
$('.highcharts-button').click();
});
If you want to hide the Inbuilt Reset Button of highcharts then you can do it as follows:
xAxis: { categories: xAxisCategories
,events: {
afterSetExtremes: function() {
$('.highcharts-button').hide();
}
}}
jsfiddle example is here: jsfiddle
Thanks Kalyan
Upvotes: 3
Reputation: 633
As suggested here
chart.zoom()
But keep in mind that calling chart.zoom()
does not trigger chart.events.selection
event. Which is triggered if you click on "Reset button" manually or programmatically $('.highcharts-button').click();
Upvotes: 4
Reputation: 750
Pawel's suggestion of calling
chart.xAxis[0].setExtremes(null,null);
does work, btw, as shown here: http://jsfiddle.net/tvHg6/
However, although the chart zooms out, the resetZoom button is still hanging around, not sure how to hide it. Calling chart.resetZoomButton.hide() hides it, but it does so permanently.
Upvotes: 12