You must be logged in to post your query.
Home › Forums › Chart Support › Synchronized Charts
Tagged: Axis X
Hello every one, is there an option to synchronized panning/zooming option?
I mean if I do a zoom in one chart and then change to pan, can i change the option in the other to pan chart as well?
I let you my jsfiddle
Thanks!
@nerviozzo96,
Yes, it is possible to sync zoom / pan button across multiple charts. You can achieve this by triggering the click event on the zoom / pan button on all charts when a user clicks on it in one of the charts as shown below:
function syncZoomPanButtonClick() { var toolbars = document.getElementsByClassName("canvasjs-chart-toolbar"); for(var j = 0; j < toolbars.length; j++) { toolbars[j].firstChild.addEventListener("click", function(e) { for(var j = 0; j < toolbars.length; j++){ if(this != toolbars[j].firstChild && e.isTrusted === true) { toolbars[j].firstChild.click(); } } }); } }
Please take a look at this JSFiddle for a working example with sample code.
— Shashi Ranjan Team CanvasJS
Hi there, im having a little problem with this. I want to have 2 charts with different values (that mean different maximums) with same width or margin. jsfiddle I let you an image to clarify what I mean
You can align y-axis across multiple charts by setting the margin property. The margin value has to be calculated based on the bounds of y-axis as shown in the code below –
var axisYBoundMax = 0; for (var i=0; i<charts.length; i++) { axisYBoundMax = Math.max(axisYBoundMax, charts[i].axisY[0].bounds.x2); } for(var i = 0; i < charts.length; i++) { charts[i].axisY[0].set("margin", axisYBoundMax - (charts[i].axisY[0].bounds.x2 - charts[i].axisY[0].bounds.x1)); }
Please take a look at this JSFiddle for complete working code.
—- Manoj Mohan Team CanvasJS
Thanks, I guess the same applies for the x axis right?
Hi there, this dont work on chart updates. I let you the example Try to hide and show Series multiple times
Yes, you can align x-axis across multiple chart using same logic as mentioned above.
You can reset the margin of y-axis to 0 before aligning the y-axis across multiple charts as shown in the code snippet below.
for(var i = 0; i < charts.length; i++) { charts[i].axisY[0].set("margin", 0); }
Also, please take a look at this updated JSFiddle for complete code.
You must be logged in to reply to this topic. Login/Register