Chart

Install the following dependencies:

• highcharts - v10, v11, or v12
• highcharts-react-official
• @salt-ds/highcharts-theme

Highcharts features such as accessibility, pattern fills, and some chart types are provided through optional modules. The way you load those modules depends on the Highcharts major version you are using.

Import the module and initialize it with your Highcharts instance before rendering charts:

Use the same pattern for other modules such as pattern-fill, heatmap, highcharts-more, stock, and bullet.

From Highcharts v12 onwards, modules auto-initialize upon import:

See the Examples page for chart types that require additional Highcharts modules.

Use the useChart hook to apply the Salt theme to your Highcharts. The hook merges your chart options with the default Salt theme options, and handles density changes automatically.

The useChart hook takes:

• chartRef: A ref object to be attached to the HighchartsReact component
• chartOptions: Your chart-specific options
• config (optional): Additional hook configuration such as { fillPatterns: true } or saltColorAxis

See examples and the Highcharts options documentation for more information.

Use saltColorAxis when your chart needs a Salt-themed colorAxis, such as a heatmap. Pass it as the optional third argument to useChart, and the hook will resolve the color axis using Salt data visualization tokens.

This is useful for common color-axis patterns such as:

• continuous scales for numeric ranges
• threshold scales for values above and below a midpoint
• data classes for named ranges such as low, medium, and high

Semantic classes such as low, moderate, and high, explicit class colors remain at full opacity by default.

When you want labeled numeric bands with the same hue progression, enable dataClassOpacityRamp to apply Salt's standard stepped opacity ramp across the ordered classes.

Use the same opt-in when the bands should keep more than one supplied hue. Salt ramps opacity across the class order while preserving the color assigned to each range.

If you need a specific class to break the default ramp, set opacity on that class directly.

If your chartOptions already include a Highcharts colorAxis, that explicit colorAxis configuration takes precedence over saltColorAxis.

The Salt Highcharts theme provides patterns and fills that can be applied to create visible contrast between series, valuable for users with accessibility needs.

To enable pattern fills, load the Highcharts pattern-fill module using the version-appropriate approach.

For Highcharts v10 and v11:

For Highcharts v12+:

After enabling the Highcharts pattern-fill module, turn on accessibility patterns through useChart when you need a non-color cue in classic mode. Filled series receive pattern fills, while line charts stay on the standard Salt data-viz colors and use the predefined Salt dash-pattern sequence: