{"id":21160,"date":"2021-10-22T07:17:57","date_gmt":"2021-10-22T07:17:57","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=21160"},"modified":"2026-01-13T11:21:25","modified_gmt":"2026-01-13T11:21:25","slug":"dynamically-switch-between-linear-and-log-axis-scale-using-stock-tools-gui","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/dynamically-switch-between-linear-and-log-axis-scale-using-stock-tools-gui\/","title":{"rendered":"Dynamically switch between linear and log axis scale using Stock Tools GUI"},"content":{"rendered":"<p>In this article, I will show you how to add a custom logarithmic\/linear Stock Tools button and how to interact with it. The custom stock tool button allows you to change the axes type from linear to logarithmic and the other way around.<br \/>\nSwitching from logarithmic to linear scale can be useful with a particular set of data such as stock charts, as it allows be easier to interpret the chart using one of the scales.<br \/>\nLet\u2019s begin with a simple chart where you can see how the charts\u2019 appearance changes with different axis types. To demonstrate, I created an HTML button and I added an event listener to it.<br \/>\nWhen the button is clicked, we can use the axis <a href=\"https:\/\/api.highcharts.com\/class-reference\/Highcharts.Axis#update\" target=\"_blank\" rel=\"noopener\">update method<\/a> to switch between the linear and logarithmic axis types. To track the changes I added the logarithmic flag.<\/p>\n<pre>let isLogarithmic = false;\r\ndocument.getElementById('linlog').addEventListener('click', () => {\r\n  chart.yAxis[0].update({\r\n    type: isLogarithmic ? 'linear' : 'logarithmic'\r\n  });\r\n  isLogarithmic = !isLogarithmic;\r\n});<\/pre>\n<p class=\"demo-container\"><iframe style=\"width: 100%; height: 420px; border: none;\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/blog\/lin-log-switch-basic\" title=\"A column chart with a button to switch between linear and logarithmic scale\"><\/iframe><\/p>\n<p>Now let\u2019s convert that knowledge into the Stock Tools GUI. As a starting point, we can cover that demo<\/p>\n<p>The first step is to choose what kind of button to add to the GUI from the existing <a href=\"https:\/\/api.highcharts.com\/highstock\/stockTools.gui.buttons\" target=\"_blank\" rel=\"noopener\">stackTools GUI buttons collection<\/a>. Once your choice is made, select a name for the new one (lin\/long switch), for this project, I named that button <code>linLogSwitch<\/code> and conveniently separated it from the other buttons by the separator.<\/p>\n<p>The second step is to create the definition. Remember, that the definition name has to be the same as the button name to specify which button to add given styles and functionalities. I add to that definition a className and <a href=\"https:\/\/code.highcharts.com\/9.2.2\/gfx\/stock-icons\/logarithmic.svg\" target=\"_blank\" rel=\"noopener\">symbol<\/a> that can be found in our library. The symbol shows the axis type which will be visible after clicking on that button.<br \/>\nIf desired, you could use different symbols.<br \/>\nSo far, the options looks like this:<\/p>\n<pre>stockTools: {\r\n  gui: {\r\n    buttons: ['linLogSwitch', 'separator', 'indicators', 'separator', 'simpleShapes', 'lines', 'crookedLines', 'measure', 'advanced', 'toggleAnnotations', 'separator', 'verticalLabels', 'flags', 'separator', 'zoomChange', 'fullScreen', 'typeChange', 'separator', 'currentPriceIndicator', 'saveChart'],\r\n    definitions: {\r\n      linLogSwitch: {\r\n        className: \u2018highcharts - lin - log -\r\n          switch\u2019,\r\n        ,\r\n        symbol: 'logarithmic.svg'\r\n      },\r\n    }\r\n  }\r\n},<\/pre>\n<p>A callback function is required to handle the button click event. This function must be named &#8216;init&#8217;. It will be defined in navigation.bindings (more here: <a href=\"https:\/\/api.highcharts.com\/highstock\/navigation.bindings\" target=\"_blank\" rel=\"noopener\">navigation.bindings<\/a>). With more complex buttons and their annotation, in some cases you might need to add other functions called <code>start<\/code>, <code>steps<\/code> and <code>end<\/code>. However, this isn\u2019t necessary in this basic example.<br \/>\nThe name of the property has to be (once again) the same as the button name to associate the right button. Inside it, based on the current chart state, I update the axis type using the <a href=\"https:\/\/api.highcharts.com\/class-reference\/Highcharts.Axis#update\" target=\"_blank\" rel=\"noopener\">axis update method<\/a>. <\/p>\n<p>When you click on the button and the scale is changed, the button\u2019s icon is no longer valid because it shows the wrong axis type symbol. That is why you also need to update the <a href=\"https:\/\/code.highcharts.com\/9.2.2\/gfx\/stock-icons\/logarithmic.svg\" target=\"_blank\" rel=\"noopener\">button background image<\/a>. Lastly, remove the default selection on the button.<\/p>\n<pre>navigation: {\r\n  bindings: {\r\n    linLogSwitch: {\r\n      className: \u2018highcharts - lin - log -\r\n        switch\u2019,\r\n      init: function(button) {\r\n        const chart = this.chart,\r\n          isLogarithmic = chart.yAxis[0].logarithmic,\r\n          axisTypeIcon = isLogarithmic ? 'logarithmic.svg' : 'linear.svg',\r\n          iconURL = 'https:\/\/code.highcharts.com\/9.2.2\/gfx\/stock-icons\/' + axisTypeIcon;\r\n\r\n        \/\/ Change the axis type accordingly.\r\n        chart.yAxis[0].update({\r\n          type: isLogarithmic ? 'linear' : 'logarithmic',\r\n          minorTickInterval: isLogarithmic ? null : 'auto'\r\n        }, false)\r\n        chart.yAxis[1].update({\r\n          type: isLogarithmic ? 'linear' : 'logarithmic',\r\n          minorTickInterval: isLogarithmic ? null : 'auto'\r\n        })\r\n\r\n        \/\/ Change the button icon.\r\n        button.firstChild.style['background-image'] = `url(${iconURL})`;\r\n\r\n        \/\/ Deselect button after click.\r\n        button.classList.remove('highcharts-active')\r\n      }\r\n    }\r\n  }\r\n},<\/pre>\n<p>In the end, here is the final demo:<\/p>\n<p class=\"demo-container\"><iframe style=\"width: 100%; height: 450px; border: none;\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/blog\/lin-log-switch\" title=\"A stock tool with the Logarithmic and linear scale switch button\"><\/iframe><\/p>\n<p>Let me know your thoughts about this project, and feel free to share your experience in the comment section below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to create a button to dynamically switch between linear and log axis scale using Highcharts Stock Tools GUI.<\/p>\n","protected":false},"author":251,"featured_media":21168,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[210],"tags":[883],"coauthors":[790],"class_list":["post-21160","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-highcharts-stock"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/21160","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=21160"}],"version-history":[{"count":2,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/21160\/revisions"}],"predecessor-version":[{"id":29354,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/21160\/revisions\/29354"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/21168"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=21160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=21160"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=21160"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=21160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}