@internetstiftelsen/charts 0.12.0 → 0.13.1

package/dist/types.d.ts

@@ -69,6 +69,9 @@ export type ChartTheme = {
         itemSpacingX: number;
         itemSpacingY: number;
     };
+    text: {
+        variants: Record<string, TextVariantStyle>;
+    };
     tooltip: {
         background: string;
         border: string;
@@ -181,16 +184,25 @@ export type ValueLabelConfig = {
 export type LineValueLabelConfig = ValueLabelConfig & {
     show?: boolean;
 };
+export type LinePointVisibility = 'always' | 'hover' | 'never';
+export type LinePointsConfig = {
+    show?: LinePointVisibility;
+};
 export type BarValueLabelConfig = ValueLabelConfig & {
     show?: boolean;
     position?: 'inside' | 'outside';
     insidePosition?: 'top' | 'middle' | 'bottom';
 };
 export type BarSide = 'left' | 'right';
+export type CurveType = 'linear' | 'monotone' | 'step' | 'natural' | 'basis' | 'cardinal';
+export type LineCurveType = CurveType;
+export type AreaCurveType = CurveType;
 export type LineConfigBase = {
     dataKey: string;
     stroke?: string;
     strokeWidth?: number;
+    curve?: LineCurveType;
+    points?: LinePointsConfig;
     valueLabel?: LineValueLabelConfig;
 };
 export type LineConfig = LineConfigBase & {
@@ -216,7 +228,6 @@ export type BarConfigBase = {
 export type BarConfig = BarConfigBase & {
     exportHooks?: ExportHooks<BarConfigBase>;
 };
-export type AreaCurveType = 'linear' | 'monotone' | 'step' | 'natural' | 'basis' | 'cardinal';
 export type AreaConfigBase = {
     dataKey: string;
     fill?: string;
@@ -333,13 +344,43 @@ export type LegendItem = {
     color: string;
     visible: boolean;
 };
+export type TextPosition = 'top' | 'bottom';
+export type TextAlign = 'left' | 'center' | 'right';
+export type TextVariantStyle = {
+    fontSize?: number;
+    fontWeight?: string;
+    fontFamily?: string;
+    color?: string;
+    lineHeight?: number;
+    marginTop?: number;
+    marginBottom?: number;
+};
+export type TextConfigBase = {
+    display?: boolean;
+    text: string;
+    position?: TextPosition;
+    variant?: string;
+    align?: TextAlign;
+    fontSize?: number;
+    fontWeight?: string;
+    fontFamily?: string;
+    color?: string;
+    lineHeight?: number;
+    marginTop?: number;
+    marginBottom?: number;
+};
+export type TextConfig = TextConfigBase & {
+    exportHooks?: ExportHooks<TextConfigBase>;
+};
 export type TitleConfigBase = {
     display?: boolean;
     text: string;
     fontSize?: number;
     fontWeight?: string;
     fontFamily?: string;
-    align?: 'left' | 'center' | 'right';
+    align?: TextAlign;
+    color?: string;
+    lineHeight?: number;
     marginTop?: number;
     marginBottom?: number;
 };

package/docs/chart-group.md

@@ -18,7 +18,7 @@ new ChartGroup(config: ChartGroupConfig)
 | `syncY`       | `boolean`                         | `false`                | Sync the Y domain across visible vertical `XYChart` children                |
 | `height`      | `number`                          | container height       | Fixed total group height. Omit it to size from the container                |
 | `chartHeight` | `number`                          | `DEFAULT_CHART_HEIGHT` | Fallback child height when neither the child nor container provides one     |
-| `theme`       | `DeepPartial<ChartTheme>`         | -                      | Theme override for the shared group legend and title                        |
+| `theme`       | `DeepPartial<ChartTheme>`         | -                      | Theme override for the shared group legend and text                         |
 | `responsive`  | `ChartGroupResponsiveConfig`      | -                      | Declarative responsive overrides for group-level `cols` and `gap`           |
 
 `ChartGroup` manages child widths. If a child chart has an explicit `width`,
@@ -32,6 +32,7 @@ import { XYChart } from '@internetstiftelsen/charts/xy-chart';
 import { Line } from '@internetstiftelsen/charts/line';
 import { Bar } from '@internetstiftelsen/charts/bar';
 import { Legend } from '@internetstiftelsen/charts/legend';
+import { Text } from '@internetstiftelsen/charts/text';
 import { Title } from '@internetstiftelsen/charts/title';
 
 const lineChart = new XYChart({ data: lineData });
@@ -53,6 +54,13 @@ const group = new ChartGroup({
 
 group
     .addChild(new Title({ text: 'Revenue vs Expenses' }))
+    .addChild(
+        new Text({
+            text: 'Source: finance team',
+            position: 'bottom',
+            variant: 'caption',
+        }),
+    )
     .addChart(barChart, { span: 1 })
     .addChart(lineChart, { span: 2 })
     .addChild(new Legend());
@@ -165,13 +173,21 @@ After a breakpoint's `maxWidth`, that breakpoint stops matching. Use the base
 group config plus `minWidth` breakpoints for mobile-first layouts, or the base
 group config plus `maxWidth` breakpoints for desktop-down layouts.
 
-## Title
+## Text and Title
 
-`ChartGroup` accepts `Title` via `addChild()` and renders it above the grouped
-chart layout:
+`ChartGroup` accepts `Text` and `Title` via `addChild()`. Top text renders above
+the grouped chart layout. Bottom text renders below the grouped chart layout and
+shared legend:
 
 ```typescript
 group.addChild(new Title({ text: 'Revenue vs Expenses' }));
+group.addChild(
+    new Text({
+        text: 'Source: finance team',
+        position: 'bottom',
+        variant: 'caption',
+    }),
+);
 ```
 
 ## Legend
@@ -208,6 +224,9 @@ await group.export('pdf');
 
 - Export width can be overridden with `options.width`
 - Export height is layout-derived in v1 and cannot be overridden
-- Group titles are included in the combined export
+- Group text is included in the combined export
+- Group-level `Text` and `Title` export hooks run during visual export, so text
+  can be hidden live with `display: false` and included only in export by
+  returning `{ display: true }` from `beforeRender`
 - Child chart legends are suppressed in the combined export
 - Non-visual exports (`json`, `csv`, `xlsx`) are not supported in v1

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/docs/xy-chart.md

@@ -338,6 +338,10 @@ new Line({
     dataKey: string,                 // Key in data objects for Y values (required)
     stroke?: string,                 // Line color (auto-assigned if omitted)
     strokeWidth?: number,            // Line width in pixels (default: 2)
+    curve?: 'linear' | 'monotone' | 'step' | 'natural' | 'basis' | 'cardinal',
+    points?: {
+        show?: 'always' | 'hover' | 'never'
+    },                               // Data point visibility (default: 'always')
     valueLabel?: {
         show?: boolean,
         formatter?: (dataKey, value, data) => string
@@ -355,8 +359,20 @@ chart.addChild(new Line({ dataKey: 'expenses' }));
 // Manual colors
 chart.addChild(new Line({ dataKey: 'revenue', stroke: '#00ff00' }));
 chart.addChild(new Line({ dataKey: 'expenses', stroke: '#ff0000' }));
+
+// Smooth line interpolation
+chart.addChild(new Line({ dataKey: 'revenue', curve: 'monotone' }));
+
+// Show point circles only while hovering or focusing a tooltip target
+chart
+    .addChild(new Line({ dataKey: 'revenue', points: { show: 'hover' } }))
+    .addChild(new Tooltip());
 ```
 
+`points.show: 'hover'` uses `Tooltip` focus markers, so add a `Tooltip`
+component when hover-only points should be visible. Use `'never'` to suppress
+both static line points and tooltip focus markers for that line.
+
 ---
 
 ## Scatter

package/package.json

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