Highcharts

.changeset/breezy-grapes-sit.md

@@ -0,0 +1,7 @@
+---
+"@salt-ds/highcharts-theme": minor
+---
+
+Added Stacked bar chart
+
+To see an example Options object required to configure a basic stacked bar chart, see the examples section.

.changeset/breezy-onions-bow.md

@@ -0,0 +1,7 @@
+---
+"@salt-ds/highcharts-theme": minor
+---
+
+Added Area chart
+
+To see an example Options object required to configure a basic area chart, see the examples section.

.changeset/eager-icons-rule.md

@@ -0,0 +1,7 @@
+---
+"@salt-ds/highcharts-theme": minor
+---
+
+Added Candlestick Chart
+
+To see an example Options object required to configure a basic candlestick chart, see the examples section.

.changeset/green-olives-obey.md

@@ -0,0 +1,35 @@
+---
+"@salt-ds/theme": minor
+---
+
+Added new categorical and sentiment data visualization tokens.
+
+## Category
+
+- `--salt-category-1-dataviz`
+- `--salt-category-2-dataviz`
+- `--salt-category-3-dataviz`
+- `--salt-category-4-dataviz`
+- `--salt-category-5-dataviz`
+- `--salt-category-6-dataviz`
+- `--salt-category-7-dataviz`
+- `--salt-category-8-dataviz`
+- `--salt-category-9-dataviz`
+- `--salt-category-10-dataviz`
+- `--salt-category-11-dataviz`
+- `--salt-category-12-dataviz`
+- `--salt-category-13-dataviz`
+- `--salt-category-14-dataviz`
+- `--salt-category-15-dataviz`
+- `--salt-category-16-dataviz`
+- `--salt-category-17-dataviz`
+- `--salt-category-18-dataviz`
+- `--salt-category-19-dataviz`
+- `--salt-category-20-dataviz`
+
+## Sentiment
+
+- `--salt-positive-dataviz`
+- `--salt-negative-dataviz`
+- `--salt-neutral-dataviz`
+- `--salt-caution-dataviz`

.changeset/hungry-seals-hide.md

@@ -0,0 +1,7 @@
+---
+"@salt-ds/highcharts-theme": minor
+---
+
+Added Bar Chart
+
+To see an example Options object required to configure a basic bar chart, see the examples section.

.changeset/legal-trams-guess.md

@@ -0,0 +1,7 @@
+---
+"@salt-ds/highcharts-theme": minor
+---
+
+Add Bubble Chart
+
+To see an example Options object required to configure a basic bubble chart, see the examples section.

.changeset/quiet-hairs-try.md

@@ -0,0 +1,8 @@
+---
+"@salt-ds/highcharts-theme": minor
+---
+
+- Added PieChart
+- Since DonutChart is a variant of PieChart,the plotOptions.pie.innerSize setting is moved out of the global options; otherwise, a default PieChart would automatically become a DonutChart
+- Consumers are instructed to supply the innerSize setting themselves in documentation.
+- Documentation reordered to show PieChart first due to the above.

.changeset/shiny-frogs-pump.md

@@ -0,0 +1,7 @@
+---
+"@salt-ds/highcharts-theme": minor
+---
+
+Added Bullet Chart
+
+To see an example Options object required to configure a basic bullet chart, see the examples section.

.changeset/tasty-snakes-clean.md

@@ -0,0 +1,11 @@
+---
+"@salt-ds/highcharts-theme": minor
+---
+
+- `useChart` hook is density-aware. When Salt density changes, it triggers a `chart.redraw()` and returns a `legendIconSize` mapped to Salt size tokens, enabling responsive legend symbol sizing.
+- Salt theme defaults (styled mode): 20-color palette, vertical right-aligned legend with consistent spacing, larger title/axis-title margins, and line markers disabled by default.
+- Type compatibility: expose `HighchartsOptionsCompat` so newer fields (e.g. `plotOptions.pie.borderRadius`) type-check while staying assignable to upstream `Options` across Highcharts v10–v12.
+- CSS and usage guidance: import Salt base styles before the Highcharts theme, and wrap charts with `highcharts-theme-salt`; add `salt-fill-patterns` to opt into pattern fills.
+  Example: `import "@salt-ds/theme/index.css"; import "@salt-ds/highcharts-theme/index.css";`
+
+Includes a Donut chart example using `useDensity` + `useChart` to demonstrate density reactivity and optional pattern fills.

.changeset/tidy-radios-watch.md

@@ -0,0 +1,72 @@
+---
+"@salt-ds/highcharts-theme": minor
+---
+
+### Summary
+
+Salt Highcharts theme is a package that supplies the Salt theme for Highcharts. It includes a CSS file for all CSS-based styles, and an options object for styles that are not CSS configurable. Together, they provide a complete theming solution for Highcharts version 10 to version 12.
+
+_Please note, this package is a WIP. Highcharts CSS files and Options object are not finalised._
+
+### Rationale
+
+A theme-only package for Highcharts offers a lightweight solution focused solely on styling, making it easier to maintain and update visual consistency across charts. Unlike a full React wrapper, it doesn't impose additional abstraction layers, allowing developers to leverage Highcharts' native capabilities directly. This approach minimizes overhead and complexity, providing flexibility to integrate with various frameworks or environments without being tied to a specific implementation.
+
+### Supported charts
+
+This package is a work in progress and represents a snapshot release focusing specifically on the LineChart.
+
+Our intent is to gather feedback on the provided solution, allowing us to refine and expand the theme to support additional chart types in future, incremental releases.
+
+### Usage
+
+Please see the package [README.md](https://github.com/jpmorganchase/salt-ds/blob/main/packages/highcharts-theme/README.md) for guidance on usage.
+
+### License
+
+A license is required to use Highcharts.
+
+### Migration
+
+The Salt Highcharts theme replaces previous approaches that bundled a chart wrapper with styling. Because this package contains **only** theme assets (CSS + Highcharts options), you can keep using any Highcharts integration you prefer and simply apply the theme.
+
+**Steps to migrate**
+
+1. **Install the package** (snapshot build, requires Highcharts 10 – 12):
+
+   ```bash
+   # npm
+   npm install @salt-ds/highcharts-theme
+
+   # yarn
+   yarn add @salt-ds/highcharts-theme
+   ```
+
+2. **Import the theme resources** at your application entry point:
+
+   ```ts
+   import "@salt-ds/highcharts-theme/index.css";
+
+   // Salt CSS overrides
+   import Highcharts from "highcharts";
+   import { highchartsOptionsSalt } from "@salt-ds/highcharts-theme";
+
+   // apply global theme options
+   Highcharts.setOptions(highchartsOptionsSalt);
+   ```
+
+3. **Continue using your existing chart code.** For React you might use `highcharts-react-official` (or any other wrapper):
+
+   ```jsx
+   <div className="highcharts-theme-salt">
+     <HighchartsReact highcharts={Highcharts} options={chartOptions} />
+   </div>
+   ```
+
+4. **Merge additional options as required.** Highcharts deep-merges subsequent calls to `Highcharts.setOptions`; you can also combine objects per-chart with `Highcharts.merge()`.
+
+**Things to watch for:**
+
+- This snapshot styles **LineChart** only; other chart types will fall back to default Highcharts styles until future releases.
+- Ensure the Salt CSS is loaded **after** the default Highcharts CSS to guarantee correct specificity.
+- If a previous wrapper injected theme styles automatically, you must now call `Highcharts.setOptions` yourself and add the `highcharts-theme-salt` class to chart containers.

.changeset/true-results-fly.md

@@ -0,0 +1,7 @@
+---
+"@salt-ds/highcharts-theme": minor
+---
+
+Added Box plot chart
+
+To see an example Options object required to configure a basic box plot chart, see the examples section.

.storybook/preview.tsx

@@ -13,6 +13,8 @@ import "@fontsource/open-sans/800.css";
 import "@fontsource/pt-mono";
 import "@salt-ds/theme/css/theme-next.css";
 import "@salt-ds/theme/index.css";
+import "highcharts/css/highcharts.css";
+import "@salt-ds/highcharts-theme/index.css";
 import "./styles.css";
 
 import { SaltProvider, SaltProviderNext } from "@salt-ds/core";

package.json

@@ -15,6 +15,7 @@
     "start": "yarn storybook",
     "build": "yarn workspaces foreach --exclude @salt-ds/site -Apt run build && yarn bundle:css",
     "build:ag-grid-theme": "yarn workspace @salt-ds/ag-grid-theme build",
+    "build:highcharts-theme": "yarn workspace @salt-ds/highcharts-theme build",
     "bundle:css": "yarn bundle:core:css && yarn bundle:lab:css && yarn bundle:embla-carousel:css && yarn copy:icon:css && yarn copy:countries:css",
     "bundle:core:css": "yarn workspace @salt-ds/core bundle:css",
     "bundle:lab:css": "yarn workspace @salt-ds/lab bundle:css",
@@ -29,12 +30,13 @@
     "lint": "biome check",
     "lint:fix": "biome check --fix",
     "lint:check:error": "biome check --diagnostic-level=error",
-    "lint:style": "yarn lint:style:core && yarn lint:style:icon && yarn lint:style:lab && yarn lint:style:ag-theme",
+    "lint:style": "yarn lint:style:core && yarn lint:style:icon && yarn lint:style:lab && yarn lint:style:ag-theme && yarn lint:style:highcharts-theme",
     "lint:style:core": "yarn stylelint -f verbose \"packages/core/src/**/*.css\"",
     "lint:style:icon": "yarn stylelint -f verbose \"packages/icons/src/**/*.css\"",
     "lint:style:lab": "yarn stylelint -f verbose \"packages/lab/src/**/*.css\"",
     "lint:style:embla-carousel": "yarn stylelint -f verbose \"packages/embla-carousel/src/**/*.css\"",
     "lint:style:ag-theme": "yarn stylelint -f verbose \"packages/ag-grid-theme/css/**/*.css\"",
+    "lint:style:highcharts-theme": "yarn stylelint -f verbose \"packages/highcharts-theme/css/**/*.css\"",
     "lint:style:theme": "yarn stylelint -f verbose \"packages/theme/css/**/*.css\"",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "yarn build:ag-grid-theme && yarn bundle:css && storybook build --stats-json",
@@ -79,6 +81,8 @@
     "cypress-real-events": "^1.13.0",
     "deepmerge": "^4.2.2",
     "dom-accessibility-api": "^0.7.0",
+    "highcharts": "10.2.0",
+    "highcharts-react-official": "^3.2.2",
     "mockdate": "^3.0.5",
     "msw": "^2.12.3",
     "msw-storybook-addon": "^2.0.6",

packages/highcharts-theme/README.md

@@ -0,0 +1,64 @@
+# Salt Highcharts Theme
+
+`@salt-ds/highcharts-theme` provides Salt styling and default configuration for [Highcharts](https://www.highcharts.com/).
+
+See the Salt docs for usage, examples, and accessibility guidance: [Chart](https://www.saltdesignsystem.com/salt/components/chart).
+
+## Highcharts support
+
+Compatible with **Highcharts 10.2.0** (specifically) and **Highcharts 11+**.
+
+## License
+
+A Highcharts license is required.
+
+## Installation
+
+```bash
+npm install [email protected] highcharts-react-official @salt-ds/highcharts-theme
+# or
+yarn add [email protected] highcharts-react-official @salt-ds/highcharts-theme
+```
+
+## Quick start
+
+Import Highcharts CSS **before** the Salt theme CSS (see Highcharts docs: [Style by CSS](https://www.highcharts.com/docs/chart-design-and-style/style-by-css)).
+
+- Highcharts v10.2.0 CSS: `https://code.highcharts.com/10.2.0/css/highcharts.css`
+- Highcharts v11+ CSS: `https://code.highcharts.com/your-version/css/highcharts.css`
+
+```jsx
+import Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
+import { useRef } from "react";
+import { useChart } from "@salt-ds/highcharts-theme";
+
+import "@salt-ds/highcharts-theme/index.css";
+
+export function MyChart({ chartOptions }) {
+  const chartRef = useRef(null);
+  const options = useChart(chartRef, chartOptions);
+
+  return (
+    <div className="highcharts-theme-salt">
+      <HighchartsReact
+        ref={chartRef}
+        highcharts={Highcharts}
+        options={options}
+      />
+    </div>
+  );
+}
+```
+
+## Optional container classes
+
+See [Chart usage](https://www.saltdesignsystem.com/salt/components/chart/usage) for details.
+
+- `salt-line-patterns`
+- `salt-fill-patterns`
+- `axes-grid-lines`
+
+## Accessibility
+
+Enable the Highcharts accessibility module (v10 requires initialization; v11+ auto-initializes). See [Chart accessibility](https://www.saltdesignsystem.com/salt/components/chart/accessibility).

packages/highcharts-theme/css/salt-fill-patterns.css

@@ -0,0 +1,97 @@
+/* Pattern fills for pie/donut charts */
+.highcharts-theme-salt.salt-fill-patterns .highcharts-color-0:not(.highcharts-data-label-connector) {
+  fill: url(#diagonal-up);
+}
+
+.highcharts-theme-salt.salt-fill-patterns .highcharts-color-1:not(.highcharts-data-label-connector) {
+  fill: url(#dot);
+}
+
+.highcharts-theme-salt.salt-fill-patterns .highcharts-color-2:not(.highcharts-data-label-connector) {
+  fill: url(#zigzag);
+}
+
+.highcharts-theme-salt.salt-fill-patterns .highcharts-color-3:not(.highcharts-data-label-connector) {
+  fill: url(#vertical-lines);
+}
+
+.highcharts-theme-salt.salt-fill-patterns .highcharts-color-4:not(.highcharts-data-label-connector) {
+  fill: url(#diagonal-down);
+}
+
+.highcharts-theme-salt.salt-fill-patterns .highcharts-color-5:not(.highcharts-data-label-connector) {
+  fill: url(#upward-point);
+}
+
+.highcharts-theme-salt.salt-fill-patterns .highcharts-color-6:not(.highcharts-data-label-connector) {
+  fill: url(#horizontal-lines);
+}
+
+.highcharts-theme-salt.salt-fill-patterns .highcharts-color-7:not(.highcharts-data-label-connector) {
+  fill: url(#crosshatch);
+}
+
+.highcharts-theme-salt.salt-fill-patterns .highcharts-color-8:not(.highcharts-data-label-connector) {
+  fill: url(#net);
+}
+
+.highcharts-theme-salt.salt-fill-patterns .highcharts-color-9:not(.highcharts-data-label-connector) {
+  fill: url(#steps);
+}
+
+.highcharts-theme-salt.salt-fill-patterns .highcharts-color-10:not(.highcharts-data-label-connector) {
+  fill: url(#pavement);
+}
+
+.highcharts-theme-salt.salt-fill-patterns .highcharts-color-11:not(.highcharts-data-label-connector) {
+  fill: url(#scallop);
+}
+
+.highcharts-theme-salt.salt-fill-patterns .highcharts-color-12:not(.highcharts-data-label-connector) {
+  fill: url(#vertical-wave);
+}
+
+.highcharts-theme-salt.salt-fill-patterns .highcharts-color-13:not(.highcharts-data-label-connector) {
+  fill: url(#metal);
+}
+
+.highcharts-theme-salt.salt-fill-patterns .highcharts-color-14:not(.highcharts-data-label-connector) {
+  fill: url(#scales);
+}
+
+.highcharts-theme-salt.salt-fill-patterns .highcharts-color-15:not(.highcharts-data-label-connector) {
+  fill: url(#triangle);
+}
+
+.highcharts-theme-salt.salt-fill-patterns .highcharts-color-16:not(.highcharts-data-label-connector) {
+  fill: url(#horizontal-wave);
+}
+
+.highcharts-theme-salt.salt-fill-patterns .highcharts-color-17:not(.highcharts-data-label-connector) {
+  fill: url(#cage);
+}
+
+.highcharts-theme-salt.salt-fill-patterns .highcharts-color-18:not(.highcharts-data-label-connector) {
+  fill: url(#line-dot);
+}
+
+.highcharts-theme-salt.salt-fill-patterns .highcharts-color-19:not(.highcharts-data-label-connector) {
+  fill: url(#squares);
+}
+
+.highcharts-theme-salt.salt-fill-patterns .highcharts-waterfall-series .highcharts-point,
+.highcharts-theme-salt.salt-fill-patterns .highcharts-candlestick-series .highcharts-point {
+  fill: url(#positive-sentiment);
+}
+
+.highcharts-theme-salt.salt-fill-patterns .highcharts-waterfall-series .highcharts-point.highcharts-negative {
+  fill: url(#negative-sentiment);
+}
+
+.highcharts-theme-salt.salt-fill-patterns .highcharts-candlestick-series .highcharts-point-down {
+  fill: url(#negative-sentiment);
+}
+
+.highcharts-theme-salt.salt-fill-patterns .highcharts-waterfall-series .highcharts-point.highcharts-sum {
+  fill: url(#neutral-sentiment);
+}

packages/highcharts-theme/css/salt-highcharts-compat.css

@@ -0,0 +1,3 @@
+.highcharts-theme-salt .highcharts-legend-item:hover text {
+  fill: var(--salt-content-secondary-foreground);
+}