Gauge Facelift for Highcharts v13 - What's Changed?

With Highcharts v13, we have updated the default design and smart defaults for gauge and solid gauge charts. The general look and feel of the gauges has been refreshed, in addition to smarter defaults for pane and axes. The goal is to reduce the amount for configuration needed to make something that looks good, especially since configurations are often created by AI agents.

As a consequence, there are some changes to be aware of when upgrading to v13:

Changes in behavior

The y-axis now does a best guess of the min and max values when none are provided. This means you can create a gauge without specifying an y-axis at all, however it doesn't necessarily provide the range that you expect.
The pane's start and end angles are now -135 and 135 degrees instead of a full circle. This reflects a three-quarter arc layout that is popular for dashboard KPIs.
The pane size is now automatically calculated to fit within the plot area. Previously it was painful to set the right pane.size and pane.center to manually fit it, especially if the start and end values were non-default.
The pane now has size and innerSize options, which are inherited by the pane background, axis plot bands, solid gauge series and grid lines. Previously these elements had to be fitted individually.

Changes in visual design

Circular panes now have a single, solid background
For gauges, the radial axis offset is now -20%, to avoid the tick markers from interfering with the pane background and plot bands.
Gauges and Solid Gauges now inherit the same innerSize from the pane, 80%.

New or changed options in detail

pane.borderRadius: 3 (new global)
pane.innerSize: '85%' auto-applied for angular charts (before: no inner size)
pane.background.shape: 'arc' (was 'circle')
pane.background.borderWidth: 0 (was 1)
pane.background.backgroundColor: neutralColor3 (was linear gradient)
pane.background.outerRadius: '100%' (was '105%')
pane.background.innerRadius: now inherits from innerSize by default (was 0)
pane.thickness: new option, pixel-based ring thickness
pane.margin: new option for auto-fit margin
dial.baseLength: 0 (was '70%'), dial.baseWidth: '18%' (was 3), dial.radius: '70%' (was '80%')
dial.borderRadius: '9%' — new
dial.rearLength: '9%', dial.topWidth: '4%', pivot.radius: '4%' (now all percentage-capable)
pivot.backgroundColor: Palette.backgroundColor (was neutralColor100)
solidgauge.dataLabels.verticalAlign: 'middle' (was none)
Gauge data labels: no border, centered, fontSize: 1.4em
Radial axis defaults: labels.distance: 15 (was -25), minorTicksPerMajor: 10

Highcharts v13 styled as v12

The demos below showcase the compatibility of v13 charts with the v12 design. View this sample's source in jsFiddle or CodePen to inspect the required configuration.

API reference

For more details and live samples, check out the API docs for: