Share this

Highcharts Version 12

Nancy Dillon Avatar

by

4 minutes read

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.

Stay in touch

No spam, just good stuff

We're on discord. Join us for challenges, fun and whatever else we can think of
XSo MeXSo Me Dark
Linkedin So MeLinkedin So Me Dark
Facebook So MeFacebook So Me Dark
Github So MeGithub So Me Dark
Youtube So MeYoutube So Me Dark
Instagram So MeInstagram So Me Dark
Stackoverflow So MeStackoverflow So Me Dark
Discord So MeDiscord So Me Dark

Comments

  1. Javier Bechir

    |

    the graphics don’t work anymore!.
    What did you do?
    We have a lot of graphics and all website is down because no charts works, The Q Class doesn’t exists more!
    Horror!!


    1. Nancy Dillon

      |

      Thanks for reaching out and letting us know about this issue. Could you gather any browser console logs or error messages that show up when the charts fail to load? This will help us pinpoint what’s happening.

      Once you have that information, please share it with us through our one of our support channels. Our team is ready to dive in and get this sorted for you as quickly as possible.


    2. Myles Harding

      |

      Same for me. 8 years of stable Highcharts that were fine all browsers and Android just stopped being able to scroll. We need to be able to go back to a previous release.


  2. Myles Harding

    |

    Have been using HighCharts around 10 years. All releases have gone without any issue. With Version 12 all my charts load and appear in all browsers on Windows and Android. However the scrollbar bubble panning and zooming is broken on charts with multiple panels. The scrollbar woks as expected on a single panel.


    1. Nancy Dillon

      |

      Hi Myles,
      Thanks for reaching out to us. Our dev team took a look at the issue you described and were unable to reproduce it. If possible, can you gather any console logs or error messages that appear when the charts fail to behave as expected and then reach out to us through one of our support channels? It’s also helpful if you can reproduce the error-causing scenario in an online IDE like JSFiddle. We’re very curious about this issue and want to help you resolve it.


Leave a Reply to Myles Harding Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.