{"id":9681,"date":"2016-08-03T11:07:25","date_gmt":"2016-08-03T09:07:25","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=9681"},"modified":"2026-01-12T09:03:09","modified_gmt":"2026-01-12T09:03:09","slug":"224-scrollbars-for-any-axis","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/news\/224-scrollbars-for-any-axis\/","title":{"rendered":"Scrollbars for any axis"},"content":{"rendered":"<p>Upon <a href=\"https:\/\/highcharts.uservoice.com\/forums\/55896-highcharts-javascript-api\/suggestions\/2364547-add-navigation-bar-for-y-axis-in-highstock\">popular request<\/a>, we have implemented support for scrollbars on any axis in Highstock 4.2.6. We pulled out the scrollbar logic from the Highstock navigator, making it modular and reusable for datetime, numeric, logarithic and category axes, whether vertical or horizontal.<\/p>\n<p>The full documentation and available options can be seen in our <a href=\"http:\/\/api.highcharts.com\/highstock#yAxis.scrollbar\">API docs<\/a>\u00a0for Highstock.<\/p>\n<p>But the scrollbars are not limited to stock charts or Y axis. Using the <em>highstock.js<\/em> file, it can be applied to regular Highcharts axes too. See examples of:<\/p>\n<ul>\n<li><a href=\"https:\/\/jsfiddle.net\/gh\/get\/jquery\/1.7.2\/highcharts\/highcharts\/tree\/master\/samples\/stock\/yaxis\/inverted-bar-scrollbar\/\">Scrollable bar chart<\/a><\/li>\n<li><a href=\"https:\/\/jsfiddle.net\/gh\/get\/jquery\/1.7.2\/highcharts\/highcharts\/tree\/master\/samples\/stock\/yaxis\/heatmap-scrollbars\/\">Heatmap with two scrollable axes (zoom in first)<\/a><\/li>\n<li><a href=\"https:\/\/jsfiddle.net\/gh\/get\/jquery\/1.7.2\/highcharts\/highcharts\/tree\/master\/samples\/stock\/yaxis\/scrollbar\/\">Scrollable Y axis on stock chart (zoom in first)<\/a><\/li>\n<\/ul>\n<p><iframe height=\"500\" style=\"width: 100%;\" scrolling=\"no\" title=\"BazBPWb\" src=\"https:\/\/codepen.io\/mushigh\/embed\/BazBPWb?height=265&#038;theme-id=light&#038;default-tab=result\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/mushigh\/pen\/BazBPWb'>BazBPWb<\/a> by mustapha mekhatria<br \/>\n  (<a href='https:\/\/codepen.io\/mushigh'>@mushigh<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to use scrollbars on X axis and Y axis using Highstock &#8230;<\/p>\n","protected":false},"author":22,"featured_media":9864,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[211],"tags":[1094],"coauthors":[712],"class_list":["post-9681","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","tag-highcharts-core"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/9681","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\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=9681"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/9681\/revisions"}],"predecessor-version":[{"id":29071,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/9681\/revisions\/29071"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/9864"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=9681"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=9681"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=9681"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=9681"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}