@internetstiftelsen/charts 0.13.3 → 0.14.0

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.3",
+    "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"
     }
 }