@internetstiftelsen/charts 0.13.2 → 0.14.0

package/docs/donut-chart.md

@@ -10,17 +10,18 @@ new DonutChart(config: DonutChartConfig)
 
 ### Config Options
 
-| Option       | Type                      | Default   | Description                                                           |
-| ------------ | ------------------------- | --------- | --------------------------------------------------------------------- |
-| `data`       | `DataItem[]`              | required  | Array of data objects                                                 |
-| `width`      | `number`                  | -         | Explicit chart width in pixels                                        |
-| `height`     | `number`                  | -         | Explicit chart height in pixels                                       |
-| `valueKey`   | `string`                  | `'value'` | Key for numeric values in data                                        |
-| `labelKey`   | `string`                  | `'name'`  | Key for segment labels in data                                        |
-| `donut`      | `DonutConfig`             | -         | Donut-specific configuration                                          |
-| `valueLabel` | `DonutValueLabelConfig`   | -         | On-chart outside label/value rendering configuration                  |
-| `theme`      | `DeepPartial<ChartTheme>` | -         | Theme customization                                                   |
-| `responsive` | `ResponsiveConfig`        | -         | Declarative container-query responsive overrides (theme + components) |
+| Option       | Type                              | Default   | Description                                                           |
+| ------------ | --------------------------------- | --------- | --------------------------------------------------------------------- |
+| `data`       | `DataItem[]`                      | required  | Array of data objects                                                 |
+| `width`      | `number`                          | -         | Explicit chart width in pixels                                        |
+| `height`     | `number`                          | -         | Explicit chart height in pixels                                       |
+| `valueKey`   | `string`                          | `'value'` | Key for numeric values in data                                        |
+| `labelKey`   | `string`                          | `'name'`  | Key for segment labels in data                                        |
+| `donut`      | `DonutConfig`                     | -         | Donut-specific configuration                                          |
+| `valueLabel` | `DonutValueLabelConfig`           | -         | On-chart outside label/value rendering configuration                  |
+| `animate`    | `boolean \| DonutAnimationConfig` | `false`   | Opt-in segment animation for initial render and `update()`            |
+| `theme`      | `DeepPartial<ChartTheme>`         | -         | Theme customization                                                   |
+| `responsive` | `ResponsiveConfig`                | -         | Declarative container-query responsive overrides (theme + components) |
 
 ### Donut Config
 
@@ -40,13 +41,50 @@ valueLabel: {
     position?: 'outside' | 'auto', // default: 'auto'
     outsideOffset?: number,        // default: 16
     minVerticalSpacing?: number,   // default: 14
-    formatter?: (label, value, data, percentage) => string, // default: `${label}: ${value}`
+    maxLabelWidth?: number,
+    oversizedBehavior?: 'truncate' | 'wrap' | 'hide', // default: 'truncate'
+    forceVisible?: boolean,        // default: false
+    labelFormatter?: (label, value, data, percentage) => string,
+    valueFormatter?: (label, value, data, percentage) => string,
+    separator?: string,            // default: ': '
+    formatter?: (label, value, data, percentage) => string,
 }
 ```
 
 Donut value labels are rendered outside the ring with leader lines. `auto`
 currently resolves to the same outside placement as `outside`.
 
+By default, donut value labels render as `{label}: {value}`. Use
+`labelFormatter`, `valueFormatter`, and `separator` to customize those parts
+while keeping the label and value structurally separate. When `maxLabelWidth` is
+set, `oversizedBehavior` applies to the label part only, so long labels can be
+truncated, wrapped, or hidden without truncating the value. The `percentage`
+argument is the computed segment share from `0` to `100`.
+
+Use `formatter` for full custom label text. When `formatter` is provided, the
+returned string is treated as a single label and overflow behavior applies to
+that whole string.
+
+Set `forceVisible: true` to keep value labels rendered when
+`oversizedBehavior: 'hide'` would normally hide them.
+
+### Animation Config
+
+```typescript
+animate: boolean | {
+    show?: boolean,        // default: true when object is provided
+    duration?: number,     // default: 700
+    easing?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' |
+        'bounce-out' | 'elastic-out' | 'spring-out' |
+        `linear(${string})` | ((progress: number) => number),
+}
+```
+
+Animation is off by default. When enabled, segments grow from zero length on the
+first render and animate from their previous geometry on `chart.update(...)` and
+legend visibility changes. Use `chart.whenReady()` when surrounding UI or tests
+need to wait until the current animation has finished.
+
 ## Example
 
 ```javascript
@@ -73,8 +111,13 @@ const chart = new DonutChart({
     },
     valueLabel: {
         show: true,
-        formatter: (label, _value, _data, percentage) =>
-            `${label}: ${percentage.toFixed(1)}%`,
+        formatter: (label, _value, _data, percentage) => {
+            return `${label}: ${percentage.toFixed(1)}%`;
+        },
+    },
+    animate: {
+        duration: 700,
+        easing: 'ease-in-out',
     },
 });
 

package/docs/gauge-chart.md

@@ -40,6 +40,7 @@ gauge: {
             | 'ease-in-out'
             | 'bounce-out'
             | 'elastic-out'
+            | 'spring-out'
             | `linear(...)`   // CSS-like piecewise linear easing
             | ((t: number) => number),
     },
@@ -60,6 +61,9 @@ gauge: {
         fontFamily?: string,         // default: theme.axis.fontFamily
         fontWeight?: number | string, // default: 700
         color?: string,              // default: #111827
+        maxLabelWidth?: number,
+        oversizedBehavior?: 'truncate' | 'wrap' | 'hide', // default: 'truncate'
+        forceVisible?: boolean,      // default: false
     },
     needle?: boolean | {
         show?: boolean,       // default: true
@@ -86,6 +90,9 @@ gauge: {
             fontFamily?: string,         // default: theme.axis.fontFamily
             fontWeight?: number | string, // default: theme.axis.fontWeight
             color?: string,              // default: #4b5563
+            maxLabelWidth?: number,
+            oversizedBehavior?: 'truncate' | 'wrap' | 'hide', // default: 'truncate'
+            forceVisible?: boolean,      // default: false
         },
     },
     segments?: [
@@ -99,6 +106,11 @@ gauge: {
 }
 ```
 
+Set `maxLabelWidth` on `valueLabelStyle` or `ticks.labelStyle` to cap rendered
+label width. `oversizedBehavior` controls whether labels over that cap are
+truncated, wrapped, or hidden. Set `forceVisible: true` to keep labels rendered
+when `oversizedBehavior: 'hide'` would normally hide them.
+
 ## Example
 
 ```javascript
@@ -151,6 +163,8 @@ chart.render('#gauge-container');
 
 ## Animation Easing Example
 
+`spring-out` is a duration-based cubic-bezier preset.
+
 ```typescript
 const chart = new GaugeChart({
     data: [{ value: 72 }],

package/docs/pie-chart.md

@@ -10,17 +10,18 @@ new PieChart(config: PieChartConfig)
 
 ### Config Options
 
-| Option       | Type                      | Default   | Description                                                           |
-| ------------ | ------------------------- | --------- | --------------------------------------------------------------------- |
-| `data`       | `DataItem[]`              | required  | Array of data objects                                                 |
-| `width`      | `number`                  | -         | Explicit chart width in pixels                                        |
-| `height`     | `number`                  | -         | Explicit chart height in pixels                                       |
-| `valueKey`   | `string`                  | `'value'` | Key for numeric values in data                                        |
-| `labelKey`   | `string`                  | `'name'`  | Key for segment labels in data                                        |
-| `pie`        | `PieConfig`               | -         | Pie-specific configuration                                            |
-| `valueLabel` | `PieValueLabelConfig`     | -         | On-chart slice label/value rendering configuration                    |
-| `theme`      | `DeepPartial<ChartTheme>` | -         | Theme customization                                                   |
-| `responsive` | `ResponsiveConfig`        | -         | Declarative container-query responsive overrides (theme + components) |
+| Option       | Type                            | Default   | Description                                                           |
+| ------------ | ------------------------------- | --------- | --------------------------------------------------------------------- |
+| `data`       | `DataItem[]`                    | required  | Array of data objects                                                 |
+| `width`      | `number`                        | -         | Explicit chart width in pixels                                        |
+| `height`     | `number`                        | -         | Explicit chart height in pixels                                       |
+| `valueKey`   | `string`                        | `'value'` | Key for numeric values in data                                        |
+| `labelKey`   | `string`                        | `'name'`  | Key for segment labels in data                                        |
+| `pie`        | `PieConfig`                     | -         | Pie-specific configuration                                            |
+| `valueLabel` | `PieValueLabelConfig`           | -         | On-chart slice label/value rendering configuration                    |
+| `animate`    | `boolean \| PieAnimationConfig` | `false`   | Opt-in slice animation for initial render and `update()`              |
+| `theme`      | `DeepPartial<ChartTheme>`       | -         | Theme customization                                                   |
+| `responsive` | `ResponsiveConfig`              | -         | Declarative container-query responsive overrides (theme + components) |
 
 ### Pie Config
 
@@ -45,11 +46,46 @@ valueLabel: {
     outsideOffset?: number,         // default: 16
     insideMargin?: number,          // default: 8
     minVerticalSpacing?: number,    // default: 14
-    formatter?: (label, value, data, percentage) => string, // default: `${label}: ${value}`
+    maxLabelWidth?: number,
+    oversizedBehavior?: 'truncate' | 'wrap' | 'hide', // default: 'truncate'
+    forceVisible?: boolean,         // default: false
+    labelFormatter?: (label, value, data, percentage) => string,
+    valueFormatter?: (label, value, data, percentage) => string,
+    separator?: string,             // default: ': '
+    formatter?: (label, value, data, percentage) => string,
 }
 ```
 
-Rendered pie value-label text defaults to `{label}: {value}` and can be customized with `valueLabel.formatter`. The `percentage` argument is the computed slice share from `0` to `100`.
+Rendered pie value-label text defaults to `{label}: {value}`. Use
+`labelFormatter`, `valueFormatter`, and `separator` to customize those parts
+while keeping the label and value structurally separate. When `maxLabelWidth` is
+set, `oversizedBehavior` applies to the label part only, so long labels can be
+truncated, wrapped, or hidden without truncating the value. The `percentage`
+argument is the computed slice share from `0` to `100`.
+
+Use `formatter` for full custom label text. When `formatter` is provided, the
+returned string is treated as a single label and overflow behavior applies to
+that whole string.
+
+Set `forceVisible: true` to keep value labels rendered when inside-fit checks or
+`oversizedBehavior: 'hide'` would normally hide them.
+
+### Animation Config
+
+```typescript
+animate: boolean | {
+    show?: boolean,        // default: true when object is provided
+    duration?: number,     // default: 700
+    easing?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' |
+        'bounce-out' | 'elastic-out' | 'spring-out' |
+        `linear(${string})` | ((progress: number) => number),
+}
+```
+
+Animation is off by default. When enabled, slices grow from zero length on the
+first render and animate from their previous geometry on `chart.update(...)` and
+legend visibility changes. Use `chart.whenReady()` when surrounding UI or tests
+need to wait until the current animation has finished.
 
 ## Example
 
@@ -76,8 +112,13 @@ const chart = new PieChart({
     valueLabel: {
         show: true,
         position: 'auto',
-        formatter: (label, _value, _data, percentage) =>
-            `${label}: ${percentage.toFixed(1)}%`,
+        formatter: (label, _value, _data, percentage) => {
+            return `${label}: ${percentage.toFixed(1)}%`;
+        },
+    },
+    animate: {
+        duration: 700,
+        easing: 'ease-in-out',
     },
 });
 
@@ -102,7 +143,8 @@ are negative, the chart throws an error because there is nothing to render.
 
 When `valueLabel.position` is `inside`, the formatted value-label text that does not
 fit inside its slice is hidden. In `auto` mode, labels that are too tight (based on
-`insideMargin`) move outside instead.
+`insideMargin`) move outside instead. Set `valueLabel.forceVisible: true` to
+keep inside labels rendered even when they do not fit.
 
 ## Supported Components
 

package/docs/theming.md

@@ -18,7 +18,7 @@ const chart = new XYChart({
             bottom: 40,
             left: 60,
         },
-        colorPalette: ['#ff6b6b', '#4ecdc4', '#45b7d1', '#f7b731'],
+        colorPalette: ['#ff4069', '#c51f46', '#ff7f99', '#ffb3c2'],
         grid: {
             color: '#e0e0e0',
             opacity: 0.5,
@@ -42,9 +42,14 @@ const chart = new XYChart({
 Built-in theme presets are exported from `@internetstiftelsen/charts/theme`:
 
 ```javascript
-import { defaultTheme, newspaperTheme, themes } from '@internetstiftelsen/charts/theme';
+import { defaultTheme, rubyTheme, themes } from '@internetstiftelsen/charts/theme';
 ```
 
+`defaultTheme` uses a mixed Internetstiftelsen palette. Accent presets are available as
+`rubyTheme`, `peacockTheme`, `jadeTheme`, `lemonTheme`, and `oceanTheme`, and
+through the `themes` map as `themes.default`, `themes.ruby`,
+`themes.peacock`, `themes.jade`, `themes.lemon`, and `themes.ocean`.
+
 ## Theme Options
 
 | Option                | Type       | Default                                        | Description                                  |
@@ -75,10 +80,10 @@ The color palette is used for automatic color assignment. Series without explici
 ```javascript
 theme: {
     colorPalette: [
-        '#4ecdc4',  // First series
-        '#ff6b6b',  // Second series
-        '#45b7d1',  // Third series
-        '#f7b731',  // Fourth series
+        '#ff4069',  // First series
+        '#c51f46',  // Second series
+        '#ff7f99',  // Third series
+        '#ffb3c2',  // Fourth series
         // ... continues cycling
     ],
 }
@@ -92,20 +97,20 @@ Override auto-colors by specifying colors directly on series:
 
 ```javascript
 // Lines
-chart.addChild(new Line({ dataKey: 'revenue', stroke: '#00ff00' }));
-chart.addChild(new Line({ dataKey: 'expenses', stroke: '#ff0000' }));
+chart.addChild(new Line({ dataKey: 'revenue', stroke: '#ff4069' }));
+chart.addChild(new Line({ dataKey: 'expenses', stroke: '#c51f46' }));
 
 // Bars
-chart.addChild(new Bar({ dataKey: 'sales', fill: '#4ecdc4' }));
+chart.addChild(new Bar({ dataKey: 'sales', fill: '#ff4069' }));
 ```
 
 For DonutChart, specify colors in the data:
 
 ```javascript
 const data = [
-    { name: 'Desktop', value: 450, color: '#4ecdc4' },
-    { name: 'Mobile', value: 320, color: '#ff6b6b' },
-    { name: 'Tablet', value: 130, color: '#45b7d1' },
+    { name: 'Desktop', value: 450, color: '#ff4069' },
+    { name: 'Mobile', value: 320, color: '#c51f46' },
+    { name: 'Tablet', value: 130, color: '#ff7f99' },
 ];
 ```
 

package/docs/xy-chart.md

@@ -252,6 +252,7 @@ animate: boolean | {
         | 'ease-in-out'
         | 'bounce-out'
         | 'elastic-out'
+        | 'spring-out'
         | `linear(...)`
         | ((t: number) => number),
 }
@@ -261,6 +262,7 @@ Notes:
 
 - Animation is off by default.
 - Animates XY series marks only. Axes, legends, tooltips, and value labels remain static.
+- `spring-out` is a duration-based cubic-bezier preset.
 - Visual exports always render the final static state, even when the live chart is animated.
 
 ## Validation
@@ -344,6 +346,7 @@ new Line({
     },                               // Data point visibility (default: 'always')
     valueLabel?: {
         show?: boolean,
+        forceVisible?: boolean,
         formatter?: (dataKey, value, data) => string
     }                                // Point value badges
 })
@@ -386,6 +389,7 @@ new Scatter({
     pointSize?: number,              // Point radius in pixels (default: theme.line.point.size)
     valueLabel?: {
         show?: boolean,
+        forceVisible?: boolean,
         formatter?: (dataKey, value, data) => string
     }                                // Point value badges
 })
@@ -414,6 +418,7 @@ new Bar({
         show?: boolean,
         position?: 'inside' | 'outside',
         insidePosition?: 'top' | 'middle' | 'bottom',
+        forceVisible?: boolean,
         formatter?: (dataKey, value, data) => string
     }
 })
@@ -543,6 +548,7 @@ new Area({
     showPoints?: boolean,           // Show points on top line (default: false)
     valueLabel?: {
         show?: boolean,
+        forceVisible?: boolean,
         formatter?: (dataKey, value, data) => string
     }                               // Point value badges
 })
@@ -567,6 +573,10 @@ For `Line`, `Scatter`, `Bar`, and `Area`, `valueLabel.formatter` receives
 `(dataKey, value, data)`, where `value` is the parsed numeric series value used
 for rendering that label.
 
+Set `valueLabel.forceVisible: true` to render labels even when automatic fit
+checks would normally hide them, such as tiny stacked bar segments or point
+labels that cannot fit above or below the point.
+
 ### Area Stacking
 
 Area charts support stacking when series share the same `stackId`:

package/package.json

@@ -1,5 +1,5 @@
 {
-    "version": "0.13.2",
+    "version": "0.14.0",
     "name": "@internetstiftelsen/charts",
     "type": "module",
     "sideEffects": false,
@@ -42,45 +42,45 @@
         "xlsx": "^0.18.5"
     },
     "devDependencies": {
-        "@eslint/js": "^9.39.4",
-        "@handsontable/react-wrapper": "^16.2.0",
-        "@internetstiftelsen/styleguide": "^5.1.25",
+        "@eslint/js": "^10.0.1",
+        "@handsontable/react-wrapper": "^17.1.0",
+        "@internetstiftelsen/styleguide": "^5.1.27",
         "@radix-ui/react-label": "^2.1.8",
         "@radix-ui/react-select": "^2.2.6",
         "@radix-ui/react-switch": "^1.2.6",
         "@radix-ui/react-tabs": "^1.1.13",
         "@speed-highlight/core": "^1.2.15",
-        "@tailwindcss/vite": "^4.2.2",
+        "@tailwindcss/vite": "^4.3.0",
         "@testing-library/dom": "^10.4.1",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.2",
         "@types/d3": "^7.4.3",
         "@types/d3-cloud": "^1.2.9",
-        "@types/node": "^24.12.0",
-        "@types/react": "^19.2.14",
+        "@types/node": "^25.9.1",
+        "@types/react": "^19.2.15",
         "@types/react-dom": "^19.2.3",
-        "@vitejs/plugin-react-swc": "^4.3.0",
+        "@vitejs/plugin-react-swc": "^4.3.1",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
-        "eslint": "^9.39.4",
-        "eslint-plugin-react-hooks": "^7.0.1",
-        "eslint-plugin-react-refresh": "^0.4.26",
-        "globals": "^16.5.0",
-        "handsontable": "^16.2.0",
-        "jsdom": "^27.4.0",
-        "lucide-react": "^0.548.0",
-        "prettier": "3.6.2",
+        "eslint": "^10.4.0",
+        "eslint-plugin-react-hooks": "^7.1.1",
+        "eslint-plugin-react-refresh": "^0.5.2",
+        "globals": "^17.6.0",
+        "handsontable": "^17.1.0",
+        "jsdom": "^29.1.1",
+        "lucide-react": "^1.16.0",
+        "prettier": "3.8.3",
         "radix-ui": "^1.4.3",
-        "react": "^19.2.4",
-        "react-dom": "^19.2.4",
-        "sass": "^1.98.0",
-        "tailwind-merge": "^3.5.0",
-        "tailwindcss": "^4.2.2",
-        "tsc-alias": "^1.8.16",
+        "react": "^19.2.6",
+        "react-dom": "^19.2.6",
+        "sass": "^1.100.0",
+        "tailwind-merge": "^3.6.0",
+        "tailwindcss": "^4.3.0",
+        "tsc-alias": "^1.8.17",
         "tw-animate-css": "^1.4.0",
-        "typescript": "~5.9.3",
-        "typescript-eslint": "^8.57.2",
-        "vite": "^7.3.1",
-        "vitest": "^4.1.1"
+        "typescript": "~6.0.3",
+        "typescript-eslint": "^8.59.4",
+        "vite": "^8.0.14",
+        "vitest": "^4.1.7"
     }
 }