{"id":23740,"date":"2023-04-27T09:49:35","date_gmt":"2023-04-27T09:49:35","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=23740"},"modified":"2026-01-13T11:31:27","modified_gmt":"2026-01-13T11:31:27","slug":"highcharts-version-11","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/product-updates\/highcharts-version-11\/","title":{"rendered":"Highcharts Version 11"},"content":{"rendered":"<p>We&#8217;re happy to announce the new Highcharts release Highcharts Version 11, which brings a host of new features and enhancements.<\/p>\n<p>With Highcharts version 11 users can enjoy a more vivid default color palette, new flow map features, tree graph series, pictorial series, improved rounded corners, and a range of exciting features designed to enhance chart interpretation. Here are the key features of Highcharts Version 11 (check the <a href=\"https:\/\/www.highcharts.com\/blog\/changelog\/\" target=\"_blank\" rel=\"noopener\">changelog<\/a> for more details):<\/p>\n<ul>\n<li>Design upgrade\n<ul>\n<li>The new default theme<\/li>\n<li>Customizable border radius<\/li>\n<\/ul>\n<\/li>\n<li>New chart types\n<ul>\n<li>Flow Maps<\/li>\n<li>Pictorial chart<\/li>\n<li>Treegraph<\/li>\n<li>Geo heatmap<\/li>\n<\/ul>\n<\/li>\n<li>Development improvement\n<ul>\n<li>CSS variables<\/li>\n<li>Faster codebase with modern syntax<\/li>\n<\/ul>\n<\/li>\n<li>Audio Charts<\/li>\n<\/ul>\n<h2>The new default theme<\/h2>\n<p>We are thrilled to introduce the new default theme in Highcharts version 11. The latest release brings a more vivid and visually appealing default color palette to your charts, making your charts more modern, and engaging out of the box. The new default theme is thoughtfully designed to catch the viewer&#8217;s eye and highlight important data points allowing you to communicate your message with impact. As always, all visual properties are highly configurable. If the new design doesn&#8217;t suit you, we get you covered, as you can even <a href=\"https:\/\/www.highcharts.com\/samples\/highcharts\/members\/theme-v10\" target=\"blank\" rel=\"noopener\">roll back to the v10<\/a> looks using a simple configuration.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-23791 aligncenter\" src=\"https:\/\/wp-assets.highcharts.com\/svg\/HCdefaulttheme.gif\" alt=\"\" width=\"560\" height=\"280\" \/><\/p>\n<p>Apart from the color palette, the new default theme includes higher contrast for axis labels, better-looking pie slice label connectors, and the Helvetica font that renders more predictable across platforms. We also made all default font sizes based on em\u2019s, making it easy to control the font sizes of the chart by <a href=\"https:\/\/www.highcharts.com\/samples\/highcharts\/members\/relative-font-size\" target=\"_blank\" rel=\"noopener\">only adjusting the top level<\/a>.<\/p>\n<h2>Improved rounded corners<\/h2>\n<p>The latest version of Highcharts subtly rounds the corners of columns, pies, heatmap, tree map, and many more. This design tweak is small but significant as it enhances the overall aesthetic of the chart and makes it look more modern.<\/p>\n<p class=\"demo-container\"><iframe loading=\"lazy\" style=\"border: none;\" title=\"A column and a pie charts to show the new easy rounded corners.\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/plotoptions\/series-border-radius\" width=\"100%\" height=\"660px\"><\/iframe><\/p>\n<h2>Flow maps<\/h2>\n<p>Highcharts Version 11 introduces a new Flow Maps feature, which allows you to visualize data flow between geographical locations. This feature is handy for businesses that need to visualize supply chain data, transportation routes, or customer journeys. Read more about <a href=\"https:\/\/www.highcharts.com\/docs\/maps\/flowmap-series\" target=\"_blank\" rel=\"noopener\">how to create flow maps with Highcharts<\/a>.<\/p>\n<p class=\"demo-container\"><iframe loading=\"lazy\" style=\"border: none;\" title=\"A flow map that visualized the main early human migration paths.\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/maps\/demo\/flowmap-migration\" width=\"100%\" height=\"570px\"><\/iframe><\/p>\n<h2>Pictorial chart<\/h2>\n<p>Create engaging infographics with vector images via the Pictorial series. Check out <a href=\"https:\/\/www.highcharts.com\/docs\/chart-and-series-types\/pictorial\" target=\"_blank\" rel=\"noopener\">how to create Pictorial with Highcharts<\/a>.<\/p>\n<p class=\"demo-container\"><iframe loading=\"lazy\" style=\"border: none;\" title=\"Chart showing the composition of the human body. The chart is using the pictorial series type with a woman and man image.\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/demo\/pictorial-stackshadow\" width=\"100%\" height=\"570px\"><\/iframe><\/p>\n<h2>Tree graph<\/h2>\n<p>Now, you can create tree graphs with Highcharts to visualize hierarchical dependencies between elements. Read more about <a href=\"https:\/\/www.highcharts.com\/docs\/chart-and-series-types\/treegraph-chart\" target=\"_blank\" rel=\"noopener\">how to create tree graphs with Highcharts<\/a><\/p>\n<p class=\"demo-container\"><iframe loading=\"lazy\" style=\"border: none;\" title=\"Inverted treegraph showing the five continent with their regions.\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/demo\/treegraph-inverted\" width=\"100%\" height=\"490px\"><\/iframe><\/p>\n<h2>Geo heatmap<\/h2>\n<p>Highcharts version 11 comes with a GeoHeatMap series that allows you to represent data on different map projections visually. <a href=\"https:\/\/www.highcharts.com\/docs\/maps\/geoheatmap-series\" target=\"_blank\" rel=\"noopener\">Learn more about how to create a geo heatmap with Highcharts<\/a>.<\/p>\n<p class=\"demo-container\"><iframe loading=\"lazy\" style=\"border: none;\" title=\"A flow map that visualized the main early human migration paths.\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/maps\/demo\/geoheatmap-equalearth\" width=\"100%\" height=\"750px\"><\/iframe><\/p>\n<h2>Faster codebase with modern syntax<\/h2>\n<p>Moving forward, our default JavaScript builds will only include modern syntax and support evergreen browsers. As such, we removed all support for IE 6-8 and created a legacy codebase for non-evergreen browsers. These changes make Highcharts faster and more stable. <a href=\"https:\/\/www.highcharts.com\/blog\/post\/still-supporting-ie11-action-required\/\" target=\"_blank\" rel=\"noopener\">Learn more about our codebase changes<\/a>.<\/p>\n<h2>Refactored CSS with CSS variables<\/h2>\n<p>We modernized our CSS and created CSS variables for colors, instead of the extra step of having to compile a SASS file. This makes it super easy to style data visualizations without configuration changes. Read more about <a href=\"https:\/\/www.highcharts.com\/docs\/chart-design-and-style\/style-by-css\" target=\"_blank\" rel=\"noopener\">how to use CSS to style a chart with Highcharts.<\/a><\/p>\n<p class=\"demo-container\"><iframe loading=\"lazy\" style=\"border: none;\" title=\"Different chart types to show how easy is to refactor CSS with CSS variables.\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/css\/prefers-color-scheme\" width=\"100%\" height=\"610px\"><\/iframe><\/p>\n<h2>Audio Charts made easy<\/h2>\n<p>Visualization no longer has to be visual! The new release has brought significant performance, sound, and flexibility improvements to our audio charts. Adding a built-in lightweight synthesizer, speech synthesis support, context\/cue tracks, conditional tracks, multi-axis, and logarithmic axis support has made it easier to build engaging audio experiences with your charts. Interactive navigation is now easier than ever, thanks to comprehensive features like timeline filters and scrubbing. Audio parameter mapping is now more extended and flexible, supporting tremolo, audio filters, and delays. Lastly, we have included MIDI export for those wanting to take their audio charts further using third-party software. Learn more about <a href=\"https:\/\/www.highcharts.com\/docs\/accessibility\/sonification\" target=\"_blank\" rel=\"noopener\">Highcharts new sonification features<\/a>.<\/p>\n<p class=\"demo-container\"><iframe loading=\"lazy\" style=\"border: none;\" title=\"Highcharts example\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/stock\/demo\/soundscape\" width=\"100%\" height=\"850px\" scrolling=\"no\"><\/iframe><\/p>\n<p>For more details on the new features and enhancements in Highcharts Version 11, check out the <a href=\"https:\/\/www.highcharts.com\/blog\/changelog\/\" target=\"_blank\" rel=\"noopener\">changelog<\/a>. We are excited about the possibilities this release opens up for our users and look forward to seeing the creative ways in which users put these new features to use.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;re happy to announce the new Highcharts release Highcharts Version 11, which brings a host of new features and enhancements. With Highcharts version 11 users can enjoy a more vivid default color palette, new flow map features, tree graph series, pictorial series, improved rounded corners, and a range of exciting features designed to enhance chart [&hellip;]<\/p>\n","protected":false},"author":32,"featured_media":23750,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[1103],"tags":[1094,876],"coauthors":[699],"class_list":["post-23740","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-product-updates","tag-highcharts-core","tag-highcharts-maps"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/23740","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\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=23740"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/23740\/revisions"}],"predecessor-version":[{"id":29386,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/23740\/revisions\/29386"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/23750"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=23740"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=23740"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=23740"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=23740"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}