Interactive

npm i @tradingaction/interactive

TrendLine Label Feature

Overview

This feature allows you to add optional labels to trendlines with customizable positioning, styling, and tooltips.

Features

• Flexible Label Positioning: Display labels at the start or end of the trendline
• Left/Right Alignment: Position labels on either the left or right side of the endpoint (default: right)
• Caret Arrow: Visual pointer (caret) connecting the label to the exact trendline point (enabled by default)
• Customizable Styling: Control background color, text color, border color, and border width
• Padding Control: Adjust padding around the label text
• Font Customization: Set custom font family and font size
• Tooltip Support: Add hover tooltips to labels for additional information

Usage

Basic Example

import { TrendLine, type TrendItem } from "ta-react-financial-charts";

const trends: TrendItem[] = [
    {
        start: [5910, 2021.83],
        end: [6085, -109.20],
        selected: true,
        label: {
            text: "38.2%: 6955.87",
            position: "end", // "start" or "end"
        }
    }
];

<TrendLine
    trends={trends}
    enabled={true}
    snap={false}
    // ... other props
/>

Full Example with All Customization Options

const trends: TrendItem[] = [
    {
        start: [5910, 2021.83],
        end: [6085, -109.20],
        selected: true,
        appearance: {
            strokeStyle: "black",
            strokeWidth: 1,
            strokeDasharray: "Solid",
            edgeStrokeWidth: 1,
            edgeFill: "#FFFFFF",
            edgeStroke: "#000000",
            r: 6,
        },
        type: "LINE",
        label: {
            text: "38.2%: 6955.87",
            position: "end", // "start" | "end"
            align: "right", // "left" | "right" (default: "right")
            showCaret: true, // Show arrow pointing to point (default: true)
            backgroundColor: "rgba(255, 255, 255, 0.95)",
            textColor: "#000000",
            borderColor: "#333333",
            borderWidth: 1,
            padding: 6,
            fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
            fontSize: 12,
            tooltip: "Fibonacci level at 38.2%",
        },
        hoverText: {
            enable: true,
            text: "Hover text",
            selectedText: "Selected text",
        }
    }
];

TrendLineLabelConfig Interface

interface TrendLineLabelConfig {
    readonly text: string;                      // Required: Label text to display
    readonly position: "start" | "end";         // Required: Position at start or end of line
    readonly align?: "left" | "right";          // Optional: Align left or right (default: "right")
    readonly showCaret?: boolean;               // Optional: Show caret pointing to point (default: true)
    readonly backgroundColor?: string;           // Optional: Background color (default: rgba(255, 255, 255, 0.9))
    readonly textColor?: string;                // Optional: Text color (default: #000000)
    readonly borderColor?: string;              // Optional: Border color (default: #cccccc)
    readonly borderWidth?: number;              // Optional: Border width in pixels (default: 1)
    readonly padding?: number;                  // Optional: Padding around text (default: 4)
    readonly fontFamily?: string;               // Optional: Font family (default: system fonts)
    readonly fontSize?: number;                 // Optional: Font size in pixels (default: 12)
    readonly tooltip?: string;                  // Optional: Tooltip text on hover
}

TrendItem Interface

The TrendItem interface now includes the optional label property:

interface TrendItem {
    readonly start: [number, number];           // [xValue, yValue]
    readonly end: [number, number];             // [xValue, yValue]
    readonly selected?: boolean;
    readonly appearance?: {...};
    readonly type?: "XLINE" | "RAY" | "LINE";
    readonly hoverText?: {...};
    readonly label?: TrendLineLabelConfig;      // NEW: Optional label configuration
}

Styling Guide

Alignment & Caret Options

// Right alignment with caret (default)
align: "right",
showCaret: true,

// Left alignment with caret
align: "left",
showCaret: true,

// Without caret
showCaret: false,

Background Colors

// Solid white background
backgroundColor: "#FFFFFF"

// Semi-transparent white
backgroundColor: "rgba(255, 255, 255, 0.9)"

// With opacity for visibility
backgroundColor: "rgba(200, 200, 255, 0.8)"

Text Colors

// Dark text on light background
textColor: "#000000"

// Light text on dark background
textColor: "#FFFFFF"

// Custom colors
textColor: "#1976D2"

Border Styles

// Subtle border
borderColor: "#CCCCCC"
borderWidth: 1

// Strong border
borderColor: "#333333"
borderWidth: 2

// No border
borderWidth: 0

Real-World Example: Fibonacci Levels

const fibonacciTrends: TrendItem[] = [
    {
        start: [5910, 2021.83],
        end: [6085, -109.20],
        label: {
            text: "61.8% (Golden Ratio)",
            position: "end",
            align: "right",
            showCaret: true,
            backgroundColor: "rgba(255, 200, 0, 0.9)",
            textColor: "#000000",
            borderColor: "#FF6B00",
            padding: 8,
            fontSize: 11,
            tooltip: "Golden Ratio Fibonacci Level",
        }
    },
    {
        start: [5900, 1950.50],
        end: [6100, -50.00],
        label: {
            text: "50.0% (Mid)",
            position: "end",
            align: "left",
            showCaret: true,
            backgroundColor: "rgba(150, 150, 255, 0.85)",
            textColor: "#FFFFFF",
            borderColor: "#0066CC",
            padding: 6,
            fontSize: 10,
            tooltip: "50% Retracement Level",
        }
    }
];

Component Architecture

• TrendLineLabel: New SVG component that renders labels positioned at trendline endpoints
• EachTrendLine: Updated to support and render labels
• TrendLine: Updated to pass label configuration from trend items to EachTrendLine

Notes

• Labels can be positioned on the left or right side of the trendline endpoint using the align property
• A caret (arrow) connecting the label to the exact point is shown by default (can be disabled with showCaret: false)
• Label background includes rounded corners (rx=2, ry=2) for a polished appearance
• Hover tooltips appear when the user hovers over the label area
• Labels respond dynamically to chart panning and zooming
• Multiple labels can be displayed on the same chart without interference
• The caret always points from the label box to the exact trendline point location

Browser Compatibility

The label feature uses standard SVG rendering and is compatible with all modern browsers that support:

• SVG text elements
• SVG rect elements
• CSS opacity and RGBA colors
• React event handlers

######################################################################################### #########################################################################################

Rectangle Labels Feature

Overview

This feature adds two types of labels to rectangles:

1. External Corner Labels - Labels positioned at the four corners of the rectangle (like TrendLine labels)
2. Internal Labels - Labels positioned inside the rectangle at 9 different locations

External Corner Labels

Features

• Position labels at top-left, top-right, bottom-left, or bottom-right corners
• Each corner label has a caret pointing to the exact corner point
• Customizable with all TrendLine label options (colors, fonts, styling, tooltips)
• Left/right alignment for better layout control

Configuration

externalLabels?: {
    topLeft?: TrendLineLabelConfig;
    topRight?: TrendLineLabelConfig;
    bottomLeft?: TrendLineLabelConfig;
    bottomRight?: TrendLineLabelConfig;
}

TrendLineLabelConfig Interface

interface TrendLineLabelConfig {
    readonly text: string;                    // Required: Label text
    readonly position: "start" | "end";       // Required: Reference point
    readonly align?: "left" | "right";        // Optional: Alignment (default: "right")
    readonly showCaret?: boolean;             // Optional: Show caret (default: true)
    readonly backgroundColor?: string;         // Optional: Background color
    readonly textColor?: string;              // Optional: Text color
    readonly borderColor?: string;            // Optional: Border color
    readonly borderWidth?: number;            // Optional: Border width
    readonly padding?: number;                // Optional: Padding
    readonly fontFamily?: string;             // Optional: Font family
    readonly fontSize?: number;               // Optional: Font size
    readonly tooltip?: string;                // Optional: Hover tooltip
}

Example

const rectangles = [
    {
        topLeft: [5910, 1500],
        topRight: [6085, 1500],
        bottomLeft: [5910, -1500],
        bottomRight: [6085, -1500],
        type: "LINE",
        externalLabels: {
            topLeft: {
                text: "Support Zone",
                position: "start",
                align: "right",
                showCaret: true,
                backgroundColor: "rgba(144, 202, 249, 0.95)",
                textColor: "#000000",
                borderColor: "#1976D2",
                padding: 4,
                fontSize: 11,
            },
            topRight: {
                text: "Resistance",
                position: "start",
                align: "left",
                showCaret: true,
                backgroundColor: "rgba(165, 214, 167, 0.95)",
                textColor: "#000000",
                borderColor: "#388E3C",
                padding: 4,
                fontSize: 11,
            }
        }
    }
];

Internal Labels

Features

• 9 positioning options inside the rectangle
• Automatic text alignment based on position
• Customizable background color, text color, font size, and padding
• Labels automatically scale with rectangle bounds

Positions Available

• top_left - Upper left corner inside rectangle
• top_center - Upper center inside rectangle
• top_right - Upper right corner inside rectangle
• middle_left - Middle left inside rectangle
• middle_center - Center of rectangle
• middle_right - Middle right inside rectangle
• bottom_left - Lower left corner inside rectangle
• bottom_center - Lower center inside rectangle
• bottom_right - Lower right corner inside rectangle

Configuration

internalLabel?: {
    readonly text: string;
    readonly position: "top_left" | "top_center" | "top_right" | 
                       "middle_left" | "middle_center" | "middle_right" | 
                       "bottom_left" | "bottom_center" | "bottom_right";
    readonly backgroundColor?: string;    // Optional: Background color
    readonly textColor?: string;          // Optional: Text color
    readonly fontSize?: number;           // Optional: Font size
    readonly padding?: number;            // Optional: Padding
    readonly fontFamily?: string;         // Optional: Font family
}

Example

const rectangles = [
    {
        topLeft: [5910, 1500],
        topRight: [6085, 1500],
        bottomLeft: [5910, -1500],
        bottomRight: [6085, -1500],
        type: "LINE",
        internalLabel: {
            text: "High Vol Zone",
            position: "middle_center",
            backgroundColor: "rgba(255, 255, 255, 0.9)",
            textColor: "#1976D2",
            fontSize: 14,
            padding: 6,
        }
    }
];

RectangleItem Interface

Updated to include both label types:

interface RectangleItem {
    readonly topLeft: [number, number];
    readonly topRight: [number, number];
    readonly bottomLeft: [number, number];
    readonly bottomRight: [number, number];
    readonly selected?: boolean;
    readonly appearance?: {...};
    readonly type?: "XLINE" | "RAY" | "LINE";
    readonly hoverText?: {...};
    readonly externalLabels?: RectangleExternalLabelsConfig;  // NEW
    readonly internalLabel?: RectangleInternalLabelConfig;    // NEW
}

Complete Example

<Rectangle
    trends={[
        {
            topLeft: [5910, 1500],
            topRight: [6085, 1500],
            bottomLeft: [5910, -1500],
            bottomRight: [6085, -1500],
            type: "LINE",
            appearance: {
                strokeStyle: 'green',
                strokeWidth: 1,
                rectangleFill: "#08800924"
            },
            externalLabels: {
                topLeft: {
                    text: "Top Left",
                    position: "start",
                    align: "right",
                    showCaret: true,
                    backgroundColor: "rgba(144, 202, 249, 0.95)",
                    textColor: "#000000",
                    borderColor: "#1976D2",
                    padding: 4,
                    fontSize: 11,
                },
                bottomRight: {
                    text: "Bottom Right",
                    position: "start",
                    align: "left",
                    showCaret: true,
                    backgroundColor: "rgba(165, 214, 167, 0.95)",
                    textColor: "#000000",
                    borderColor: "#388E3C",
                    padding: 4,
                    fontSize: 11,
                }
            },
            internalLabel: {
                text: "Support Zone",
                position: "middle_center",
                backgroundColor: "rgba(255, 255, 255, 0.9)",
                textColor: "#1976D2",
                fontSize: 14,
                padding: 6,
            }
        }
    ]}
    enabled={false}
    snap={false}
/>

Styling Guide

External Labels (Corner Labels)

Background Colors

// Light background
backgroundColor: "rgba(255, 255, 255, 0.95)"

// Blue zone
backgroundColor: "rgba(144, 202, 249, 0.95)"

// Green zone
backgroundColor: "rgba(165, 214, 167, 0.95)"

// Red warning
backgroundColor: "rgba(229, 57, 53, 0.95)"

Border Colors

// Blue
borderColor: "#1976D2"

// Green
borderColor: "#388E3C"

// Red
borderColor: "#D32F2F"

Internal Labels

Text Alignment

// Left-aligned labels
position: "top_left" | "middle_left" | "bottom_left"

// Center-aligned labels
position: "top_center" | "middle_center" | "bottom_center"

// Right-aligned labels
position: "top_right" | "middle_right" | "bottom_right"

Color Combinations

// Subtle background with bold text
backgroundColor: "rgba(255, 255, 255, 0.9)",
textColor: "#1976D2",
fontSize: 14

// Light background with muted text
backgroundColor: "rgba(250, 250, 250, 0.95)",
textColor: "#757575",
fontSize: 12

// Transparent with contrasting text (for overlays)
backgroundColor: "rgba(200, 200, 200, 0.5)",
textColor: "#FFFFFF",
fontSize: 13

Notes

• External labels automatically position at the nearest corner without overlap
• Internal labels are automatically centered within the rectangle bounds
• Both label types respect text truncation and sizing constraints
• Labels update dynamically during chart panning and zooming
• Multiple rectangles with multiple labels can be displayed simultaneously without interference
• External labels use the same caret styling as TrendLine labels for consistency

Browser Compatibility

Both label types use standard SVG rendering and are compatible with all modern browsers that support:

• SVG path elements (for external label carets)
• SVG text elements
• CSS opacity and RGBA colors
• React event handlers