@internetstiftelsen/charts 0.0.7 → 0.0.8

package/bar.d.ts

@@ -1,5 +1,5 @@
 import type { Selection } from 'd3';
-import type { BarConfig, DataItem, ScaleType, Orientation, ChartTheme } from './types.js';
+import type { BarConfig, DataItem, ScaleType, Orientation, ChartTheme, BarValueLabelConfig } from './types.js';
 import type { ChartComponent } from './chart-interface.js';
 export declare class Bar implements ChartComponent {
     readonly type: "bar";
@@ -7,8 +7,13 @@ export declare class Bar implements ChartComponent {
     readonly fill: string;
     readonly colorAdapter?: (data: DataItem, index: number) => string;
     readonly orientation: Orientation;
+    readonly maxBarSize?: number;
+    readonly valueLabel?: BarValueLabelConfig;
     constructor(config: BarConfig);
-    render(plotGroup: Selection<SVGGElement, undefined, null, undefined>, data: DataItem[], xKey: string, x: any, y: any, parseValue: (value: any) => number, xScaleType?: ScaleType, _theme?: ChartTheme): void;
+    private getScaledPosition;
+    render(plotGroup: Selection<SVGGElement, undefined, null, undefined>, data: DataItem[], xKey: string, x: any, y: any, parseValue: (value: any) => number, xScaleType?: ScaleType, theme?: ChartTheme): void;
     private renderVertical;
     private renderHorizontal;
+    private renderVerticalValueLabels;
+    private renderHorizontalValueLabels;
 }

package/bar.js

@@ -30,40 +30,62 @@ export class Bar {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "maxBarSize", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "valueLabel", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         this.dataKey = config.dataKey;
         this.fill = config.fill || '#8884d8';
         this.colorAdapter = config.colorAdapter;
         this.orientation = config.orientation || 'vertical';
+        this.maxBarSize = config.maxBarSize;
+        this.valueLabel = config.valueLabel;
+    }
+    getScaledPosition(data, key, scale, scaleType) {
+        const value = data[key];
+        let scaledValue;
+        switch (scaleType) {
+            case 'band':
+                scaledValue = value;
+                break;
+            case 'time':
+                scaledValue = value instanceof Date ? value : new Date(value);
+                break;
+            case 'linear':
+            case 'log':
+                scaledValue = typeof value === 'number' ? value : Number(value);
+                break;
+        }
+        return scale(scaledValue) || 0;
     }
-    render(plotGroup, data, xKey, x, y, parseValue, xScaleType = 'band', _theme) {
+    render(plotGroup, data, xKey, x, y, parseValue, xScaleType = 'band', theme) {
         if (this.orientation === 'vertical') {
             this.renderVertical(plotGroup, data, xKey, x, y, parseValue, xScaleType);
         }
         else {
             this.renderHorizontal(plotGroup, data, xKey, x, y, parseValue, xScaleType);
         }
+        // Render value labels if enabled
+        if (this.valueLabel?.show && theme) {
+            if (this.orientation === 'vertical') {
+                this.renderVerticalValueLabels(plotGroup, data, xKey, x, y, parseValue, xScaleType, theme);
+            }
+            else {
+                this.renderHorizontalValueLabels(plotGroup, data, xKey, x, y, parseValue, xScaleType, theme);
+            }
+        }
     }
     renderVertical(plotGroup, data, xKey, x, y, parseValue, xScaleType) {
-        const getXPosition = (d) => {
-            const xValue = d[xKey];
-            let scaledValue;
-            switch (xScaleType) {
-                case 'band':
-                    scaledValue = xValue;
-                    break;
-                case 'time':
-                    scaledValue =
-                        xValue instanceof Date ? xValue : new Date(xValue);
-                    break;
-                case 'linear':
-                case 'log':
-                    scaledValue =
-                        typeof xValue === 'number' ? xValue : Number(xValue);
-                    break;
-            }
-            return x(scaledValue) || 0;
-        };
         const bandwidth = x.bandwidth ? x.bandwidth() : 20;
+        const barWidth = this.maxBarSize ? Math.min(bandwidth, this.maxBarSize) : bandwidth;
         // Get the baseline value from the Y scale's domain
         // For linear scales, use 0 if it's in the domain, otherwise use domain max (bottom of chart)
         // For log scales, use the minimum value from the domain
@@ -77,15 +99,16 @@ export class Bar {
             .join('rect')
             .attr('class', `bar-${this.dataKey.replace(/\s+/g, '-')}`)
             .attr('x', (d) => {
-            const xPos = getXPosition(d);
+            const xPos = this.getScaledPosition(d, xKey, x, xScaleType);
+            const offset = (bandwidth - barWidth) / 2;
             // For non-band scales, center the bar
-            return xScaleType === 'band' ? xPos : xPos - bandwidth / 2;
+            return xScaleType === 'band' ? xPos + offset : xPos - barWidth / 2;
         })
             .attr('y', (d) => {
             const yPos = y(parseValue(d[this.dataKey])) || 0;
             return Math.min(yBaseline, yPos);
         })
-            .attr('width', bandwidth)
+            .attr('width', barWidth)
             .attr('height', (d) => {
             const yPos = y(parseValue(d[this.dataKey])) || 0;
             return Math.abs(yBaseline - yPos);
@@ -93,26 +116,8 @@ export class Bar {
             .attr('fill', (d, i) => this.colorAdapter ? this.colorAdapter(d, i) : this.fill);
     }
     renderHorizontal(plotGroup, data, xKey, x, y, parseValue, yScaleType) {
-        const getYPosition = (d) => {
-            const yValue = d[xKey];
-            let scaledValue;
-            switch (yScaleType) {
-                case 'band':
-                    scaledValue = yValue;
-                    break;
-                case 'time':
-                    scaledValue =
-                        yValue instanceof Date ? yValue : new Date(yValue);
-                    break;
-                case 'linear':
-                case 'log':
-                    scaledValue =
-                        typeof yValue === 'number' ? yValue : Number(yValue);
-                    break;
-            }
-            return y(scaledValue) || 0;
-        };
         const bandwidth = y.bandwidth ? y.bandwidth() : 20;
+        const barHeight = this.maxBarSize ? Math.min(bandwidth, this.maxBarSize) : bandwidth;
         // Get the baseline value from the scale's domain
         // For linear scales, use 0 if it's in the domain, otherwise use domain min
         // For log scales, use the minimum value from the domain
@@ -130,15 +135,220 @@ export class Bar {
             return Math.min(xBaseline, xPos);
         })
             .attr('y', (d) => {
-            const yPos = getYPosition(d);
+            const yPos = this.getScaledPosition(d, xKey, y, yScaleType);
+            const offset = (bandwidth - barHeight) / 2;
             // For non-band scales, center the bar
-            return yScaleType === 'band' ? yPos : yPos - bandwidth / 2;
+            return yScaleType === 'band' ? yPos + offset : yPos - barHeight / 2;
         })
             .attr('width', (d) => {
             const xPos = x(parseValue(d[this.dataKey])) || 0;
             return Math.abs(xPos - xBaseline);
         })
-            .attr('height', bandwidth)
+            .attr('height', barHeight)
             .attr('fill', (d, i) => this.colorAdapter ? this.colorAdapter(d, i) : this.fill);
     }
+    renderVerticalValueLabels(plotGroup, data, xKey, x, y, parseValue, xScaleType, theme) {
+        const bandwidth = x.bandwidth ? x.bandwidth() : 20;
+        const barWidth = this.maxBarSize ? Math.min(bandwidth, this.maxBarSize) : bandwidth;
+        const yDomain = y.domain();
+        const baselineValue = yDomain[0] >= 0 ? Math.max(0, yDomain[0]) : yDomain[0];
+        const yBaseline = y(baselineValue) || 0;
+        const config = this.valueLabel;
+        const position = config.position || 'outside';
+        const insidePosition = config.insidePosition || 'top';
+        const fontSize = config.fontSize ?? theme.valueLabel.fontSize;
+        const fontFamily = config.fontFamily ?? theme.valueLabel.fontFamily;
+        const fontWeight = config.fontWeight ?? theme.valueLabel.fontWeight;
+        const color = config.color ?? theme.valueLabel.color;
+        const background = config.background ?? theme.valueLabel.background;
+        const border = config.border ?? theme.valueLabel.border;
+        const borderRadius = config.borderRadius ?? theme.valueLabel.borderRadius;
+        const padding = config.padding ?? theme.valueLabel.padding;
+        const labelGroup = plotGroup
+            .append('g')
+            .attr('class', `bar-value-labels-${this.dataKey.replace(/\s+/g, '-')}`);
+        data.forEach((d) => {
+            const value = parseValue(d[this.dataKey]);
+            const valueText = String(value);
+            const xPos = this.getScaledPosition(d, xKey, x, xScaleType);
+            const yPos = y(value) || 0;
+            const barHeight = Math.abs(yBaseline - yPos);
+            const barTop = Math.min(yBaseline, yPos);
+            const barBottom = Math.max(yBaseline, yPos);
+            const barCenterX = xPos + (xScaleType === 'band' ? (bandwidth - barWidth) / 2 : -barWidth / 2) + barWidth / 2;
+            // Create temporary text to measure dimensions
+            const tempText = labelGroup
+                .append('text')
+                .style('font-size', `${fontSize}px`)
+                .style('font-family', fontFamily)
+                .style('font-weight', fontWeight)
+                .text(valueText);
+            const textBBox = tempText.node().getBBox();
+            const boxWidth = textBBox.width + padding * 2;
+            const boxHeight = textBBox.height + padding * 2;
+            let labelX = barCenterX;
+            let labelY;
+            let shouldRender = true;
+            if (position === 'outside') {
+                // Place above the bar
+                labelY = barTop - boxHeight / 2 - 4;
+                // Check if it fits (not going above plot area)
+                const plotTop = y.range()[1];
+                if (labelY - boxHeight / 2 < plotTop) {
+                    shouldRender = false;
+                }
+            }
+            else {
+                // Inside the bar
+                switch (insidePosition) {
+                    case 'top':
+                        labelY = barTop + boxHeight / 2 + 4;
+                        break;
+                    case 'middle':
+                        labelY = (barTop + barBottom) / 2;
+                        break;
+                    case 'bottom':
+                        labelY = barBottom - boxHeight / 2 - 4;
+                        break;
+                }
+                // Check if it fits inside the bar
+                if (boxHeight + 8 > barHeight) {
+                    shouldRender = false;
+                }
+            }
+            tempText.remove();
+            if (shouldRender) {
+                const group = labelGroup.append('g');
+                if (position === 'outside') {
+                    // Draw rounded rectangle background
+                    group
+                        .append('rect')
+                        .attr('x', labelX - boxWidth / 2)
+                        .attr('y', labelY - boxHeight / 2)
+                        .attr('width', boxWidth)
+                        .attr('height', boxHeight)
+                        .attr('rx', borderRadius)
+                        .attr('ry', borderRadius)
+                        .attr('fill', background)
+                        .attr('stroke', border)
+                        .attr('stroke-width', 1);
+                }
+                // Draw text
+                group
+                    .append('text')
+                    .attr('x', labelX)
+                    .attr('y', labelY)
+                    .attr('text-anchor', 'middle')
+                    .attr('dominant-baseline', 'central')
+                    .style('font-size', `${fontSize}px`)
+                    .style('font-family', fontFamily)
+                    .style('font-weight', fontWeight)
+                    .style('fill', color)
+                    .style('pointer-events', 'none')
+                    .text(valueText);
+            }
+        });
+    }
+    renderHorizontalValueLabels(plotGroup, data, xKey, x, y, parseValue, yScaleType, theme) {
+        const bandwidth = y.bandwidth ? y.bandwidth() : 20;
+        const barHeight = this.maxBarSize ? Math.min(bandwidth, this.maxBarSize) : bandwidth;
+        const domain = x.domain();
+        const baselineValue = domain[0] >= 0 ? Math.max(0, domain[0]) : domain[0];
+        const xBaseline = x(baselineValue) || 0;
+        const config = this.valueLabel;
+        const position = config.position || 'outside';
+        const insidePosition = config.insidePosition || 'top';
+        const fontSize = config.fontSize ?? theme.valueLabel.fontSize;
+        const fontFamily = config.fontFamily ?? theme.valueLabel.fontFamily;
+        const fontWeight = config.fontWeight ?? theme.valueLabel.fontWeight;
+        const color = config.color ?? theme.valueLabel.color;
+        const background = config.background ?? theme.valueLabel.background;
+        const border = config.border ?? theme.valueLabel.border;
+        const borderRadius = config.borderRadius ?? theme.valueLabel.borderRadius;
+        const padding = config.padding ?? theme.valueLabel.padding;
+        const labelGroup = plotGroup
+            .append('g')
+            .attr('class', `bar-value-labels-${this.dataKey.replace(/\s+/g, '-')}`);
+        data.forEach((d) => {
+            const value = parseValue(d[this.dataKey]);
+            const valueText = String(value);
+            const yPos = this.getScaledPosition(d, xKey, y, yScaleType);
+            const xPos = x(value) || 0;
+            const barWidth = Math.abs(xPos - xBaseline);
+            const barLeft = Math.min(xBaseline, xPos);
+            const barRight = Math.max(xBaseline, xPos);
+            const barCenterY = yPos + (yScaleType === 'band' ? (bandwidth - barHeight) / 2 : -barHeight / 2) + barHeight / 2;
+            // Create temporary text to measure dimensions
+            const tempText = labelGroup
+                .append('text')
+                .style('font-size', `${fontSize}px`)
+                .style('font-family', fontFamily)
+                .style('font-weight', fontWeight)
+                .text(valueText);
+            const textBBox = tempText.node().getBBox();
+            const boxWidth = textBBox.width + padding * 2;
+            const boxHeight = textBBox.height + padding * 2;
+            let labelX;
+            let labelY = barCenterY;
+            let shouldRender = true;
+            if (position === 'outside') {
+                // Place to the right of the bar
+                labelX = barRight + boxWidth / 2 + 4;
+                // Check if it fits (not going beyond plot area)
+                const plotRight = x.range()[1];
+                if (labelX + boxWidth / 2 > plotRight) {
+                    shouldRender = false;
+                }
+            }
+            else {
+                // Inside the bar - map top/middle/bottom to start/middle/end for horizontal
+                switch (insidePosition) {
+                    case 'top': // start of bar (left side)
+                        labelX = barLeft + boxWidth / 2 + 4;
+                        break;
+                    case 'middle':
+                        labelX = (barLeft + barRight) / 2;
+                        break;
+                    case 'bottom': // end of bar (right side)
+                        labelX = barRight - boxWidth / 2 - 4;
+                        break;
+                }
+                // Check if it fits inside the bar
+                if (boxWidth + 8 > barWidth) {
+                    shouldRender = false;
+                }
+            }
+            tempText.remove();
+            if (shouldRender) {
+                const group = labelGroup.append('g');
+                if (position === 'outside') {
+                    // Draw rounded rectangle background
+                    group
+                        .append('rect')
+                        .attr('x', labelX - boxWidth / 2)
+                        .attr('y', labelY - boxHeight / 2)
+                        .attr('width', boxWidth)
+                        .attr('height', boxHeight)
+                        .attr('rx', borderRadius)
+                        .attr('ry', borderRadius)
+                        .attr('fill', background)
+                        .attr('stroke', border)
+                        .attr('stroke-width', 1);
+                }
+                // Draw text
+                group
+                    .append('text')
+                    .attr('x', labelX)
+                    .attr('y', labelY)
+                    .attr('text-anchor', 'middle')
+                    .attr('dominant-baseline', 'central')
+                    .style('font-size', `${fontSize}px`)
+                    .style('font-family', fontFamily)
+                    .style('font-weight', fontWeight)
+                    .style('fill', color)
+                    .style('pointer-events', 'none')
+                    .text(valueText);
+            }
+        });
+    }
 }

package/line.d.ts

@@ -1,11 +1,13 @@
 import { type Selection } from 'd3';
-import type { LineConfig, DataItem, ScaleType, ChartTheme } from './types.js';
+import type { LineConfig, DataItem, ScaleType, ChartTheme, LineValueLabelConfig } from './types.js';
 import type { ChartComponent } from './chart-interface.js';
 export declare class Line implements ChartComponent {
     readonly type: "line";
     readonly dataKey: string;
     readonly stroke: string;
     readonly strokeWidth?: number;
+    readonly valueLabel?: LineValueLabelConfig;
     constructor(config: LineConfig);
     render(plotGroup: Selection<SVGGElement, undefined, null, undefined>, data: DataItem[], xKey: string, x: any, y: any, parseValue: (value: any) => number, xScaleType: ScaleType | undefined, theme: ChartTheme): void;
+    private renderValueLabels;
 }

package/line.js

@@ -25,9 +25,16 @@ export class Line {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "valueLabel", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         this.dataKey = config.dataKey;
         this.stroke = config.stroke || '#8884d8';
         this.strokeWidth = config.strokeWidth;
+        this.valueLabel = config.valueLabel;
     }
     render(plotGroup, data, xKey, x, y, parseValue, xScaleType = 'band', theme) {
         const getXPosition = (d) => {
@@ -83,5 +90,83 @@ export class Line {
             .attr('fill', pointColor)
             .attr('stroke', pointStrokeColor)
             .attr('stroke-width', pointStrokeWidth);
+        // Render value labels if enabled
+        if (this.valueLabel?.show) {
+            this.renderValueLabels(plotGroup, data, y, parseValue, theme, getXPosition);
+        }
+    }
+    renderValueLabels(plotGroup, data, y, parseValue, theme, getXPosition) {
+        const config = this.valueLabel;
+        const fontSize = config.fontSize ?? theme.valueLabel.fontSize;
+        const fontFamily = config.fontFamily ?? theme.valueLabel.fontFamily;
+        const fontWeight = config.fontWeight ?? theme.valueLabel.fontWeight;
+        const color = config.color ?? theme.valueLabel.color;
+        const background = config.background ?? theme.valueLabel.background;
+        const border = config.border ?? theme.valueLabel.border;
+        const borderRadius = config.borderRadius ?? theme.valueLabel.borderRadius;
+        const padding = config.padding ?? theme.valueLabel.padding;
+        const labelGroup = plotGroup
+            .append('g')
+            .attr('class', `line-value-labels-${this.dataKey.replace(/\s+/g, '-')}`);
+        const plotTop = y.range()[1];
+        const plotBottom = y.range()[0];
+        data.forEach((d) => {
+            const value = parseValue(d[this.dataKey]);
+            const valueText = String(value);
+            const xPos = getXPosition(d);
+            const yPos = y(value) || 0;
+            // Create temporary text to measure dimensions
+            const tempText = labelGroup
+                .append('text')
+                .style('font-size', `${fontSize}px`)
+                .style('font-family', fontFamily)
+                .style('font-weight', fontWeight)
+                .text(valueText);
+            const textBBox = tempText.node().getBBox();
+            const boxWidth = textBBox.width + padding * 2;
+            const boxHeight = textBBox.height + padding * 2;
+            let labelX = xPos;
+            let labelY;
+            let shouldRender = true;
+            // Default: place above the point
+            labelY = yPos - boxHeight / 2 - theme.line.point.size - 4;
+            // If too close to top, place below instead
+            if (labelY - boxHeight / 2 < plotTop + 4) {
+                labelY = yPos + boxHeight / 2 + theme.line.point.size + 4;
+                // Check if it fits below
+                if (labelY + boxHeight / 2 > plotBottom - 4) {
+                    shouldRender = false;
+                }
+            }
+            tempText.remove();
+            if (shouldRender) {
+                const group = labelGroup.append('g');
+                // Draw rounded rectangle background
+                group
+                    .append('rect')
+                    .attr('x', labelX - boxWidth / 2)
+                    .attr('y', labelY - boxHeight / 2)
+                    .attr('width', boxWidth)
+                    .attr('height', boxHeight)
+                    .attr('rx', borderRadius)
+                    .attr('ry', borderRadius)
+                    .attr('fill', background)
+                    .attr('stroke', border)
+                    .attr('stroke-width', 1);
+                // Draw text
+                group
+                    .append('text')
+                    .attr('x', labelX)
+                    .attr('y', labelY)
+                    .attr('text-anchor', 'middle')
+                    .attr('dominant-baseline', 'central')
+                    .style('font-size', `${fontSize}px`)
+                    .style('font-family', fontFamily)
+                    .style('font-weight', fontWeight)
+                    .style('fill', color)
+                    .style('pointer-events', 'none')
+                    .text(valueText);
+            }
+        });
     }
 }

package/package.json

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

package/theme.js

@@ -40,6 +40,16 @@ export const defaultTheme = {
             size: 5,
         },
     },
+    valueLabel: {
+        fontSize: 12,
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+        fontWeight: '600',
+        color: '#1f2a36',
+        background: 'rgba(255, 255, 255, 0.95)',
+        border: '#e0e0e0',
+        borderRadius: 4,
+        padding: 4,
+    },
 };
 export const newspaperTheme = {
     width: 928,
@@ -84,6 +94,16 @@ export const newspaperTheme = {
             size: 5,
         },
     },
+    valueLabel: {
+        fontSize: 11,
+        fontFamily: 'Georgia, "Times New Roman", Times, serif',
+        fontWeight: '600',
+        color: '#1a1a1a',
+        background: 'rgba(245, 245, 220, 0.95)',
+        border: '#2c2c2c',
+        borderRadius: 2,
+        padding: 3,
+    },
 };
 export const themes = {
     default: defaultTheme,

package/tooltip.d.ts

@@ -5,8 +5,14 @@ import type { Line } from './line.js';
 import type { Bar } from './bar.js';
 import type { PlotAreaBounds } from './layout-manager.js';
 export declare class Tooltip implements ChartComponent {
+    readonly id = "iisChartTooltip";
     readonly type: "tooltip";
     readonly formatter?: (dataKey: string, value: any, data: DataItem) => string;
+    readonly labelFormatter?: (label: string, data: DataItem) => string;
+    readonly customFormatter?: (data: DataItem, series: {
+        dataKey: string;
+        [key: string]: any;
+    }[]) => string;
     private tooltipDiv;
     constructor(config?: TooltipConfig);
     initialize(theme: ChartTheme): void;

package/tooltip.js

@@ -2,6 +2,12 @@ import { pointer, select } from 'd3';
 import { getSeriesColor } from './types.js';
 export class Tooltip {
     constructor(config) {
+        Object.defineProperty(this, "id", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'iisChartTooltip'
+        });
         Object.defineProperty(this, "type", {
             enumerable: true,
             configurable: true,
@@ -14,6 +20,18 @@ export class Tooltip {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "labelFormatter", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "customFormatter", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "tooltipDiv", {
             enumerable: true,
             configurable: true,
@@ -21,11 +39,15 @@ export class Tooltip {
             value: null
         });
         this.formatter = config?.formatter;
+        this.labelFormatter = config?.labelFormatter;
+        this.customFormatter = config?.customFormatter;
     }
     initialize(theme) {
+        this.cleanup();
         this.tooltipDiv = select('body')
             .append('div')
             .attr('class', 'chart-tooltip')
+            .attr('id', this.id)
             .style('position', 'absolute')
             .style('visibility', 'hidden')
             .style('background-color', 'white')
@@ -43,6 +65,8 @@ export class Tooltip {
             return;
         const tooltip = this.tooltipDiv;
         const formatter = this.formatter;
+        const labelFormatter = this.labelFormatter;
+        const customFormatter = this.customFormatter;
         // Helper to get x position for any scale type
         const getXPosition = (dataPoint) => {
             const xValue = dataPoint[xKey];
@@ -102,17 +126,27 @@ export class Tooltip {
                     .style('opacity', 1);
             });
             // Build tooltip content
-            let content = `<strong>${dataPoint[xKey]}</strong><br/>`;
-            series.forEach((s) => {
-                const value = dataPoint[s.dataKey];
-                if (formatter) {
-                    content +=
-                        formatter(s.dataKey, value, dataPoint) + '<br/>';
-                }
-                else {
-                    content += `${s.dataKey}: ${value}<br/>`;
-                }
-            });
+            let content;
+            if (customFormatter) {
+                content = customFormatter(dataPoint, series);
+            }
+            else {
+                const label = labelFormatter
+                    ? labelFormatter(dataPoint[xKey], dataPoint)
+                    : dataPoint[xKey];
+                content = `<strong>${label}</strong><br/>`;
+                series.forEach((s) => {
+                    const value = dataPoint[s.dataKey];
+                    if (formatter) {
+                        content +=
+                            formatter(s.dataKey, value, dataPoint) +
+                                '<br/>';
+                    }
+                    else {
+                        content += `${s.dataKey}: ${value}<br/>`;
+                    }
+                });
+            }
             // Position tooltip relative to the data point
             const svgRect = svg.node().getBoundingClientRect();
             const tooltipX = svgRect.left + window.scrollX + xPos + 10;
@@ -132,9 +166,11 @@ export class Tooltip {
         });
     }
     cleanup() {
-        if (this.tooltipDiv) {
-            this.tooltipDiv.remove();
-            this.tooltipDiv = null;
+        const tooltip = select(`#${this.id}`);
+        if (tooltip.empty()) {
+            return;
         }
+        tooltip.remove();
+        this.tooltipDiv = null;
     }
 }

package/types.d.ts

@@ -36,17 +36,48 @@ export type ChartTheme = {
             size: number;
         };
     };
+    valueLabel: {
+        fontSize: number;
+        fontFamily: string;
+        fontWeight: string;
+        color: string;
+        background: string;
+        border: string;
+        borderRadius: number;
+        padding: number;
+    };
+};
+export type ValueLabelConfig = {
+    fontSize?: number;
+    fontFamily?: string;
+    fontWeight?: string;
+    color?: string;
+    background?: string;
+    border?: string;
+    borderRadius?: number;
+    padding?: number;
+};
+export type LineValueLabelConfig = ValueLabelConfig & {
+    show?: boolean;
+};
+export type BarValueLabelConfig = ValueLabelConfig & {
+    show?: boolean;
+    position?: 'inside' | 'outside';
+    insidePosition?: 'top' | 'middle' | 'bottom';
 };
 export type LineConfig = {
     dataKey: string;
     stroke?: string;
     strokeWidth?: number;
+    valueLabel?: LineValueLabelConfig;
 };
 export type BarConfig = {
     dataKey: string;
     fill?: string;
     colorAdapter?: (data: DataItem, index: number) => string;
     orientation?: 'vertical' | 'horizontal';
+    maxBarSize?: number;
+    valueLabel?: BarValueLabelConfig;
 };
 export declare function getSeriesColor(series: {
     stroke?: string;
@@ -65,6 +96,11 @@ export type GridConfig = {
 };
 export type TooltipConfig = {
     formatter?: (dataKey: string, value: any, data: DataItem) => string;
+    labelFormatter?: (label: string, data: DataItem) => string;
+    customFormatter?: (data: DataItem, series: {
+        dataKey: string;
+        [key: string]: any;
+    }[]) => string;
 };
 export type LegendConfig = {
     position?: 'bottom';