Product Updates

Highcharts 12.5

by

Nancy Dillon

3 minutes read

Highcharts Core

Highcharts 12.5 is out and focuses on practical improvements:

•
A new way to visualize hierarchical data with dendrograms
•
Finer control over legend layout
•
A simpler approach to light and dark theming

Let’s 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 name comes from two ancient Greek words: δένδρον, meaning “tree,” and γρᾰ́μμᾰ, meaning “that which is drawn.”

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.

This makes dendrograms great for:

•
Visualizing results from hierarchical clustering algorithms
•
Representing taxonomies and classification trees with clear grouping levels
•
Any hierarchy where position along an axis represents similarity, difference, or progression over time

For more info and configuration options, check out the docs.

Control how wide legends can get

Legends are useful. Legends that take over the whole chart…not so much.

Highcharts 12.5 introduces a new option: legend.maxWidth. 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.

Check out our API for configuration details.

Better support for adaptive themes

We’ve added the color- CSS property across our CSS files and our Adaptive theme. This makes it possible to define light and dark theme colors using the CSS light-dark() function.

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 color-scheme. This eliminates the need to wrap light and dark colors in a prefers-color-scheme media query.

A helpful warning for styled mode

One small change that can save time: if chart.styledMode is enabled but the required CSS file isn’t loaded, Highcharts will now tell you, making the problem obvious and reducing confusion.