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 |
Note
To ensure the presentation is accessible, line or fill patterns can be applied to the chart (see 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.
The axes-grid-lines class name applied to the container enables both vertical and horizontal grid lines.
Use a bubble chart to show the relationship between two variables, with a third variable represented by the size of each bubble.
The axes-grid-lines class name applied to the container enables both vertical and horizontal grid lines.
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.