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.0.0 <13 |
Note
To ensure the presentation is accessible, line or fill patterns can be applied to the chart. See Module loading for version-specific Highcharts module setup and Patterns and Fills for details. Use the "Show patterns" switch to toggle patterns.
This package is a WIP. Please check the current issues for known issues/gaps.
Use a line chart to show changes in data over time.
Use a pie chart to show proportions of a whole.
Use a donut chart to show proportions of a whole, with space in the center to highlight key values or additional information.
A donut chart is a variation of the pie chart, with the plotOptions.pie.innerSize set to less than 100% within the Options object.
An innerSize value of 80% is recommended for a good default visual balance.
Use a column chart to compare values across categories. Each category is represented by a single vertical bar.
Use a bar chart to compare values across categories. Bars are shown side-by-side for each series.
Use a stacked bar chart to compare part-to-whole relationships across categories. Each bar shows the total, with segments representing series values.
A stacked bar chart is a variation of the bar chart, with the plotOptions.series.stacking set to normal within the Options object.
Use a waterfall chart to show the cumulative effect of sequential positive and negative values. This is ideal for visualizing financial data, showing how an initial value is affected by a series of changes.
Note
To use the waterfall chart, import the Highcharts highcharts-more module and
use it to wrap the Highcharts object as shown in the example.
Use a candlestick chart to display price movements over time, showing open, high, low, and close values for each period. This chart type is commonly used for financial data visualization.
Note
To use the candlestick chart, import the Highcharts stock module and use it
to wrap the Highcharts object as shown in the example.
Use a bullet chart to show performance against a target across categories. Each category displays a single bar with a marker indicating the target value.
Note
To use the bullet chart, ensure you import the Highcharts bullet module and
use it to wrap the Highcharts object as shown in the example below.
Use a box plot chart to show the distribution of data across different categories, displaying minimum, first quartile, median, third quartile, and maximum values.
A pointWidth value of 40px is recommended for a good default visual balance.
Note
To use the box plot chart, ensure you import the Highcharts highcharts-more
module and use it to wrap the Highcharts object as shown in the example
below.
Use an area chart to show trends over time and the contribution of categories to a total.
Use a scatter chart to show the relationship between two numerical variables.
Use a bubble chart to show the relationship between two variables, with a third variable represented by the size of each bubble.
Note
To use the bubble chart, import the Highcharts highcharts-more module and
use it to wrap the Highcharts object as shown in the example.
Use a heatmap chart to compare values across two categorical axes, with color used to show magnitude.
For heatmap variations such as discrete range legends or two-color banding, see Color axis in the usage guide.
Note
To use the heatmap chart, import the Highcharts heatmap module and use it to
wrap the Highcharts object as shown in the example.