{"id":30660,"date":"2026-05-21T16:14:44","date_gmt":"2026-05-21T16:14:44","guid":{"rendered":"urn:uuid:28ff265c-1c45-4b57-ac41-1137ab512039"},"modified":"2026-05-21T17:01:01","modified_gmt":"2026-05-21T17:01:01","slug":"highcharts-v13-beta-is-here","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/post\/highcharts-v13-beta-is-here\/","title":{"rendered":"Highcharts v13 Beta Is Here"},"content":{"rendered":"\n<p>Highcharts v13 is now available as a public beta.&nbsp;<\/p>\n\n\n\n<p>This major release is about making charts easier to configure, easier to brand, and harder to make look accidental, and we&#8217;d love for you to try it before the final version lands in early June.&nbsp;<\/p>\n\n\n\n<p>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>Read on for more details.<\/p>\n\n\n\n<p><\/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>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<figure class=\"wp-block-video hs-code-container neutral-50-light neutral-800-dark is-style-decorative-video\" style=\"padding-left:10px\">\n  <video style=\"border-radius:8px;width:100%\" autoplay=\"\" loop=\"\" muted=\"\" playsinline=\"\" src=\"https:\/\/www.highcharts.com\/blog\/wp-content\/uploads\/2026\/05\/pallete_2.mp4\">\n    \n  <\/video>\n<\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>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<p><\/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<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\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<\/div><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>As you can see from the code sample above, 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>.\u00a0<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>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><\/p>\n\n\n\n<p>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><\/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<pre class=\"wp-block-code\"><code>title: {\n    style: {\n        color: 'var(--highcharts-neutral-color-60)'\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\">Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>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>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>The new palette layer replaces the former Adaptive theme.<\/p>\n\n\n\n<p>Additional resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/github.com\/highcharts\/highcharts\/blob\/trettan\/ts\/Core\/Color\/PaletteDefaults.ts\">Palette options<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/highcharts\/highcharts\/blob\/trettan\/docs\/chart-design-and-style\/branding.md\">Branding Highcharts<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/jsfiddle.net\/gh\/get\/library\/pure\/highcharts\/highcharts\/tree\/trettan\/samples\/highcharts\/palette\/general\">Palette options demo<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/jsfiddle.net\/gh\/get\/library\/pure\/highcharts\/highcharts\/tree\/trettan\/samples\/highcharts\/palette\/colorscheme\">Color scheme demo<\/a><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Bring your own data table<\/strong><\/h2>\n\n\n\n<p>Highcharts v13 makes it easy to use tabular data as a data source.&nbsp;<\/p>\n\n\n\n<p>Until now, most charts were configured with series.data, 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<figure class=\"wp-block-video hs-code-container neutral-50-light neutral-800-dark\" style=\"padding-left:10px\"><video style=\"border-radius:8px;width:100%\" autoplay=\"\" loop=\"\" muted=\"\" src=\"https:\/\/www.highcharts.com\/blog\/wp-content\/uploads\/2026\/05\/data-table.mp4\" playsinline=\"\"><\/video><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>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><\/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<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});\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});<\/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\">Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>One table, multiple series, no repeated arrays.&nbsp;<\/p>\n\n\n\n<p>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>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>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.\u00a0<\/p>\n\n\n\n<p><\/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<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\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<\/div><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>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 series.data 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>Additional resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/github.com\/highcharts\/highcharts\/blob\/trettan\/docs\/working-with-data\/using-datatables-in-series.md\">Using DataTables with Series<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/highcharts\/highcharts\/blob\/370ef95f78341e0eedaed694b3bd184da7b3d49f\/ts\/Core\/Options.ts#L323-L356\">Chart-level dataTable<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/highcharts\/highcharts\/blob\/370ef95f78341e0eedaed694b3bd184da7b3d49f\/ts\/Core\/Series\/SeriesOptions.ts#L688-L709\">Series-level dataTable<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/highcharts\/highcharts\/blob\/370ef95f78341e0eedaed694b3bd184da7b3d49f\/ts\/Core\/Series\/SeriesOptions.ts#L614-L678\">series.dataMapping<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/jsfiddle.net\/gh\/get\/library\/pure\/highcharts\/highcharts\/tree\/trettan\/samples\/highcharts\/datatable\/chart-datatable-single\/\">Single chart-level DataTable demo<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/jsfiddle.net\/gh\/get\/library\/pure\/highcharts\/highcharts\/tree\/trettan\/samples\/highcharts\/datatable\/series-datatable\/\">Series-level DataTable demo<\/a><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><\/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>Ever create a bubble chart with no bubbles because you forgot to\u00a0 include <code>highcharts-more.js<\/code>?<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Our new experimental\u00a0<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>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.\u00a0\u00a0<br><\/p>\n\n\n\n<p>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.\u00a0<br><\/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<pre class=\"wp-block-code\"><code>const { default: Highcharts } = await import(\n    'https:\/\/code.highcharts.com\/esm\/highcharts-autoload.js'\n);\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\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<\/div><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>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>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>Additional resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/github.com\/highcharts\/highcharts\/blob\/370ef95f78341e0eedaed694b3bd184da7b3d49f\/ts\/Extensions\/Autoload\/Loader.ts#L151-L181\">Highcharts Loader API<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/highcharts\/highcharts\/blob\/trettan\/docs\/getting-started\/installation.md#autoload-modules\">Installation docs: Autoload modules<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/highcharts\/highcharts\/blob\/trettan\/docs\/getting-started\/installation-with-esm.md#dynamic-imports-from-cdn\">ESM installation docs: Autoload<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/jsfiddle.net\/gh\/get\/library\/pure\/highcharts\/highcharts\/tree\/trettan\/samples\/highcharts\/global\/autoload\/\">UMD autoload demo<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/jsfiddle.net\/gh\/get\/library\/pure\/highcharts\/highcharts\/tree\/trettan\/samples\/highcharts\/global\/autoload-esm\/\">ESM autoload demo<\/a><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>A proper glow-up for gauges<\/strong><\/h2>\n\n\n\n<p>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>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>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>With these smart defaults, out-of-the-box gauge configurations are now very small:<\/p>\n\n\n\n<p><\/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-11a90d1d 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-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:60%\">\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<pre class=\"wp-block-code\"><code>Highcharts.chart('container', {\n    chart: { type: 'gauge' },\n    yAxis: {\n        min: 0,\n        max: 100,\n        plotBands: &#091;\n            {\n                from: 0,\n                to: 70,\n                color: '#d2b4de',\n            },\n            {\n                from: 70,\n                to: 100,\n                color: '#8e44ad',\n            }\n        ]\n    },\n    series: &#091;{ name: 'Score', data: &#091;68] }]\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\">Copy<\/button><\/div>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:40%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"636\" height=\"590\" src=\"https:\/\/www.highcharts.com\/blog\/wp-content\/uploads\/2026\/05\/simple-gauge-636x590.jpg\" alt=\"\" class=\"wp-image-30686\" srcset=\"https:\/\/www.highcharts.com\/blog\/wp-content\/uploads\/2026\/05\/simple-gauge-636x590.jpg 636w, https:\/\/www.highcharts.com\/blog\/wp-content\/uploads\/2026\/05\/simple-gauge-474x440.jpg 474w, https:\/\/www.highcharts.com\/blog\/wp-content\/uploads\/2026\/05\/simple-gauge.jpg 722w\" sizes=\"auto, (max-width: 636px) 100vw, 636px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>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.\u00a0<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>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<figure class=\"wp-block-video hs-code-container neutral-50-light neutral-800-dark\" style=\"padding-left:10px\"><video style=\"border-radius:8px;width:100%\" autoplay=\"\" loop=\"\" muted=\"\" src=\"https:\/\/www.highcharts.com\/blog\/wp-content\/uploads\/2026\/05\/dials.mp4\" playsinline=\"\"><\/video><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Additional resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/jsfiddle.net\/gh\/get\/library\/pure\/highcharts\/highcharts\/tree\/trettan\/samples\/highcharts\/demo\/gauge-inspiration\">Gauge inspiration demo<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/highcharts\/highcharts\/blob\/trettan\/ts\/Extensions\/Pane\/PaneOptions.ts\">Pane options<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/highcharts\/highcharts\/blob\/370ef95f78341e0eedaed694b3bd184da7b3d49f\/ts\/Series\/Gauge\/GaugeSeries.ts#L115-L435\">Gauge options<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/highcharts\/highcharts\/blob\/trettan\/ts\/Series\/SolidGauge\/SolidGaugeSeriesOptions.d.ts\">Solid gauge options<\/a><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><\/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>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>In Highcharts v13, new boundary formatting makes this switchover fully configurable and extended across all time units.<\/p>\n\n\n\n<p><\/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<pre class=\"wp-block-code\"><code>Highcharts.stockChart('container', {\n    xAxis: {\n        dateTimeLabelFormats: {\n            month: { main: '%b' },\n            year: { boundary: '&lt;b&gt;%Y&lt;\/b&gt;' }\n        }\n    },\n    series: &#091;{ data }]\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\">Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image has-custom-border size-full wp-block-video hs-code-container neutral-50-light neutral-800-dark\" style=\"padding-left:10px\"><img loading=\"lazy\" decoding=\"async\" width=\"1160\" height=\"602\" src=\"https:\/\/www.highcharts.com\/blog\/wp-content\/uploads\/2026\/05\/boundary.jpg\" alt=\"\" class=\"wp-image-30692\" style=\"border-top-left-radius:8px;border-top-right-radius:8px;border-bottom-left-radius:8px;border-bottom-right-radius:8px\" srcset=\"https:\/\/www.highcharts.com\/blog\/wp-content\/uploads\/2026\/05\/boundary.jpg 1160w, https:\/\/www.highcharts.com\/blog\/wp-content\/uploads\/2026\/05\/boundary-560x291.jpg 560w, https:\/\/www.highcharts.com\/blog\/wp-content\/uploads\/2026\/05\/boundary-760x394.jpg 760w, https:\/\/www.highcharts.com\/blog\/wp-content\/uploads\/2026\/05\/boundary-768x399.jpg 768w\" sizes=\"auto, (max-width: 1160px) 100vw, 1160px\" \/><\/figure>\n\n\n\n<p><em>In the example above, monthly ticks (\u201cJan,\u201d \u201cFeb,\u201d \u201cMar\u201d) appear in normal-weight font, while the first tick of a new year uses a bolded label.<\/em><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>This works at every resolution: minute ticks can highlight hour boundaries, hourly ticks can highlight days, and so on up the chain.\u00a0There 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><\/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<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\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<\/div><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>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>Additional resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/jsfiddle.net\/gh\/get\/library\/pure\/highcharts\/highcharts\/tree\/trettan\/samples\/highcharts\/xaxis\/labels-boundary\/\">Highcharts boundary labels demo<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/jsfiddle.net\/gh\/get\/library\/pure\/highcharts\/highcharts\/tree\/trettan\/samples\/highcharts\/xaxis\/labels-boundary-format\/\">Boundary labels with labels.format<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/jsfiddle.net\/gh\/get\/library\/pure\/highcharts\/highcharts\/tree\/trettan\/samples\/stock\/xaxis\/labels-boundary\/\">Highcharts Stock boundary labels demo<\/a><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Modern, readable data labels<\/strong><\/h2>\n\n\n\n<p>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>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<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" role=\"region\" aria-label=\"Code block\">\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\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<\/div><\/div>\n\n\n\n<p>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<p><\/p>\n\n\n\n<figure class=\"wp-block-video hs-code-container neutral-50-light neutral-800-dark\" style=\"padding-left:10px\"><video style=\"border-radius:8px;width:100%\" autoplay=\"\" loop=\"\" muted=\"\" src=\"https:\/\/www.highcharts.com\/blog\/wp-content\/uploads\/2026\/05\/datalabels.mp4\" playsinline=\"\"><\/video><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>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>Additional resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/jsfiddle.net\/gh\/get\/library\/pure\/highcharts\/highcharts\/tree\/trettan\/samples\/highcharts\/plotoptions\/series-datalabels-background-contrast\/\">Contrast background in stacked columns<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/jsfiddle.net\/gh\/get\/library\/pure\/highcharts\/highcharts\/tree\/trettan\/samples\/highcharts\/series-pie\/datalabels-background-contrast\/\">Contrast background in pie<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/jsfiddle.net\/gh\/get\/library\/pure\/highcharts\/highcharts\/tree\/trettan\/samples\/highcharts\/plotoptions\/series-datalabels-background-options\/\">Data label background strategies demo<\/a><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Other Design and UX Improvements<\/strong><\/h2>\n\n\n\n<p>Highcharts v13 also includes a handful of smaller \u201chey, that\u2019s cool\u201d changes, the kind users may not name, but will definitely feel:<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<p><\/p>\n\n\n\n<figure class=\"wp-block-video hs-code-container neutral-50-light neutral-800-dark\" style=\"padding-left:10px\"><video style=\"border-radius:8px;width:100%\" autoplay=\"\" loop=\"\" muted=\"\" src=\"https:\/\/www.highcharts.com\/blog\/wp-content\/uploads\/2026\/05\/dynamic.mp4\" playsinline=\"\"><\/video><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><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.<\/li>\n\n\n\n<li><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.<\/li>\n\n\n\n<li><strong>Gantt treegrid facelift.<\/strong> Updated default colors and a tighter fit with the rest of the grid-axis styling.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Try It<\/strong><\/h2>\n\n\n\n<p>This beta phase is the perfect time to test Highcharts v13 with your existing charts and let us know where the edges still feel sharp.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>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\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>npm install highcharts@beta<\/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\">Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Or get the code via jsDelivr:<br><\/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<pre class=\"wp-block-code\"><code><b style=\"font-weight:normal\" id=\"docs-internal-guid-25a2ab43-7fff-0533-0951-accba95aad77\"><span style=\"font-size:11pt;font-family:'Roboto Mono',monospace;color:#188038;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap\">https:\/\/cdn.jsdelivr.net\/npm\/highcharts@beta\/highcharts.js<\/span><\/b><\/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\">Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>The final release is targeted for early June. If something looks off, <a href=\"https:\/\/github.com\/highcharts\/highcharts\/issues\">let us know<\/a>.\u00a0\u00a0<br><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Highcharts v13 is now available as a public beta.&nbsp; This major release is about making charts easier to configure, easier to brand, and harder to make look accidental, and we&#8217;d love for you to try it before the final version lands in early June.&nbsp; Changes include a new palette option, DataTable-based chart data, experimental autoloading [&hellip;]<\/p>\n","protected":false},"author":250,"featured_media":30725,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"Highcharts v13 Beta: Palettes, DataTables, Smarter Labels and More","meta_description":"Highcharts v13 beta 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. Try it before the final June release.","hc_selected_options":[],"footnotes":""},"categories":[224,1103],"tags":[1094],"coauthors":[786,734],"class_list":["post-30660","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\/30660","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=30660"}],"version-history":[{"count":3,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/30660\/revisions"}],"predecessor-version":[{"id":30739,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/30660\/revisions\/30739"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/30725"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=30660"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=30660"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=30660"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=30660"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}