{"id":30066,"date":"2026-04-16T14:25:28","date_gmt":"2026-04-16T14:25:28","guid":{"rendered":"urn:uuid:2b15d17a-1f23-426d-a9f4-4e3d294cb8fa"},"modified":"2026-04-16T14:25:29","modified_gmt":"2026-04-16T14:25:29","slug":"highcharts-12-6-contour-plots-webgpu-rendering-and-more","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/post\/highcharts-12-6-contour-plots-webgpu-rendering-and-more\/","title":{"rendered":"Highcharts 12.6: Contour Plots, WebGPU Rendering, and More"},"content":{"rendered":"\n<p>We&#8217;re excited to announce Highcharts 12.6. The standout feature of this release is the experimental contour plot,&nbsp; a new series type that renders continuous, color-graded terrain from three-dimensional data directly in the browser.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Contour Plots, Powered by WebGPU<\/strong><\/h2>\n\n\n\n<p><\/p>\n\n\n\n<p>Contour plots are the go-to visualization for scientists, engineers, and analysts working with geospatial data, simulation outputs, or any dataset where you need to express how a value changes across a two-dimensional surface. Think elevation maps, temperature gradients, signal strength heatmaps, or pressure fields.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>What makes this implementation special is the WebGPU rendering engine behind it. Rather than leaning on the CPU or SVG, the contour series offloads computation to the graphics card. The result is silky-smooth re-renders as you adjust parameters in real time.<\/p>\n\n\n\n<p>Use the <code>contourInterval<\/code> and <code>contourOffset<\/code> sliders to watch the chart respond instantaneously, and toggle smoothColoring to see the gradient blend between levels. No janky redraws, no layout flicker. That&#8217;s WebGPU doing its job<\/p>\n\n\n\n<p><\/p>\n\n\n\n<style> \n.wp-iframe {  \n  width: 100%;\nheight: 1040px;\nmin-height: 1040px;\nmax-height: 2000px;\n  border: 2px solid var(--border-color-light,#e3e3e8);\n  border-radius: 8px;\n\n}\n.wp-cropped-iframe {\n  height: 750px !important;\noverflow: hidden;\n  display: block;\n}<\/style><iframe frameborder=\"0\" scrolling=\"no\" class=\"wp-iframe\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/demo\/contour-mountain\"><\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>A note on browser support:<\/strong> WebGPU is not yet universally available across all modern browsers. Check the <a href=\"https:\/\/caniuse.com\/webgpu\" target=\"_blank\" rel=\"noreferrer noopener\">Can I Use WebGPU<\/a> table for the current picture before shipping to production. To get started, load <code>modules\/contour.js<\/code> alongside your Highcharts core file.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>This feature is currently experimental while we\u2019re waiting for full browser support, and we&#8217;d love to hear how you put it to use. See the <a href=\"https:\/\/www.highcharts.com\/docs\/chart-and-series-types\/contour\" target=\"_blank\" rel=\"noreferrer noopener\">contour series docs<\/a> for setup instructions and configuration options.<br><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What Else Is New<\/h2>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Arrow Functions as Callbacks<\/strong><\/h4>\n\n\n\n<p>A long-standing sore spot for modern JavaScript developers: arrow functions don&#8217;t bind <code>this<\/code>, which made using them as Highcharts callbacks awkward.&nbsp;<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>In 12.6, we&#8217;ve resolved this by passing the chart\/series\/point context as a separate argument.<br><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Axis Units for Annotations<\/strong><\/h4>\n\n\n\n<p>When positioning annotation shapes, you can now set <code>xAxis<\/code> and <code>yAxis<\/code> on shapes or <code>shapeOptions<\/code> to have coordinates and dimensions (including <code>width<\/code>, <code>height<\/code>, <code>r<\/code>, and <code>ry<\/code>) interpreted in axis units rather than pixels. This makes annotations dramatically easier to place accurately on scaled or dynamically sized charts.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Tooltip and Crosshair <code>showDelay<\/code><\/strong><\/h4>\n\n\n\n<p>You can now configure a <code>showDelay<\/code> on both tooltips and crosshairs. This is useful for reducing noise on dense charts where fast cursor movement would otherwise trigger a flurry of tooltip appearances.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Anchored Pattern Fills<\/strong><\/h4>\n\n\n\n<p>Pattern fills now support anchoring, giving you stable, predictable alignment when patterns are applied across individual points like columns. This is particularly useful for print-ready and accessible charts where visual consistency matters.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Boost <code>chunkSize <\/code>Option<\/strong><\/h4>\n\n\n\n<p>For boosted charts with large datasets, the new <code>boost.chunkSize<\/code> option lets you fine-tune how tooltip position indexing is processed. If you&#8217;ve been hitting performance ceilings on extremely dense scatter or line series, this will help.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Credits Click Event<\/strong><\/h4>\n\n\n\n<p>A small but useful addition: you can now attach a <code>click<\/code> event callback to the credits element.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Get the Update<\/strong><\/h2>\n\n\n\n<p><\/p>\n\n\n\n<p>Highcharts 12.6 is available now. Grab it from <a href=\"https:\/\/www.npmjs.com\/package\/highcharts\" target=\"_blank\" rel=\"noreferrer noopener\">npm<\/a> or the <a href=\"https:\/\/www.highcharts.com\/blog\/changelog\/download\" target=\"_blank\" rel=\"noreferrer noopener\">download page<\/a>, and see the full <a href=\"https:\/\/www.highcharts.com\/blog\/changelog\/\" target=\"_blank\" rel=\"noreferrer noopener\">changelog<\/a> for the complete list of bug fixes and improvements in this release.<\/p>\n\n\n\n<p>As always, if you run into anything or want to share what you&#8217;ve built&nbsp; (especially with the new contour series) we&#8217;d love to <a href=\"https:\/\/github.com\/highcharts\/highcharts\/issues\" target=\"_blank\" rel=\"noreferrer noopener\">hear from you<\/a>.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Highcharts 12.6 introduces experimental contour plots with WebGPU rendering, plus arrow function callback support, anchored pattern fills, tooltip show delay, and more.<\/p>\n","protected":false},"author":250,"featured_media":30077,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"Highcharts 12.6: Contour Plots with WebGPU Rendering","meta_description":"Highcharts 12.6 introduces experimental contour plots with WebGPU rendering, plus arrow function callback support, anchored pattern fills, tooltip show delay, and more.","hc_selected_options":[],"footnotes":""},"categories":[224,1103],"tags":[1094],"coauthors":[786],"class_list":["post-30066","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\/30066","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=30066"}],"version-history":[{"count":3,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/30066\/revisions"}],"predecessor-version":[{"id":30085,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/30066\/revisions\/30085"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/30077"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=30066"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=30066"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=30066"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=30066"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}