{"id":20579,"date":"2021-02-05T12:07:18","date_gmt":"2021-02-05T12:07:18","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=20579"},"modified":"2026-01-13T11:17:53","modified_gmt":"2026-01-13T11:17:53","slug":"highcharts-version-9-0","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/product-updates\/highcharts-version-9-0\/","title":{"rendered":"Highcharts Version 9.0"},"content":{"rendered":"<p>We\u2019re proud to announce the new major Highcharts release, including the Stock, Maps, and Gantt packages. Here are the main highlights of <b>Highcharts version 9.0<\/b> (check the <a href=\"https:\/\/www.highcharts.com\/blog\/changelog\/\" target=\"_blank\" rel=\"noopener\">changelog<\/a> for more details):<\/p>\n<h2>1. A facelift for the Stock range selector<\/h2>\n<p>We did a significant overhaul of the range selector\u2019s UX.<\/p>\n<p><b>Responsive range selector<\/b><\/p>\n<p>First, we added a feature that allows the range selector button row to collapse into a dropdown if the space is limited.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-20596 aligncenter\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2021\/02\/05091408\/responsiveRangeSelector.gif\" alt=\"responsive Range Selector\" width=\"463\" height=\"332\" \/><\/p>\n<p>This feature may be forced to always show a dropdown, or disabled to always show the button row. The default behavior is that the dropdown appears responsively, which provides a better experience on small screens such as mobile devices or within dashboards.<\/p>\n<p>&nbsp;<\/p>\n<p><b>HTML 5 date pickers<\/b><\/p>\n<p>Secondly, and again with the same mindset to improve the mobile experience, we upgraded the range selector date inputs.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-20592 aligncenter\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2021\/02\/04172832\/date-picker.gif\" alt=\"date-picker\" width=\"281\" height=\"151\" \/><\/p>\n<p>Now, the inputs use true HTML5 date pickers, supported by most modern browsers. Other browsers fall back to text inputs like before. Furthermore, we removed some ink around the date inputs for a more modern and lightweight graphical design.<\/p>\n<p class=\"demo-container\">\n<iframe style=\"width: 100%;\" title=\"Area Highcharts V9\" src=\"https:\/\/codepen.io\/mushigh\/embed\/rNWxVRy?height=265&amp;theme-id=light&amp;default-tab=result\" height=\"500\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\" title=\"An area chart displays AAPL stock price\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/mushigh\/pen\/rNWxVRy\">Area Highcharts V9<\/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>\n<\/p>\n<h2>2. Area series in 3D charts<\/h2>\n<p>Area series can now be added to 3D charts and laid out with individual depths to achieve a stacking effect in the Z dimension, as we have previously supported on column series.<\/p>\n<p class=\"demo-container\">\n<iframe style=\"width: 100%;\" title=\"3D area chart\" src=\"https:\/\/codepen.io\/mushigh\/embed\/xxRZGQX?height=265&amp;theme-id=light&amp;default-tab=result\" height=\"500\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\" title=\"An area 3D chart displays visual comparison of mountains panorama\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/mushigh\/pen\/xxRZGQX\">3D area chart<\/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>\n<\/p>\n<h2>3. Accessibility improvements<\/h2>\n<p>We enhanced the accessibility experience by adding the legend title and improved legend item labels support, in addition to various minor improvements.<\/p>\n<h2>4. Safer HTML handling<\/h2>\n<p>While all user-supplied content should be filtered before being added to the Highcharts configuration, we are now taking extra steps to ensure malicious content does not enter the DOM. All provided HTML configuration strings are now parsed into abstract syntax trees, which are in turn filtered by allow-lists before being inserted into the DOM.<\/p>\n<h2>5. Internal refactoring<\/h2>\n<p>Though not visible for the end-user or implementer, we did a major refactoring on how the series types and indicators are organized. They now are ES6 classes with true inheritance and better suited for TypeScript.<\/p>\n<h2>6. Bug fixes<\/h2>\n<p>Our team is continuously working hard\/smart on keeping <a href=\"https:\/\/www.highcharts.com\/blog\/changelog\/\" target=\"_blank\" rel=\"noopener\">Highcharts rock solid<\/a> and improving our community and users\u2019 experience.<\/p>\n<h2 style=\"text-align: left;\">Try Highcharts<\/h2>\n<p style=\"text-align: left;\">Feel free to download and try the Highcharts library<br \/>\n<a class=\"btn btn-primary\" href=\"https:\/\/www.highcharts.com\/blog\/download\/\" aria-label=\"Download Highcharts library\">Get It<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>We\u2019re proud to announce the new major Highcharts release, including the Stock, Maps, and Gantt packages. Here are the main highlights of Highcharts version 9.0 (check the changelog for more details): 1. A facelift for the Stock range selector We did a significant overhaul of the range selector\u2019s UX. Responsive range selector First, we added [&hellip;]<\/p>\n","protected":false},"author":49,"featured_media":20584,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[1103],"tags":[789,1094],"coauthors":[734],"class_list":["post-20579","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-product-updates","tag-accessibility","tag-highcharts-core"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/20579","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\/49"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=20579"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/20579\/revisions"}],"predecessor-version":[{"id":29339,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/20579\/revisions\/29339"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/20584"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=20579"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=20579"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=20579"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=20579"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}