{"id":26634,"date":"2025-04-09T19:50:57","date_gmt":"2025-04-09T19:50:57","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=26634"},"modified":"2026-01-13T12:02:21","modified_gmt":"2026-01-13T12:02:21","slug":"highcharts-v12-2","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/product-updates\/highcharts-v12-2\/","title":{"rendered":"Highcharts v12.2"},"content":{"rendered":"<p>Highcharts Version 12.2 is out, and with it comes a set of updates aimed at making styling, importing, and interactivity a bit easier for developers. Read on to discover what\u2019s new.<\/p>\n<h2><b>Native color-mix() support<\/b><\/h2>\n<p>We\u2019ve added support for the browser\u2019s native <code>color-mix()<\/code> function. By handing off color management\u00a0to the browser, Highcharts no longer has to interpret or convert color values into RGB. As a result, you can now use CSS variables, named colors and other color models like HSL. And because there\u2019s no conversion layer, transitions and animations between colors are totally under your control. <a href=\"https:\/\/www.highcharts.com\/docs\/chart-design-and-style\/colors#solid-colors\">Read more in our docs.<\/a><\/p>\n<h2><b>Tooltip Positioning (No JS Required)<\/b><\/h2>\n<p>You can now fix your <code>tooltip<\/code> position using two new declarative options: <a href=\"https:\/\/api.highcharts.com\/highcharts\/tooltip.fixed\"><code>tooltip.fixed<\/code><\/a> and <a href=\"https:\/\/api.highcharts.com\/highcharts\/tooltip.position\"><code>tooltip.position<\/code>.<\/a>\u00a0 This gives you precise layout control without the need to write custom positioning code.<\/p>\n<p><center><br \/>\n<video style=\"box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px 0px, rgba(0, 0, 0, 0.09) 0px 1px 1px 0px, rgba(0, 0, 0, 0.05) 0px 3px 2px 0px, rgba(0, 0, 0, 0.01) 0px 6px 2px 0px; border: 1px solid #e3e2e8; border-radius: 8px;\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"50%\" height=\"auto\"><span style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" data-mce-type=\"bookmark\" class=\"mce_SELRES_start\">\ufeff<\/span><source src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2025\/04\/09192624\/r-12.2-tooltip2.mp4\" type=\"video\/mp4\" \/><span style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" data-mce-type=\"bookmark\" class=\"mce_SELRES_start\">\ufeff<\/span><source src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2025\/04\/09192625\/r-12.2-tooltip2.webm\" type=\"video\/webm\" \/><span style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" data-mce-type=\"bookmark\" class=\"mce_SELRES_end\">\ufeff<\/span><\/video><\/center><\/p>\n<h2><strong><a href=\"https:\/\/www.highcharts.com\/demo\/highcharts\/treemap-large-dataset\">New Treemap Layout Options<\/a><\/strong><\/h2>\n<p>We\u2019ve added a few new layout options for treemaps that improve clarity and visual organization:<\/p>\n<ul style=\"margin-left: 20px;\">\n<li><a href=\"https:\/\/api.highcharts.com\/highcharts\/series.treemap.dataLabels.headers\"><code>dataLabels.headers<\/code><\/a> enables you to use data labels as a group-level headers, improving the readability of nested data.<\/li>\n<li><code>groupPadding<\/code> can be applied to parent elements in order to fine tune the spacing between groups.<\/li>\n<li><code>nodeSizeBy<\/code> is an experimental option that determines how to set the size of child nodes when a header or padding is present. When set to \u201cleaf,\u201d the group expands to accommodate headers and padding so that the space between leaves is consistent. When set to \u201cgroup,\u201d the leaves are na\u00efvely arranged into the remaining space once the header and padding values are subtracted.<\/li>\n<\/ul>\n<p><center><br \/>\n<video style=\"box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px 0px, rgba(0, 0, 0, 0.09) 0px 1px 1px 0px, rgba(0, 0, 0, 0.05) 0px 3px 2px 0px, rgba(0, 0, 0, 0.01) 0px 6px 2px 0px; border: 1px solid #e3e2e8; border-radius: 8px;\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"auto\"><span style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" data-mce-type=\"bookmark\" class=\"mce_SELRES_start\">\ufeff<\/span><source src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2025\/04\/10140330\/r-12.2-treemap-corrected.mp4\" type=\"video\/mp4\" \/><span style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" data-mce-type=\"bookmark\" class=\"mce_SELRES_start\">\ufeff<\/span><source src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2025\/04\/10140330\/r-12.2-treemap-corrected.webm\" type=\"video\/webm\" \/><span style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" data-mce-type=\"bookmark\" class=\"mce_SELRES_end\">\ufeff<\/span><\/video><\/center><\/p>\n<h2><strong>Additional Highlights:<\/strong><\/h2>\n<h3><b>ESM Bundles for Dynamic Imports<\/b><\/h3>\n<p>We\u2019ve added ESM bundles, which makes dynamic imports easier. Whether\u00a0 you\u2019re using native modules in the browser or working in a modern build setup like Webpack, you can now import Highcharts dynamically using standard <code>import<\/code> syntax. For client-side import, this is a great improvement because previous builds required importing numerous small module files, which came with added network latency.<\/p>\n<h3><b>Expanded Null Point Interaction Support<\/b><\/h3>\n<p>The <a href=\"https:\/\/api.highcharts.com\/highcharts\/plotOptions.series.nullInteraction\"><code>nullInteraction<\/code><\/a> option now works with the <code>line<\/code>, <code>spline<\/code>, <code>area<\/code>, <code>area-spline<\/code>, <code>column<\/code>, <code>bar<\/code> and <code>timeline<\/code> series types, so you can annotate or display info about missing data in a way that makes sense to your users.<\/p>\n<h3><b><code>foreignObject<\/code><\/b><b> for HTML Labels (experimental)<\/b><\/h3>\n<p>Traditionally, Highcharts renders <code>useHTML<\/code> labels as regular HTML floating outside the chart, positioned via CSS. This works for simple cases, but fails to deal with <code>z-index<\/code> of items rendered on top of each other. Cases like that have traditionally required workarounds.<\/p>\n<p>By setting\u00a0 the <code>HTMLElement.useForeignObject<\/code> option to true, labels using HTML will render inside the SVG, fixing the <code>z-index<\/code> problems, while also ensuring a simpler DOM structure internally.<\/p>\n<h3><b>Language Modules for select languages<\/b><\/h3>\n<p>We\u2019ve added <a href=\"https:\/\/www.highcharts.com\/docs\/advanced-chart-features\/internationalization#language-modules-preview\">language modules<\/a> for select languages, enabling you to localize chart elements more easily. So if you\u2019ve been rolling your own i18n workarounds, this should simplify things going forward.<\/p>\n<h2><b>Conclusion<\/b><\/h2>\n<p>Check out the <a href=\"https:\/\/www.highcharts.com\/changelog\/\">full changelog<\/a> for additional bug fixes, or head over to the <a href=\"https:\/\/www.highcharts.com\/docs\/index\">docs<\/a> to explore these updates in more detail. And as always, if you run into something odd, or have suggestions for what to improve next, <a href=\"https:\/\/github.com\/highcharts\/highcharts\/issues\">let us know<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Highcharts Version 12.2 is out, and with it comes a set of updates aimed at making styling, importing, and interactivity a bit easier for developers. Read on to discover what\u2019s new.<\/p>\n","protected":false},"author":250,"featured_media":26641,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[1103],"tags":[1094,1031],"coauthors":[786],"class_list":["post-26634","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-product-updates","tag-highcharts-core","tag-javascript"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/26634","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\/250"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=26634"}],"version-history":[{"count":4,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/26634\/revisions"}],"predecessor-version":[{"id":26750,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/26634\/revisions\/26750"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/26641"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=26634"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=26634"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=26634"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=26634"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}