{"id":29396,"date":"2026-01-15T16:07:02","date_gmt":"2026-01-15T16:07:02","guid":{"rendered":"urn:uuid:bea086b2-6219-45ce-9f66-3e5f124cec5a"},"modified":"2026-01-15T16:07:03","modified_gmt":"2026-01-15T16:07:03","slug":"highcharts-12-5","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/product-updates\/highcharts-12-5\/","title":{"rendered":"Highcharts 12.5"},"content":{"rendered":"\n<p>Highcharts 12.5 is out and focuses on practical improvements:&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-highsoft-hs-list hs-list-block\" data-bullet-type=\"dot\" style=\"--icon-width:24px;--icon-height:24px;--item-spacing:var(--margin-size-4)\"><ol class=\"hs-list\"><li class=\"hs-list__item\"><span class=\"hs-list__prefix\">\u2022<\/span><p class=\"hs-list__text \">A new way to visualize hierarchical data with dendrograms<\/p><\/li><li class=\"hs-list__item\"><span class=\"hs-list__prefix\">\u2022<\/span><p class=\"hs-list__text \">Finer control over legend layout<\/p><\/li><li class=\"hs-list__item\"><span class=\"hs-list__prefix\">\u2022<\/span><p class=\"hs-list__text \">A simpler approach to light and dark theming<\/p><\/li><\/ol><\/div>\n\n\n\n<p>Let\u2019s dive into the details.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Dendrograms now supported<\/strong><\/h2>\n\n\n\n<p>You can now create dendrograms by plotting treegraph charts against the x-axis.<\/p>\n\n\n\n<style> \n.wp-iframe {  \n  width: 100%;\n  border: 2px solid var(--border-color-light,#e3e3e8);\n  border-radius: 8px;\n\n}\n.wp-cropped-iframe {\n  height: 750px !important;\noverflow: hidden;\n  display: block;\n}<\/style><iframe frameborder=\"0\" scrolling=\"no\" class=\"wp-iframe wp-cropped-iframe\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/demo\/dendrogram\"><\/iframe> \n\n\n\n<p>A dendrogram is a tree-like diagram that visualizes the results of a hierarchical clustering analysis, showing relationships and similarity levels within a group of items.<\/p>\n\n\n\n<p>The name comes from two ancient Greek words: \u03b4\u03ad\u03bd\u03b4\u03c1\u03bf\u03bd, meaning \u201ctree,\u201d and \u03b3\u03c1\u1fb0\u0301\u03bc\u03bc\u1fb0, meaning \u201cthat which is drawn.\u201d<\/p>\n\n\n\n<p>Objects are merged into branches (clusters) based on how similar they are, with branch height indicating the level of similarity. Items that are very similar join low on the chart, while less similar items join higher up.<\/p>\n\n\n\n<p>This makes dendrograms great for:<\/p>\n\n\n\n<div class=\"wp-block-highsoft-hs-list hs-list-block\" data-bullet-type=\"dot\" style=\"--icon-width:24px;--icon-height:24px;--item-spacing:var(--margin-size-4)\"><ol class=\"hs-list\"><li class=\"hs-list__item\"><span class=\"hs-list__prefix\">\u2022<\/span><p class=\"hs-list__text \">Visualizing results\u00a0 from hierarchical clustering algorithms<\/p><\/li><li class=\"hs-list__item\"><span class=\"hs-list__prefix\">\u2022<\/span><p class=\"hs-list__text \">Representing taxonomies and classification trees with clear grouping levels<\/p><\/li><li class=\"hs-list__item\"><span class=\"hs-list__prefix\">\u2022<\/span><p class=\"hs-list__text \">Any hierarchy where position along an axis represents similarity, difference, or progression over time<\/p><\/li><\/ol><\/div>\n\n\n\n<p>For more info and configuration options, <a href=\"https:\/\/www.highcharts.com\/docs\/chart-and-series-types\/treegraph-chart#dendrogram\" target=\"_blank\" rel=\"noreferrer noopener\">check out the docs<\/a>.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Control how wide legends can get<\/strong><\/h2>\n\n\n\n<p>Legends are useful. Legends that take over the whole chart\u2026not so much.<\/p>\n\n\n\n<p>Highcharts 12.5 introduces a new option: <code>legend.maxWidth<\/code>. It does exactly what it says. You can now cap how wide a legend is allowed to grow, which helps keep layouts under control, especially in dashboards or responsive views.<br><\/p>\n\n\n\n<iframe frameborder=\"0\" scrolling=\"no\" class=\"wp-iframe\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/legend\/maxwidth\"><\/iframe>\n\n\n\n<p><a href=\"https:\/\/api.highcharts.com\/highcharts\/legend.maxWidth\" target=\"_blank\" rel=\"noreferrer noopener\">Check out our API<\/a> for configuration details.\u00a0<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Better support for adaptive themes<\/strong><\/h2>\n\n\n\n<p>We\u2019ve added the <code>color-<\/code> CSS property across our CSS files and our Adaptive theme. This makes it possible to define light and dark theme colors using the CSS <code>light-dark()<\/code> function.<br><\/p>\n\n\n\n<p>The function lets you define a pair of colors for a property (one for light, one for dark) in a single declaration, and the browser automatically selects the appropriate color based on the active <code>color-scheme<\/code>. This eliminates the need to wrap light and dark colors in a <code>prefers-color-scheme<\/code> media query.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>A helpful warning for styled mode<\/strong><\/h2>\n\n\n\n<p>One small change that can save time: if <code>chart.styledMode<\/code> is enabled but the required CSS file isn\u2019t loaded, Highcharts will now tell you, making the problem obvious and reducing confusion.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Wrapping up<\/strong><\/h2>\n\n\n\n<p>Highcharts 12.5 brings new support for dendrograms alongside small but meaningful improvements to layout control and adaptive theming.<\/p>\n\n\n\n<p>For additional bug fixes, take a look at the <a href=\"https:\/\/www.highcharts.com\/changelog\/\" target=\"_blank\" rel=\"noreferrer noopener\">changelog<\/a> and be sure to check out our <a href=\"https:\/\/www.highcharts.com\/demo\" target=\"_blank\" rel=\"noreferrer noopener\">updated demos<\/a>.<\/p>\n\n\n\n<p>As always, if something feels off or you have questions, <a href=\"https:\/\/github.com\/highcharts\/highcharts\/issues\" target=\"_blank\" rel=\"noreferrer noopener\">let us know<\/a> or leave a comment.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Highcharts 12.5 is out and focuses on practical improvements:&nbsp; Let\u2019s dive into the details. Dendrograms now supported You can now create dendrograms by plotting treegraph charts against the x-axis. A dendrogram is a tree-like diagram that visualizes the results of a hierarchical clustering analysis, showing relationships and similarity levels within a group of items. The [&hellip;]<\/p>\n","protected":false},"author":250,"featured_media":29429,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"Highcharts 12.5: Dendrogram Support, Legend Sizing, and Styling Improvements","meta_description":"Highcharts 12.5 introduces support for dendrograms using treegraph charts, a new option for controlling legend width, and improvements to adaptive themes and styled mode.","hc_selected_options":[],"footnotes":""},"categories":[1103],"tags":[1094],"coauthors":[786],"class_list":["post-29396","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-product-updates","tag-highcharts-core"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/29396","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=29396"}],"version-history":[{"count":4,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/29396\/revisions"}],"predecessor-version":[{"id":29431,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/29396\/revisions\/29431"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/29429"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=29396"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=29396"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=29396"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=29396"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}