{"id":25750,"date":"2024-11-28T11:07:55","date_gmt":"2024-11-28T11:07:55","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=25750"},"modified":"2026-01-13T11:59:11","modified_gmt":"2026-01-13T11:59:11","slug":"highcharts-version-12","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/product-updates\/highcharts-version-12\/","title":{"rendered":"Highcharts Version 12"},"content":{"rendered":"\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-c5bbea69 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-355c4241 wp-block-group-is-layout-flex\">\n<p>We are excited to announce the release of Highcharts version 12.<\/p>\n\n\n\n<p>This release introduces powerful new features, including locale-aware date and number formatting, human-friendly date inputs, and two new Stock series.<\/p>\n\n\n\n<p>We\u2019ve 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.<\/p>\n\n\n\n<p>Let\u2019s dive into the details.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-346627ba wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\"><b>Locale-aware dates and numbers<\/b><\/h2>\n\n\n\n<p>We\u2019ve introduced a new <a href=\"https:\/\/api.highcharts.com\/highcharts\/lang.locale\"><code>lang.locale<\/code><\/a> 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\u2019s or browser\u2019s language setting.<\/p>\n\n\n\n<p>The lang.locale option determines how to format dates and numbers using the browser\u2019s 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 \u201cJanuary 1, 2025\u201d, while en-GB formats it as \u201c1 January 2025.\u201d<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2024\/11\/22110923\/locale-v2.gif\" alt=\"\" class=\"wp-image-25167\"\/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-346627ba wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\"><strong>Human-friendly date formats<\/strong><\/h2>\n\n\n\n<p>In JavaScript, dates are stored internally as epoch times, measured in milliseconds since January 1, 1970, and we use functions like <code>new Date<\/code> or <code>Date.UTC<\/code> to calculate and present readable dates.<\/p>\n\n\n\n<p>While these functions work, they can be clunky and cumbersome to use. So, in Highcharts v12, we\u2019ve made working with dates much easier by allowing human-friendly strings as inputs.<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container attention-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>series: &#91;{\n    data: &#91;\n        &#91;'2024-01-01', 1],\n        &#91;'2024-01-02', 3],\n        &#91;'2024-01-03', 2],\n        &#91;'2024-01-04', 4]\n    ],\n    keys: &#91;'x', 'y']\n}]<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--white hc-button--size-200\" aria-label=\"Copy\" data-copy-code=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-346627ba wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\"><b>New Stock Series Types<\/b><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><b>Point and Figure<\/b><\/h3>\n\n\n\n<p>Point and Figure (P&amp;F) charts are used in technical analysis to represent changes in stock prices, focusing solely on price movements without time and volume.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>This approach makes it easier to spot breakouts, trends, and potential entry or exit points in the market.<\/p>\n\n\n\n<figure aria-hidden=\"true\" class=\"wp-block-video is-style-decorative-video\"><video controls loop src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2024\/11\/22112503\/point-figure-c.mp4\"><\/video><\/figure>\n\n\n\n<p><a href=\"https:\/\/github.com\/highcharts\/highcharts\/blob\/v12-staging\/docs\/stock\/pointandfigure.md\">See our docs for more info on the P&amp;F series.<\/a><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-346627ba wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\"><b>Renko<\/b><\/h3>\n\n\n\n<p>Renko charts are designed to filter out minor fluctuations and focus solely on significant price movements.<\/p>\n\n\n\n<p>Renko is a Japanese term for &#8220;brick,\u201d and the Renko series uses brick-like markers to represent up or down price movements as determined by a predefined amount known as the \u201cbrick size.\u201d<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<figure aria-hidden=\"true\" class=\"wp-block-video is-style-decorative-video\"><video controls loop src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2024\/11\/22112733\/renko-c.mp4\"><\/video><\/figure>\n\n\n\n<p><a href=\"https:\/\/github.com\/highcharts\/highcharts\/blob\/v12-staging\/docs\/stock\/renko.md\">See our docs for more info on the Renko series.<\/a><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-346627ba wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\"><b>Additional Updates<\/b><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><b>Text scaling and adaptive alignment for titles<\/b><\/h3>\n\n\n\n<p>We\u2019ve 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.<\/p>\n\n\n\n<p>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 <code>minScale<\/code> value set in the chart\u2019s configuration. Once the text scale reaches the <code>minScale<\/code> value, the text wraps into multiple lines and aligns left, creating a cleaner appearance for long titles.<\/p>\n\n\n\n<figure aria-hidden=\"true\" class=\"wp-block-video is-style-decorative-video\"><video controls loop src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2024\/11\/22112557\/alignment.mp4\"><\/video><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-346627ba wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\"><b>Series built on DataTable<\/b><\/h3>\n\n\n\n<p>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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><b>Built with Webpack<\/b><\/h3>\n\n\n\n<p>Highcharts\u2019 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.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-0d72ef2b wp-block-group-is-layout-constrained\" style=\"margin-top:0;margin-bottom:0\">\n<h2 class=\"wp-block-heading\"><strong>Related posts<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.highcharts.com\/blog\/tutorials\/line-chart-vs-bar-chart-choosing-the-right-one-for-your-objectives-and-data\/\">Line chart vs bar chart: choosing the right one for your objectives and data<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.highcharts.com\/blog\/tutorials\/pareto-chart-what-is-it-and-what-does-it-suggest\/\">Pareto chart: what is it and what does it suggest<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.highcharts.com\/blog\/post\/polygon-chart-using-highcharts\/\">Polygon chart using Highcharts<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.highcharts.com\/blog\/post\/heat-map-examples-using-highcharts\/\">Heat map examples using Highcharts<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/data-charting-with-highcharts\/\">Data charting with Highcharts<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/charts-in-javascript-with-highcharts\/\">Charts in JavaScript with Highcharts<\/a><\/li>\n<\/ul>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Highcharts version 12 release details<\/p>\n","protected":false},"author":250,"featured_media":25757,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[1103],"tags":[1094],"coauthors":[786],"class_list":["post-25750","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\/25750","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=25750"}],"version-history":[{"count":2,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/25750\/revisions"}],"predecessor-version":[{"id":28663,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/25750\/revisions\/28663"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/25757"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=25750"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=25750"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=25750"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=25750"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}