Highcharts Version 12

We are excited to announce the release of Highcharts version 12.

This release introduces powerful new features, including locale-aware date and number formatting, human-friendly date inputs, and two new Stock series.

We’ve also introduced adaptive text scaling and alignment for chart titles, improved behind-the-scenes data handling and synchronization, and switched to Webpack for smaller, modular builds.

Let’s dive into the details.

Locale-aware dates and numbers

We’ve introduced a new lang.locale option, allowing you to set the locale for all or individual charts on a page. If the locale is not defined, the chart will use the page’s or browser’s language setting.

The lang.locale option determines how to format dates and numbers using the browser’s Intl object. It not only replaces strings like months and weekdays but also constructs entire sentences according to the language setting. For example, en-US formats a date as “January 1, 2025”, while en-GB formats it as “1 January 2025.”

Human-friendly date formats

In JavaScript, dates are stored internally as epoch times, measured in milliseconds since January 1, 1970, and we use functions like new Date or Date.UTC to calculate and present readable dates.

While these functions work, they can be clunky and cumbersome to use. So, in Highcharts v12, we’ve made working with dates much easier by allowing human-friendly strings as inputs.

series: [{
    data: [
        ['2024-01-01', 1],
        ['2024-01-02', 3],
        ['2024-01-03', 2],
        ['2024-01-04', 4]
    ],
    keys: ['x', 'y']
}]

New Stock Series Types

Point and Figure

Point and Figure (P&F) charts are used in technical analysis to represent changes in stock prices, focusing solely on price movements without time and volume.

Xs represent price increases and Os represent price decreases, and a new marker gets added to a column when the price crosses a predetermined threshold known as the boxSize.A new column is created when the price trend reverses by a predetermined amount known as the reversalAmount.

This approach makes it easier to spot breakouts, trends, and potential entry or exit points in the market.

See our docs for more info on the P&F series.

Renko

Renko charts are designed to filter out minor fluctuations and focus solely on significant price movements.

Renko is a Japanese term for “brick,” and the Renko series uses brick-like markers to represent up or down price movements as determined by a predefined amount known as the “brick size.”

A new brick is added only when the price moves in the opposite direction of the previous brick, making it easy to spot trends and reversals.

See our docs for more info on the Renko series.

Additional Updates

Text scaling and adaptive alignment for titles

We’ve improved the alignment of the title, subtitle and context menu button so that their arrangement looks good no matter the title length or chart width.

Short titles will continue to center align. For longer titles that exceed the chart width, the text now scales to fit until it reaches the minScale value set in the chart’s configuration. Once the text scale reaches the minScale value, the text wraps into multiple lines and aligns left, creating a cleaner appearance for long titles.

Series built on DataTable

While this update does not change the way you use Highcharts, it improves chart performance by optimizing integration with complex data sets and improving coordination between synchronized charts, two important features for creating advanced Dashboards. In the near future, it will also simplify the way implementers work with data by enabling direct sharing of data sources between charts and supporting faster typed arrays for data.

Built with Webpack

Highcharts’ distributed files are now built with Webpack. This not only results in a smaller build but also brings more structure, best practices and modularity to our code base.