Highcharts - Reset zoom in synchronised charts
I'm using the syncExtremes function to synchronise multiple charts (and their zooms) as implemented in the example below:
https://jsfiddle.net/pz2bak0u
However I've come across two issues I can't seem to find my way around. The first one is that if you zoom multiple times in different charts without reseting and then click on one of the Reset zoom buttons, the other Reset zoom buttons hang around (and I would like them to disappear as they don't have any functionality when clicked).
I then modified the fiddle to allow xy zooming:
https://jsfiddle.net/47dz68Lt
If you zoom in on the first chart, then the second, and then the third, and try unzooming the first chart, the other two stay halfway zoomed.
I've tried
chart.xAxis[0].setExtremes(null, null);
but haven't had any luck.
Is it even posible to reset all xy zooming in all charts at the same time as in the x zooming example?
javascript highcharts
asked Jan 3 at 14:39
readyFreddiereadyFreddie
52
add a comment |
I'm using the syncExtremes function to synchronise multiple charts (and their zooms) as implemented in the example below:
https://jsfiddle.net/pz2bak0u
However I've come across two issues I can't seem to find my way around. The first one is that if you zoom multiple times in different charts without reseting and then click on one of the Reset zoom buttons, the other Reset zoom buttons hang around (and I would like them to disappear as they don't have any functionality when clicked).
I then modified the fiddle to allow xy zooming:
https://jsfiddle.net/47dz68Lt
If you zoom in on the first chart, then the second, and then the third, and try unzooming the first chart, the other two stay halfway zoomed.
I've tried
chart.xAxis[0].setExtremes(null, null);
but haven't had any luck.
Is it even posible to reset all xy zooming in all charts at the same time as in the x zooming example?
javascript highcharts
asked Jan 3 at 14:39
readyFreddiereadyFreddie
52
add a comment |
I'm using the syncExtremes function to synchronise multiple charts (and their zooms) as implemented in the example below:
https://jsfiddle.net/pz2bak0u
However I've come across two issues I can't seem to find my way around. The first one is that if you zoom multiple times in different charts without reseting and then click on one of the Reset zoom buttons, the other Reset zoom buttons hang around (and I would like them to disappear as they don't have any functionality when clicked).
I then modified the fiddle to allow xy zooming:
https://jsfiddle.net/47dz68Lt
If you zoom in on the first chart, then the second, and then the third, and try unzooming the first chart, the other two stay halfway zoomed.
I've tried
chart.xAxis[0].setExtremes(null, null);
but haven't had any luck.
Is it even posible to reset all xy zooming in all charts at the same time as in the x zooming example?
javascript highcharts
asked Jan 3 at 14:39
readyFreddiereadyFreddie
52
I'm using the syncExtremes function to synchronise multiple charts (and their zooms) as implemented in the example below:
https://jsfiddle.net/pz2bak0u
However I've come across two issues I can't seem to find my way around. The first one is that if you zoom multiple times in different charts without reseting and then click on one of the Reset zoom buttons, the other Reset zoom buttons hang around (and I would like them to disappear as they don't have any functionality when clicked).
I then modified the fiddle to allow xy zooming:
https://jsfiddle.net/47dz68Lt
If you zoom in on the first chart, then the second, and then the third, and try unzooming the first chart, the other two stay halfway zoomed.
I've tried
chart.xAxis[0].setExtremes(null, null);
but haven't had any luck.
Is it even posible to reset all xy zooming in all charts at the same time as in the x zooming example?
javascript highcharts
javascript highcharts
asked Jan 3 at 14:39
readyFreddiereadyFreddie
52
asked Jan 3 at 14:39
readyFreddiereadyFreddie
52
asked Jan 3 at 14:39
readyFreddiereadyFreddie
52
asked Jan 3 at 14:39
readyFreddiereadyFreddie
52
asked Jan 3 at 14:39
readyFreddiereadyFreddie
52
52
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Currently you reset only x-axes extremes, with xy zoom type, you need to also reset y-axes extremes:
var H = Highcharts;
H.wrap(H.Chart.prototype, 'zoomOut', function(proceed) {
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
H.charts.forEach(function(chart) {
if (chart !== this) {
chart.yAxis[0].setExtremes(null, null, undefined, false);
}
}, this);
});
To control the display of the resetZoomButton, you can wrap showResetZoom method, for example:
H.wrap(H.Chart.prototype, 'showResetZoom', function(proceed) {
var visibleBtn = false;
H.charts.forEach(function(chart) {
if (chart.resetZoomButton) {
visibleBtn = true;
}
});
if (!visibleBtn) {
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
}
});
Live demo: https://jsfiddle.net/BlackLabel/bg7L1nev/
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
answered Jan 4 at 11:35
ppotaczekppotaczek
6,7341211
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54024435%2fhighcharts-reset-zoom-in-synchronised-charts%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Currently you reset only x-axes extremes, with xy zoom type, you need to also reset y-axes extremes:
var H = Highcharts;
H.wrap(H.Chart.prototype, 'zoomOut', function(proceed) {
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
H.charts.forEach(function(chart) {
if (chart !== this) {
chart.yAxis[0].setExtremes(null, null, undefined, false);
}
}, this);
});
To control the display of the resetZoomButton, you can wrap showResetZoom method, for example:
H.wrap(H.Chart.prototype, 'showResetZoom', function(proceed) {
var visibleBtn = false;
H.charts.forEach(function(chart) {
if (chart.resetZoomButton) {
visibleBtn = true;
}
});
if (!visibleBtn) {
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
}
});
Live demo: https://jsfiddle.net/BlackLabel/bg7L1nev/
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
answered Jan 4 at 11:35
ppotaczekppotaczek
6,7341211
add a comment |
Currently you reset only x-axes extremes, with xy zoom type, you need to also reset y-axes extremes:
var H = Highcharts;
H.wrap(H.Chart.prototype, 'zoomOut', function(proceed) {
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
H.charts.forEach(function(chart) {
if (chart !== this) {
chart.yAxis[0].setExtremes(null, null, undefined, false);
}
}, this);
});
To control the display of the resetZoomButton, you can wrap showResetZoom method, for example:
H.wrap(H.Chart.prototype, 'showResetZoom', function(proceed) {
var visibleBtn = false;
H.charts.forEach(function(chart) {
if (chart.resetZoomButton) {
visibleBtn = true;
}
});
if (!visibleBtn) {
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
}
});
Live demo: https://jsfiddle.net/BlackLabel/bg7L1nev/
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
answered Jan 4 at 11:35
ppotaczekppotaczek
6,7341211
add a comment |
Currently you reset only x-axes extremes, with xy zoom type, you need to also reset y-axes extremes:
var H = Highcharts;
H.wrap(H.Chart.prototype, 'zoomOut', function(proceed) {
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
H.charts.forEach(function(chart) {
if (chart !== this) {
chart.yAxis[0].setExtremes(null, null, undefined, false);
}
}, this);
});
To control the display of the resetZoomButton, you can wrap showResetZoom method, for example:
H.wrap(H.Chart.prototype, 'showResetZoom', function(proceed) {
var visibleBtn = false;
H.charts.forEach(function(chart) {
if (chart.resetZoomButton) {
visibleBtn = true;
}
});
if (!visibleBtn) {
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
}
});
Live demo: https://jsfiddle.net/BlackLabel/bg7L1nev/
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
answered Jan 4 at 11:35
ppotaczekppotaczek
6,7341211
Currently you reset only x-axes extremes, with xy zoom type, you need to also reset y-axes extremes:
var H = Highcharts;
H.wrap(H.Chart.prototype, 'zoomOut', function(proceed) {
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
H.charts.forEach(function(chart) {
if (chart !== this) {
chart.yAxis[0].setExtremes(null, null, undefined, false);
}
}, this);
});
To control the display of the resetZoomButton, you can wrap showResetZoom method, for example:
H.wrap(H.Chart.prototype, 'showResetZoom', function(proceed) {
var visibleBtn = false;
H.charts.forEach(function(chart) {
if (chart.resetZoomButton) {
visibleBtn = true;
}
});
if (!visibleBtn) {
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
}
});
Live demo: https://jsfiddle.net/BlackLabel/bg7L1nev/
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
answered Jan 4 at 11:35
ppotaczekppotaczek
6,7341211
answered Jan 4 at 11:35
ppotaczekppotaczek
6,7341211
answered Jan 4 at 11:35
ppotaczekppotaczek
6,7341211
answered Jan 4 at 11:35
ppotaczekppotaczek
6,7341211
6,7341211
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54024435%2fhighcharts-reset-zoom-in-synchronised-charts%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
