@internetstiftelsen/charts 0.12.0 → 0.13.0

package/docs/components.md

@@ -224,34 +224,116 @@ charts from one shared legend.
 
 ---
 
-## Title
+## Text
 
-Renders a title for the chart.
+Renders layout-aware text above or below the chart. Use it for titles,
+subtitles, captions, source notes, and other short chart copy.
 
 ```typescript
-new Title({
-    display?: boolean,      // Render title and reserve layout space (default: true)
-    text: string,            // Title text (required)
-    fontSize?: number,       // Font size in pixels (default: 18)
-    fontWeight?: string,     // Font weight (default: 'bold')
-    align?: 'left' | 'center' | 'right',  // Alignment (default: 'center')
-    marginTop?: number,      // Space above title (default: 10)
-    marginBottom?: number,   // Space below title (default: 15)
+new Text({
+    display?: boolean,       // Render text and reserve layout space (default: true)
+    text: string,             // Text content (required)
+    position?: 'top' | 'bottom', // Layout position (default: 'top')
+    variant?: string,         // Theme variant (default: 'caption')
+    align?: 'left' | 'center' | 'right', // Alignment (default: 'center')
+    fontSize?: number,        // Override variant font size
+    fontWeight?: string,      // Override variant font weight
+    fontFamily?: string,      // Override variant font family
+    color?: string,           // Override variant text color
+    lineHeight?: number,      // Override variant line height
+    marginTop?: number,       // Override variant top spacing
+    marginBottom?: number,    // Override variant bottom spacing
 })
 ```
 
 ### Example
 
 ```javascript
+import { Text } from '@internetstiftelsen/charts/text';
+
+chart
+    .addChild(
+        new Text({
+            text: 'Monthly Revenue',
+            variant: 'title',
+            align: 'left',
+        }),
+    )
+    .addChild(
+        new Text({
+            text: 'Revenue by month, SEK',
+            variant: 'subtitle',
+            align: 'left',
+        }),
+    )
+    .addChild(
+        new Text({
+            text: 'Source: Internal reporting',
+            position: 'bottom',
+            variant: 'caption',
+            align: 'left',
+        }),
+    );
+```
+
+Text variants come from `theme.text.variants`. Built-in variants are `title`,
+`subtitle`, and `caption`. Component config overrides the selected variant.
+
+```javascript
+const chart = new XYChart({
+    data,
+    theme: {
+        text: {
+            variants: {
+                source: {
+                    fontSize: 10,
+                    color: '#64748b',
+                    marginTop: 6,
+                    marginBottom: 0,
+                },
+            },
+        },
+    },
+});
+
 chart.addChild(
-    new Title({
-        text: 'Monthly Revenue',
-        align: 'left',
-        fontSize: 20,
+    new Text({
+        text: 'Source: Internetstiftelsen',
+        position: 'bottom',
+        variant: 'source',
     }),
 );
 ```
 
+## Title
+
+`Title` remains available as a compatibility shortcut for top title text:
+
+```typescript
+new Title({
+    display?: boolean,
+    text: string,
+    fontSize?: number,
+    fontWeight?: string,
+    fontFamily?: string,
+    align?: 'left' | 'center' | 'right',
+    color?: string,
+    lineHeight?: number,
+    marginTop?: number,
+    marginBottom?: number,
+})
+```
+
+It maps to the same rendering and layout behavior as:
+
+```javascript
+new Text({
+    text: 'Monthly Revenue',
+    position: 'top',
+    variant: 'title',
+});
+```
+
 ---
 
 ## Export Hooks
@@ -346,12 +428,14 @@ Components are rendered in the order they're added. A typical order:
 
 ```javascript
 chart
-    .addChild(new Title({ text: 'Chart Title' }))
+    .addChild(new Text({ text: 'Chart Title', variant: 'title' }))
+    .addChild(new Text({ text: 'Subtitle', variant: 'subtitle' }))
     .addChild(new Grid({ value: true }))
     .addChild(new XAxis({ dataKey: 'date' }))
     .addChild(new YAxis())
     .addChild(new Tooltip())
     .addChild(new Legend({ position: 'bottom' }))
+    .addChild(new Text({ text: 'Source note', position: 'bottom' }))
     .addChild(new Line({ dataKey: 'value1' }))
     .addChild(new Line({ dataKey: 'value2' }));
 ```

package/docs/donut-chart.md

@@ -176,7 +176,8 @@ new DonutCenterContent({
 DonutChart supports the following components via `addChild()`:
 
 - `DonutCenterContent` - Center text content
-- `Title` - Chart title
+- `Text` - Chart text, captions, and source notes
+- `Title` - Shortcut for top title text
 - `Legend` - Interactive legend (click to toggle segments)
 - `Tooltip` - Hover tooltips with segment info
 

package/docs/gauge-chart.md

@@ -170,6 +170,7 @@ const chart = new GaugeChart({
 
 GaugeChart supports the following components via `addChild()`:
 
-- `Title` - Chart title
+- `Text` - Chart text, captions, and source notes
+- `Title` - Shortcut for top title text
 - `Tooltip` - Hover tooltip (value, target)
 - `Legend` - Segment legend with visibility toggles

package/docs/getting-started.md

@@ -366,5 +366,5 @@ directly when laying out and rendering the cloud.
 - [DonutChart API](./donut-chart.md) - Donut/pie charts
 - [PieChart API](./pie-chart.md) - Pie charts
 - [GaugeChart API](./gauge-chart.md) - Gauge charts
-- [Components](./components.md) - Axes, Grid, Tooltip, Legend, Title
+- [Components](./components.md) - Axes, Grid, Tooltip, Legend, Text, Title
 - [Theming](./theming.md) - Customize colors and styles

package/docs/pie-chart.md

@@ -108,7 +108,8 @@ fit inside its slice is hidden. In `auto` mode, labels that are too tight (based
 
 PieChart supports the following components via `addChild()`:
 
-- `Title` - Chart title
+- `Text` - Chart text, captions, and source notes
+- `Title` - Shortcut for top title text
 - `Legend` - Interactive legend (click to toggle slices)
 - `Tooltip` - Hover/focus tooltips with slice info
 

package/docs/theming.md

@@ -111,6 +111,41 @@ const data = [
 
 ---
 
+## Text Variants
+
+`Text` uses `theme.text.variants` for reusable typography and spacing. Built-in
+variants are `title`, `subtitle`, and `caption`; add custom keys when a chart
+needs another text style.
+
+```javascript
+theme: {
+    text: {
+        variants: {
+            title: {
+                fontSize: 18,
+                fontWeight: 'bold',
+                color: '#1f2a36',
+                lineHeight: 1.2,
+                marginTop: 10,
+                marginBottom: 15,
+            },
+            source: {
+                fontSize: 10,
+                color: '#64748b',
+                lineHeight: 1.3,
+                marginTop: 6,
+                marginBottom: 0,
+            },
+        },
+    },
+}
+```
+
+Component config overrides the chosen variant, so a one-off chart can adjust
+`fontSize`, `color`, or spacing without changing the theme.
+
+---
+
 ## Donut Theme Defaults
 
 DonutChart has additional theme defaults:

package/docs/word-cloud-chart.md

@@ -82,6 +82,7 @@ chart.render('#word-cloud');
 
 ## Supported Components
 
+- `Text`
 - `Title`
 
 `XAxis`, `YAxis`, `Grid`, `Legend`, and `Tooltip` are not used by

package/package.json

@@ -1,5 +1,5 @@
 {
-    "version": "0.12.0",
+    "version": "0.13.0",
     "name": "@internetstiftelsen/charts",
     "type": "module",
     "sideEffects": false,