Chart is a visually rich way to represent datasets, built on the Highcharts library to support a wide range of graph types and accessibility features while leveraging well-documented APIs for flexible integration and customization.
Highcharts is a JavaScript library used for creating interactive charts.
| Salt package | @salt-ds/highcharts-theme |
|---|---|
| Available since | 0.1.0 |
| External dependency | highcharts |
| Compatible versions | 10.2.0 || >=11 <13 |
Install the following dependencies:
highcharts- version 10.2.0 specifically, or version 11+highcharts-react-official@salt-ds/highcharts-theme
The Salt Highcharts theme overrides the default Highcharts CSS. To ensure the theme is applied correctly, import the Highcharts CSS before the Salt Highcharts theme CSS.
Note
You can download the Highcharts CSS from the official CDN:
For more information on loading Highcharts CSS, visit the Highcharts docs.
To import the Salt Highcharts theme, use:
Then wrap your Highcharts with highcharts-theme-salt class name as shown below:
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 two parameters:
chartRef: A ref object to be attached to theHighchartsReactcomponentchartOptions: Your chart-specific options
See examples and the Highcharts options documentation for more information.
The Salt Highcharts theme provides patterns and fills that can be applied to create visible contrast between series. This is particularly valuable for users with accessibility needs.
To apply line patterns to line charts, apply the salt-line-patterns class name to the chart container.
To apply fill patterns to charts, for example the donut chart, apply the salt-fill-patterns class name to the chart container.