Product Updates

Highcharts v12.2

by

Nancy Dillon

3 minutes read

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’s new.

Native color-mix() support

We’ve added support for the browser’s native color-mix() function. By handing off color management to 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’s no conversion layer, transitions and animations between colors are totally under your control. Read more in our docs.

Tooltip Positioning (No JS Required)

You can now fix your tooltip position using two new declarative options: tooltip.fixed and tooltip.position. This gives you precise layout control without the need to write custom positioning code.

New Treemap Layout Options

We’ve added a few new layout options for treemaps that improve clarity and visual organization:

dataLabels.headers enables you to use data labels as a group-level headers, improving the readability of nested data.
groupPadding can be applied to parent elements in order to fine tune the spacing between groups.
nodeSizeBy is an experimental option that determines how to set the size of child nodes when a header or padding is present. When set to “leaf,” the group expands to accommodate headers and padding so that the space between leaves is consistent. When set to “group,” the leaves are naïvely arranged into the remaining space once the header and padding values are subtracted.

Additional Highlights:

ESM Bundles for Dynamic Imports

We’ve added ESM bundles, which makes dynamic imports easier. Whether you’re using native modules in the browser or working in a modern build setup like Webpack, you can now import Highcharts dynamically using standard import 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.

Expanded Null Point Interaction Support

The nullInteraction option now works with the line, spline, area, area-spline, column, bar and timeline series types, so you can annotate or display info about missing data in a way that makes sense to your users.

`foreignObject` for HTML Labels (experimental)

Traditionally, Highcharts renders useHTML labels as regular HTML floating outside the chart, positioned via CSS. This works for simple cases, but fails to deal with z-index of items rendered on top of each other. Cases like that have traditionally required workarounds.

By setting the HTMLElement.useForeignObject option to true, labels using HTML will render inside the SVG, fixing the z-index problems, while also ensuring a simpler DOM structure internally.

Language Modules for select languages

We’ve added language modules for select languages, enabling you to localize chart elements more easily. So if you’ve been rolling your own i18n workarounds, this should simplify things going forward.

Conclusion

Check out the full changelog for additional bug fixes, or head over to the docs to explore these updates in more detail. And as always, if you run into something odd, or have suggestions for what to improve next, let us know.