{"id":31023,"date":"2026-06-12T10:48:17","date_gmt":"2026-06-12T10:48:17","guid":{"rendered":"urn:uuid:9649ea49-9bb8-46b2-8609-5ecb0e289bc7"},"modified":"2026-06-12T12:59:51","modified_gmt":"2026-06-12T12:59:51","slug":"highcharts-v13-is-here","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/post\/highcharts-v13-is-here\/","title":{"rendered":"Highcharts v13 is here"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Highcharts v13 has officially landed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This major release is about making charts easier to configure, easier to brand, and harder to make look accidental.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Changes include a new <code>palette<\/code> option, <code>DataTable<\/code>-based chart data, experimental autoloading for modules, as well as numerous design and UX refinements that make everyday charts feel more polished.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Read on for more details.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Centralized color management with <\/strong><code>palette<\/code><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Highcharts v13 introduces a new <code>palette<\/code> option that enables you to define a central color system for your entire chart or collection of charts, making branding easier, dark mode cleaner, and the maintenance of large chart libraries less repetitive.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Use <code>palette<\/code> to define your series colors and light and dark mode values for backgrounds, chart elements (axes, titles, labels, etc.) and highlight colors for UI states and more.<\/p>\n\n\n\n<div class=\"wp-block-highsoft-hs-iframe hs-iframe\" style=\"height:1200px\"><div class=\"hs-iframe__container\"><iframe src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/palette\/general \" class=\"hs-iframe__main\" title=\"\" loading=\"lazy\" allowfullscreen scrolling=\"no\"><\/iframe><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">As you can see from the code sample below, the <code>colors<\/code> array for your series and point colors is now an option under <code>palette<\/code>. You can define one shared set and then override individual colors for light or dark mode with <code>palette.light.colors<\/code> and <code>palette.dark.colors<\/code>.&nbsp;<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" role=\"region\" aria-label=\"Code block\">\n\n<pre class=\"wp-block-code\"><code>Highcharts.setOptions({\n    palette: {\n        colors: &#091;'#e32412', '#fadb8b', '#2364b9', '#059649'],\n        light: {\n            backgroundColor: '#f6f5f4',\n            highlightColor: '#e32412'\n        },\n        dark: {\n            backgroundColor: '#1b1918',\n            highlightColor: '#fadb8b'\n        }\n    }\n});\n<\/code><\/pre>\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--white hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\">Copy<\/button><\/div>\n\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There\u2019s also a <code>colorScheme<\/code> option that accepts &#8216;light&#8217;, &#8216;dark&#8217;, &#8216;light dark&#8217;, or &#8216;inherit&#8217; so charts can follow a user\u2019s system preference, inherit from the page, or be pinned to a specific mode.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">At runtime, Highcharts exposes <code>palette<\/code> colors values as CSS variables and applies them to your chart. A nice side effect is that chart-specific styling can now reference CSS vars instead of duplicating hard-coded strings:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" role=\"region\" aria-label=\"Code block\">\n\n<pre class=\"wp-block-code\"><code>title: {\n    style: {\n        color: 'var(--highcharts-neutral-color-60)'\n    }\n}<\/code><\/pre>\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--white hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\">Copy<\/button><\/div>\n\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This kind of change seems modest when dealing with a single chart, but for teams managing dashboards, you&#8217;ll be glad it exists by the time you get to chart number 200.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The best part: designers get a single place to define color, developers get fewer one-off overrides, and users get charts that adapt more naturally to light and dark environments.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The new palette layer replaces the former Adaptive theme.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Additional resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/api.highcharts.com\/highcharts\/palette\" target=\"_blank\" rel=\"noreferrer noopener\">Palette options<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/highcharts\/highcharts\/blob\/master\/docs\/chart-design-and-style\/branding.md\" target=\"_blank\" rel=\"noreferrer noopener\">Branding Highcharts<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.highcharts.com\/samples\/highcharts\/palette\/general\" target=\"_blank\" rel=\"noreferrer noopener\">Palette options demo<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.highcharts.com\/samples\/highcharts\/palette\/colorscheme\" target=\"_blank\" rel=\"noreferrer noopener\">Color scheme demo<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Bring your own data table<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Highcharts v13 makes it easy to use tabular data as a data source.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Until now, most charts were configured with <code>series.data<\/code>, a convenient method for small examples, but awkward when your actual source is a database table, CSV, API response, or shared dashboard dataset.<\/p>\n\n\n\n<div class=\"wp-block-highsoft-hs-iframe hs-iframe\" style=\"height:500px\"><div class=\"hs-iframe__container\"><iframe src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/datatable\/chart-datatable-single \" class=\"hs-iframe__main\" title=\"\" loading=\"lazy\" allowfullscreen scrolling=\"no\"><\/iframe><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Instead of restructuring your source data to fit the series format, the new <code>dataTable<\/code>, <code>series.dataTable<\/code>, and <code>series.dataMapping<\/code> options let map your existing columns directly to chart points.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" role=\"region\" aria-label=\"Code block\">\n\n<pre class=\"wp-block-code\"><code>const dataTable = new Highcharts.DataTable({\n    columns: {\n        Year: &#091;2020, 2021, 2022, 2023],\n        Cost: &#091;11, 13, 12, 14],\n        Revenue: &#091;12, 15, 14, 18]\n    }\n});\nHighcharts.chart('container', {\n    dataTable,\n    plotOptions: {\n        series: {\n            dataMapping: { x: 'Year' }\n        }\n    },\n    series: &#091;\n        { dataMapping: { y: 'Cost' } },\n        { dataMapping: { y: 'Revenue' } }\n    ]\n});\n<\/code><\/pre>\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--white hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\">Copy<\/button><\/div>\n\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">One table, multiple series, no repeated arrays.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mappings shared across series, like the x column, live in <code>plotOptions.series<\/code>, leaving each series to only declare what makes it unique.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If your columns are already named \u2018x,\u2019 \u2018y,\u2019 \u2018name,\u2019 etc., Highcharts will map them automatically. If not, just use the <code>dataMapping<\/code> option to assign them explicitly.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can also attach a table directly to a series with <code>series.dataTable<\/code>, pass either a <code>Highcharts.DataTable<\/code> instance or a configuration object, and use typed arrays for heavier datasets.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" role=\"region\" aria-label=\"Code block\">\n\n<pre class=\"wp-block-code\"><code> series: &#091;{\n        name: 'Options + array',\n        dataTable: {\n            columns: {\n                x: &#091;2026, 2027, 2028, 2029],\n                y: &#091;4, 2, 5, 1],\n                z: &#091;2, 1, 4, 2]\n            }\n        }\n    }, {\n        name: 'Instance + array',\n        dataTable: new DataTable({\n            columns: {\n                x: &#091;2026, 2027, 2028, 2029],\n                y: &#091;3, 6, 5, 7]\n            }\n        })\n    }, {\n        name: 'Options + typed array',\n        dataTable: {\n            columns: {\n                x: new Uint16Array(&#091;2026, 2027, 2028, 2029]),\n                y: new Uint8Array(&#091;6, 4, 7, 3])\n            }\n        }\n    }, {\n        name: 'Instance + typed array',\n        dataTable: new DataTable({\n            columns: {\n                x: new Uint16Array(&#091;2026, 2027, 2028, 2029]),\n                y: new Uint8Array(&#091;9, 5, 9, 4])\n            }\n        })\n    }]<\/code><\/pre>\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--white hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\">Copy<\/button><\/div>\n\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There&#8217;s a performance angle too. When used with the Boost module, configuring data through a DataTable with TypedArray columns is about 20% faster than <code>series.data<\/code> in a 500k-point chart. That\u2019s a big payoff for a tiny syntax change, especially when data-heavy dashboards are involved.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Additional resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/github.com\/highcharts\/highcharts\/blob\/master\/docs\/working-with-data\/using-datatables-in-series.md\" target=\"_blank\" rel=\"noreferrer noopener\">Using DataTables with Series<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/api.highcharts.com\/highcharts\/dataTable\" target=\"_blank\" rel=\"noreferrer noopener\">Chart-level dataTable<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/api.highcharts.com\/highcharts\/series.line.dataMapping\" target=\"_blank\" rel=\"noreferrer noopener\">series.dataMapping<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.highcharts.com\/samples\/highcharts\/datatable\/chart-datatable-single\" target=\"_blank\" rel=\"noreferrer noopener\">Single chart-level DataTable demo<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.highcharts.com\/samples\/highcharts\/datatable\/series-datatable\" target=\"_blank\" rel=\"noreferrer noopener\">Series-level DataTable demo<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Experimental Autoload: a patient friend who finds the missing pieces<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ever create a bubble chart with no bubbles because you forgot to&nbsp; include <code>highcharts-more.js<\/code>?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Our new experimental&nbsp;<code>highcharts-autoload.js<\/code> bundle solves this problem by inspecting your chart options and loading the required modules before your chart renders.<br><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This is especially useful when chart options are assembled dynamically: from a CMS, a chart editor, a saved dashboard configuration, or a friendly LLM that enthusiastically suggests a more exotic chart type but spaces out on the required modules.&nbsp;&nbsp;<br><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, in the ESM build setup below, the configuration includes features that normally require additional modules (bubble series, exporting and accessibility.) Autoload resolves those dependencies asynchronously, then creates the chart.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" role=\"region\" aria-label=\"Code block\">\n\n<pre class=\"wp-block-code\"><code>const { default: Highcharts } = await import(\n    'https:\/\/code.highcharts.com\/esm\/highcharts-autoload.js'\n);\nawait Highcharts.chart('container', {\n    chart: { type: 'bubble' },\n    exporting: { enabled: true },\n    accessibility: { enabled: true },\n    series: &#091;{\n        data: &#091;&#091;1, 2, 10], &#091;2, 3, 15], &#091;3, 1, 8]]\n    }]\n});<\/code><\/pre>\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--white hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\">Copy<\/button><\/div>\n\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And Autoload does more than fetch required modules. If your configuration uses <code>styledMode<\/code> or includes Stock Tools, Autoload will pull in all the necessary CSS and UI dependencies too.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Of course, Autoload isn&#8217;t meant to replace deliberate bundling. If you know exactly which modules your product uses, a regular build still gives you full control.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Additional resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/api.highcharts.com\/class-reference\/Highcharts.Loader\" target=\"_blank\" rel=\"noreferrer noopener\">Highcharts Loader API<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/highcharts\/highcharts\/blob\/master\/docs\/getting-started\/installation-with-esm.md#dynamic-imports-from-cdn\" target=\"_blank\" rel=\"noreferrer noopener\">ESM installation docs: Autoload<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>A proper glow-up for gauges<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you&#8217;ve ever created a modern-looking gauge with Highcharts, you&#8217;ve probably accumulated a small bag of tricks: where to place the pane, how wide the arc should be, and how to shape the dial.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In Highcharts v13, the defaults handle more of that work with one goal in mind: to make gauges look good before you touch a single option.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Panes fit the plot area more intelligently, gauge labels are positioned in accordance with the circular layout, and the default dial looks much closer to something you&#8217;d actually ship.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">With these smart defaults, out-of-the-box gauge configurations are now very small:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div class=\"wp-block-columns has-border-color has-neutral-0-background-color has-background is-layout-flex wp-container-core-columns-is-layout-4c81b763 wp-block-columns-is-layout-flex\" style=\"border-color:var(--primitives-neutral-100);border-width:1px;border-top-left-radius:12px;border-top-right-radius:12px;border-bottom-left-radius:12px;border-bottom-right-radius:12px;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>Highcharts.chart('container', {\n    title: {\n        text: 'Solid Gauge and Gauge combo'\n    },\n    yAxis: {\n        min: 0,\n        max: 100,\n        stops: &#91;\n            &#91;0.3, '#55BF3B'],\n            &#91;0.7, '#DDDF0D'],\n            &#91;0.9, '#DF5353']\n        ]\n    },\n    series: &#91;{\n        type: 'solidgauge',\n        name: 'Target',\n        data: &#91;60],\n        dataLabels: {\n            enabled: false\n        }\n    }, {\n        type: 'gauge',\n        name: 'Current',\n        data: &#91;70]\n    }]\n});\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\" data-copy-code=\"true\" aria-label=\"Copy\"><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-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<div class=\"wp-block-highsoft-hs-iframe hs-iframe\" style=\"height:500px\"><div class=\"hs-iframe__container\"><iframe src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/series-gauge\/solidgauge-combo \" class=\"hs-iframe__main\" title=\"\" loading=\"lazy\" allowfullscreen scrolling=\"no\"><\/iframe><\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">From here, you can layer on the parts that carry business meaning: plot bands for ranges, <code>pane.innerSize<\/code> for a ring layout, <code>pane.borderRadius<\/code> for rounded arc ends, or a <code>solidgauge<\/code> series for KPI and progress-style displays.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Our gauge inspiration demo (essentially a gauge mood board) shows an array of possibilities, from default gauges to concentric KPI rings to custom dial paths.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div class=\"wp-block-highsoft-hs-iframe hs-iframe\" style=\"height:1500px\"><div class=\"hs-iframe__container\"><iframe src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/demo\/gauge-inspiration \" class=\"hs-iframe__main\" title=\"\" loading=\"lazy\" allowfullscreen scrolling=\"no\"><\/iframe><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Additional resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.highcharts.com\/demo\/highcharts\/gauge-inspiration\" target=\"_blank\" rel=\"noreferrer noopener\">Gauge inspiration demo<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/api.highcharts.com\/highcharts\/pane\" target=\"_blank\" rel=\"noreferrer noopener\">Pane options<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/api.highcharts.com\/highcharts\/series.gauge\" target=\"_blank\" rel=\"noreferrer noopener\">Gauge options<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/api.highcharts.com\/highcharts\/series.solidgauge\" target=\"_blank\" rel=\"noreferrer noopener\">Solid gauge options<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Datetime axes that know where you are in time<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">For a while, Highcharts has used an internal &#8220;higher ranks&#8221; logic for labels, where years rank higher than months, months higher than days, etc. For example, when a Highcharts Stock chart crosses into a new year, month-based labels may switch over to years since the higher-ranked unit takes precedence.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In Highcharts v13, new boundary formatting makes this switchover fully configurable and extended across all time units.<\/p>\n\n\n\n<div class=\"wp-block-highsoft-hs-iframe hs-iframe\" style=\"height:700px\"><div class=\"hs-iframe__container\"><iframe src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/xaxis\/labels-boundary\" class=\"hs-iframe__main\" title=\"\" loading=\"lazy\" allowfullscreen scrolling=\"no\"><\/iframe><\/div><\/div>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>Highcharts.chart('container', {\n    title: {\n        text: 'Demo of axis label boundary'\n    },\n    xAxis: {\n        dateTimeLabelFormats: {\n            month: {\n                main: '%b'\n            },\n            year: {\n                boundary: '%b&lt;br&gt;%Y'\n            }\n        },\n        type: 'datetime'\n    },\n    plotOptions: {\n        series: {\n            pointIntervalUnit: 'month',\n            pointStart: '2026-01-01'\n        }\n    },\n    series: &#91;{\n        data: &#91;1, 3, 2, 6, 3, 5, 7, 5, 1, 2, 3, 2],\n        pointInterval: 2\n    }]\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\" data-copy-code=\"true\" aria-label=\"Copy\"><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\n\n\n<p class=\"wp-block-paragraph\">This works at every resolution: minute ticks can highlight hour boundaries, hourly ticks can highlight days, and so on up the chain.&nbsp;There is also a templating route where axis labels have a \u201cboundary\u201d value in their formatting context, so you can branch directly in <code>labels.format<\/code>:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" role=\"region\" aria-label=\"Code block\">\n\n<pre class=\"wp-block-code\"><code>xAxis: {\n    labels: {\n        format: `{#if (eq boundary \"month\")}\n            {value:%b &lt;b&gt;%Y&lt;\/b&gt;}\n        {else}\n            {value:%e %b}\n        {\/if}`\n    }\n}<\/code><\/pre>\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--white hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\">Copy<\/button><\/div>\n\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It\u2019s the same helpful &#8220;new section starts here&#8221; behavior, now explicitly defined in the chart configuration rather than a hidden heuristic.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Additional resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.highcharts.com\/samples\/highcharts\/xaxis\/labels-boundary\" target=\"_blank\" rel=\"noreferrer noopener\">Highcharts boundary labels demo<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.highcharts.com\/samples\/highcharts\/xaxis\/labels-boundary-format\" target=\"_blank\" rel=\"noreferrer noopener\">Boundary labels with labels.format<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.highcharts.com\/samples\/stock\/xaxis\/labels-boundary\" target=\"_blank\" rel=\"noreferrer noopener\">Highcharts Stock boundary labels demo<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Modern, readable data labels<\/strong> and tooltips<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Highcharts has always helped data label readability by defaulting to contrasting text color and applying text outlines where appropriate.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">But in Highcharts v13, we\u2019ve come up with a calmer option: dataLabels.backgroundColor that can now be set to \u201ccontrast.\u201d<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" role=\"region\" aria-label=\"Code block\">\n\n<pre class=\"wp-block-code\"><code>plotOptions: {\n    column: {\n        stacking: 'normal',\n        dataLabels: {\n            enabled: true,\n            inside: true,\n            backgroundColor: 'contrast',\n            style: { textOutline: 'none' }\n        }\n    }\n}<\/code><\/pre>\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--white hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\">Copy<\/button><\/div>\n\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Set it to &#8216;contrast&#8217; to add a plain, semi-transparent background behind each label, giving the text a stable reading surface regardless of what&#8217;s underneath. This is especially useful for stacked columns, pies and maps where labels appear over a wide variety of colors.<\/p>\n\n\n\n<div class=\"wp-block-highsoft-hs-iframe hs-iframe\" style=\"height:500px\"><div class=\"hs-iframe__container\"><iframe src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/plotoptions\/series-datalabels-background-options \" class=\"hs-iframe__main\" title=\"\" loading=\"lazy\" allowfullscreen scrolling=\"no\"><\/iframe><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The related <code>dataLabels.distance<\/code> option has also been generalized to apply across more series types, making it easier to nudge labels without series-specific workarounds.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tooltips get some attention too. The new <code>tooltip.header<\/code> options set gives you better control over the header design in split tooltips, where the header appears as its own label along the x-axis.<\/p>\n\n\n\n<div class=\"wp-block-highsoft-hs-iframe hs-iframe\" style=\"height:850px\"><div class=\"hs-iframe__container\"><iframe src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/tooltip\/header\" class=\"hs-iframe__main\" title=\"\" loading=\"lazy\" allowfullscreen scrolling=\"no\"><\/iframe><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Additional resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.highcharts.com\/samples\/highcharts\/plotoptions\/series-datalabels-background-contrast\" target=\"_blank\" rel=\"noreferrer noopener\">Contrast background in stacked columns<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.highcharts.com\/samples\/highcharts\/series-pie\/datalabels-background-contrast\" target=\"_blank\" rel=\"noreferrer noopener\">Contrast background in pie<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.highcharts.com\/samples\/highcharts\/plotoptions\/series-datalabels-background-options\" target=\"_blank\" rel=\"noreferrer noopener\">Data label background strategies demo<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Other Design and UX Improvements<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Highcharts v13 also includes a handful of smaller \u201chey, that\u2019s cool\u201d changes, the kind users may not name, but will definitely feel:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Smoother point animations.<\/strong> Points now fade in and out from the correct position in the coordinate system when added, removed, or updated, resulting in a noticeable cleaner impression in dynamic charts.<\/p>\n\n\n\n<div class=\"wp-block-highsoft-hs-iframe hs-iframe\" style=\"height:500px\"><div class=\"hs-iframe__container\"><iframe src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/members\/series-addpoint-shift-column \" class=\"hs-iframe__main\" title=\"\" loading=\"lazy\" allowfullscreen scrolling=\"no\"><\/iframe><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Better legend symbols.<\/strong> Symbols now more accurately reflect the actual styling of their series, making legends more useful as visual keys rather than decorative labels.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Rounded plot area corners.<\/strong> Setting chart.plotBorderRadius gives cartesian charts and maps a softer frame, with axes, plot bands, and grid lines clipped to match.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Gantt treegrid facelift.<\/strong> Updated default colors and a tighter fit with the rest of the grid-axis styling.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Upgrade Notes<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A few changes in v13 may affect existing charts. Here&#8217;s what to check when upgrading:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Gauges and polar charts look different.<\/strong> The default pane layout and design have gone through a major facelift. See the <a href=\"https:\/\/www.highcharts.com\/samples\/highcharts\/pane\/v12-design-compatibility\">v12 pane design compatibility guide<\/a> for details and how to restore previous styling if needed.<\/li>\n\n\n\n<li><strong>Data sorting now requires its own module.<\/strong> If you use the dataSorting feature, you&#8217;ll need to include the modules\/data-sorting.js file.<\/li>\n\n\n\n<li><strong>Solid gauge <\/strong><strong>radius<\/strong><strong> and <\/strong><strong>innerRadius<\/strong><strong> resolve differently.<\/strong> Numeric values defined at series or point level are now treated as pixels, not percentages, consistent with other Highcharts options. To use a percentage, pass a string like radius: &#8216;50%&#8217;.<\/li>\n\n\n\n<li><strong>Default data label positions have shifted slightly.<\/strong> Label distance from the point or column is now controlled by the new dataLabels.distance option rather than padding adjusted by x and y.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong><strong>Get the Update<\/strong><\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Highcharts 13 is available now. Install via npm:<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>npm install highcharts --save<\/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\" data-copy-code=\"true\" aria-label=\"Copy\"><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\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Or visit our <a href=\"https:\/\/www.highcharts.com\/blog\/changelog\/download\">download page<\/a> for more options.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As always, if you run into anything or have any questions, <a href=\"https:\/\/github.com\/highcharts\/highcharts\/issues\">let us know<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Explore what&#8217;s new including a central palette system, DataTable support, autoloading modules, redesigned gauges, smarter datetime labels, and more readable data labels.<\/p>\n","protected":false},"author":250,"featured_media":31043,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"Highcharts v13: Palettes, DataTables, Smarter Labels and More","meta_description":"Highcharts v13 is available now. Explore what's new including a central palette system, DataTable support, autoloading modules, redesigned gauges, smarter datetime labels, and more readable data labels.","hc_selected_options":[],"footnotes":""},"categories":[224,1103],"tags":[1094],"coauthors":[786,734],"class_list":["post-31023","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-post","category-product-updates","tag-highcharts-core"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/31023","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=31023"}],"version-history":[{"count":4,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/31023\/revisions"}],"predecessor-version":[{"id":31051,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/31023\/revisions\/31051"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/31043"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=31023"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=31023"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=31023"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=31023"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}