{"id":22800,"date":"2022-09-26T09:22:34","date_gmt":"2022-09-26T09:22:34","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=22800"},"modified":"2026-01-13T11:25:48","modified_gmt":"2026-01-13T11:25:48","slug":"how-to-synchronize-the-axes-on-multiple-charts","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/how-to-synchronize-the-axes-on-multiple-charts\/","title":{"rendered":"How to synchronize the axes on multiple charts?"},"content":{"rendered":"<p>In this tutorial, I will share how to create interactive synchronized charts using Highcharts.<\/p>\n<p>In case you have to create many charts to get the best insight from your data, it could be a smart idea to bind them so that it\u2019s easy to compare and get better reading (see demo below)<\/p>\n<p class=\"demo-container\"><iframe style=\"width: 100%; height: 800px; border: none;\" title=\"A line chart displays the download speed in Mbit\/s of cellular network technologies within a year of their development\" src=\"https:\/\/assets.highcharts.com\/demos\/samples\/embed\/highcharts\/blog\/synchronize-axes-multiple-charts\"><\/iframe><\/p>\n<p>To achieve that, you can synchronize multiple charts from multiple containers to always have the same extremes, ticks, and tick intervals.<\/p>\n<p>The first step is to declare a function that iterates over each chart on the page and adjusts the extremes (min\/max) and the tick positions to match the first chart on the page (the main one).<\/p>\n<pre>Highcharts.charts.forEach(function(chart) {\r\n  if (chart !== mainChart) {\r\n    if (chart[e.target.coll][0].setExtremes) {\r\n      chart[e.target.coll][0].update({\r\n        min: e.min,\r\n        max: e.max,\r\n        tickPositions: tickPositions\r\n      });\r\n    }\r\n  }\r\n})<\/pre>\n<p>The second step is to make the secondary chart respond to zooming. You need to <a href=\"https:\/\/api.highcharts.com\/class-reference\/Highcharts#.addEvent%3CT%3E\" target=\"_blank\" rel=\"noopener\">add a listener<\/a> to the axis event called <code>afterSetExtremes<\/code> and call that method only for the first chart. To ensure that it only fires for the first chart, you must add a flag called <code>otherChartsFollowAxes<\/code> to the first (main) chart config.<\/p>\n<pre>Highcharts.addEvent(Highcharts.Axis, \"afterSetExtremes\", function (e) {\r\n  if (this.chart.options.chart.otherChartsFollowAxes) {\r\n    syncAxis.call(this, e);\r\n  }\r\n});<\/pre>\n<p>The last step is to synchronize the charts during the initial rendering. To do so, add the <code>Highcharts.lastChartRender<\/code> property. Based on that, the last part of that plugin can be fired to synchronize axis extremes.<\/p>\n<pre>Highcharts.addEvent(Highcharts.Chart, \"load\", function (e) {\r\n  const mainChart = Highcharts.charts[0];\r\n  if (Highcharts.lastChartRender) {\r\n    mainChart.xAxis[0].setExtremes(\r\n      mainChart.xAxis[0].min,\r\n      mainChart.xAxis[0].max\r\n    );\r\n  }\r\n});<\/pre>\n<p>I hope this demo tutorial helps you to create an efficient synchronized chart. Let me know your thoughts in the comment section below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Step by step to create effective interactive synchronized multiple charts with Highcharts.<\/p>\n","protected":false},"author":251,"featured_media":22844,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[210],"tags":[1094],"coauthors":[790],"class_list":["post-22800","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-highcharts-core"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/22800","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/251"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=22800"}],"version-history":[{"count":2,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/22800\/revisions"}],"predecessor-version":[{"id":24072,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/22800\/revisions\/24072"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/22844"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=22800"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=22800"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=22800"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=22800"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}