@fintatech/fintachart 3.1.13 → 3.1.14

package/CHANGELOG.md

@@ -5,6 +5,23 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.1.14] - 2026-08-27
+
+### Added
+
+- **Bar Marker** customization (`BarMarkerShape`): six additional glyphs on top of dot / arrow-up / arrow-down — `square`, `diamond`, `star`, `cross`, `line`, and `arrowAuto` (points down above a bar, up below it) — selected through the new `BarMarkerKind` enum.
+- Bar marker colouring: `markerColor` (new `BarMarkerColor` enum — `auto` follows the candle direction, seven presets, or `custom` paired with `customMarkerColor`) plus an optional `gradientFrom` / `gradientTo` gradient fill.
+- Bar marker badge styling: `badgeBorderRadius`, `badgeBorderColor`, `badgeBorderWidth`, `backgroundColor`, and `textColor`.
+- `connectLines` and `neighborSearchRange` on `BarMarkerShape` — `line` markers within the search range are joined by a connecting line, so a series of markers reads as a single path.
+- `anchorSource` (new `BarMarkerAnchor` enum — `high`, `low`, `open`, `close`, `point`) and `offsetY` on `BarMarkerShape`, controlling which value the marker attaches to and its distance from the bar. `position` also gains `auto`, placing the marker above or below by candle direction.
+- Text macros in the bar marker label — `{price}`, `{open}`, `{high}`, `{low}`, `{close}`, `{volume}`, `{time}` (`HH:mm`) and `{date}` (`YYYY-MM-DD`) are resolved against the bar the marker sits on (`BarMarkerShape.resolvedText`).
+- A **Bar Marker** section in the Shape Settings dialog exposing all of the above — marker type, colour (with a custom colour picker), gradient, badge radius / border / background / text colour and the connect-lines switch — with en and uk localization (`ShapeSettingsDialog`).
+
+### Changed
+
+- `BarMarkerPosition` and `BarMarkerKind` are now TypeScript enums instead of plain string-constant objects, and `position` / `marker` are typed with them. The string values are unchanged; TypeScript consumers assigning raw string literals should switch to the enum members.
+- Bar markers adapt to the chart type: line and area charts default to the `line` glyph with connecting lines enabled, and Point & Figure charts anchor markers to the P&F columns instead of the raw OHLC rows (`BarMarkerShape`).
+
 ## [3.1.13] - 2026-08-26
 
 ### Added
@@ -240,6 +257,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Initial public release of `@fintatech/fintachart`
 
+[3.1.14]: https://github.com/fintatech/fintachart/releases/tag/v3.1.14
 [3.1.13]: https://github.com/fintatech/fintachart/releases/tag/v3.1.13
 [3.1.12]: https://github.com/fintatech/fintachart/releases/tag/v3.1.12
 [3.1.11]: https://github.com/fintatech/fintachart/releases/tag/v3.1.11

package/d.ts/FintaChart.d.ts

@@ -21230,118 +21230,186 @@ declare module FintaChart {
     }
 }
 declare module FintaChart {
-    /**
-     * Describes bar marker shape config.
-     */
-    interface IBarMarkerShapeConfig extends ITextShapeConfig {
-        /**
-         * Marker position relative to the bar: 'above' or 'below'
-         */
-        position?: string;
-        /**
-         * Marker shape: 'dot', 'arrowUp' or 'arrowDown'
-         */
-        marker?: string;
+    export enum BarMarkerPosition {
+        AUTO = "auto",
+        ABOVE = "above",
+        BELOW = "below"
     }
-    /**
-     * Describes bar marker shape options.
-     */
-    interface IBarMarkerShapeOptions extends ITextShapeOptions {
-        /**
-         * Marker position relative to the bar
-         */
-        position?: string;
-        /**
-         * Marker shape
-         */
-        marker?: string;
+    export enum BarMarkerKind {
+        DOT = "dot",
+        ARROW_UP = "arrowUp",
+        ARROW_DOWN = "arrowDown",
+        ARROW_AUTO = "arrowAuto",
+        SQUARE = "square",
+        DIAMOND = "diamond",
+        STAR = "star",
+        CROSS = "cross",
+        LINE = "line"
     }
-    /**
-     * Describes bar marker shape defaults.
-     */
-    interface IBarMarkerShapeDefaults extends IShapeDefaults {
-        /**
-         * Default text label
-         */
+    export interface BarMarkerNeighbor {
+        x: number;
+        yMarker: number;
+        color: string;
+        lineWidth: number;
+    }
+    export enum BarMarkerAnchor {
+        HIGH = "high",
+        LOW = "low",
+        OPEN = "open",
+        CLOSE = "close",
+        POINT = "point"
+    }
+    export enum BarMarkerColor {
+        AUTO = "auto",
+        RED = "#ec5a58",
+        GREEN = "#26a69a",
+        ORANGE = "#f7931a",
+        BLUE = "#2196f3",
+        YELLOW = "#fdd835",
+        PURPLE = "#ab47bc",
+        WHITE = "#ffffff",
+        CUSTOM = "custom"
+    }
+    interface IBarMarkerFields {
+        position?: BarMarkerPosition;
+        marker?: BarMarkerKind;
+        markerColor?: BarMarkerColor;
+        customMarkerColor?: string;
+        gradientFrom?: string;
+        gradientTo?: string;
+        anchorSource?: BarMarkerAnchor;
+        offsetY?: number;
+        badgeBorderRadius?: number;
+        badgeBorderColor?: string;
+        badgeBorderWidth?: number;
+        backgroundColor?: string;
+        textColor?: string;
+        connectLines?: boolean;
+        neighborSearchRange?: number;
+    }
+    export interface IBarMarkerShapeConfig extends ITextShapeConfig, IBarMarkerFields {
+    }
+    export interface IBarMarkerShapeOptions extends ITextShapeOptions, IBarMarkerFields {
+    }
+    export interface IBarMarkerShapeDefaults extends IShapeDefaults, Required<IBarMarkerFields> {
         text: string;
-        /**
-         * Default marker position
-         */
-        position: string;
-        /**
-         * Default marker shape
-         */
-        marker: string;
     }
-    const BarMarkerPosition: {
-        ABOVE: string;
-        BELOW: string;
-    };
-    const BarMarkerKind: {
-        DOT: string;
-        ARROW_UP: string;
-        ARROW_DOWN: string;
-    };
     /**
      * Represents a dot (or arrow) with text attached to a bar from above or below.
      * Uses the Shape Text behavior: click to place on a bar, then edit the text in the settings dialog.
      *
      * @category Shapes
      */
-    class BarMarkerShape extends TextShape {
+    export class BarMarkerShape extends TextShape {
         static get type(): string;
         static get subType(): string;
         static defaults: IBarMarkerShapeDefaults;
-        /**
-         * Creates an instance of BarMarkerShape.
-         *
-         * @param config
-         */
         constructor(config?: IBarMarkerShapeConfig);
         protected get defaults(): IBarMarkerShapeDefaults;
-        /**
-         * Marker position relative to the bar
-         */
-        get position(): string;
-        set position(value: string);
-        /**
-         * Marker shape kind
-         */
-        get marker(): string;
-        set marker(value: string);
+        private get chartTypeName();
+        private get isLineOrAreaChart();
+        private get isPointAndFigureChart();
+        /**
+         * Returns the bar data rows appropriate for the current chart type.
+         * For P&F charts, returns the calculated P&F data rows so markers
+         * align with the P&F grid instead of the raw OHLC data.
+         */
+        private getBarDataRows;
+        private get opts();
+        /** Reads an option falling back to defaults; `nullish` = use `??` instead of `||`. */
+        private opt;
+        /** Writes an option and triggers a repaint. */
+        private setOpt;
+        private _positionExplicitlySet;
+        get position(): BarMarkerPosition;
+        set position(value: BarMarkerPosition);
+        get marker(): BarMarkerKind;
+        set marker(value: BarMarkerKind);
+        private _anchorExplicitlySet;
+        get anchorSource(): BarMarkerAnchor;
+        set anchorSource(value: BarMarkerAnchor);
+        get offsetY(): number;
+        set offsetY(value: number);
+        get badgeBorderRadius(): number;
+        set badgeBorderRadius(value: number);
+        get badgeBorderColor(): string;
+        set badgeBorderColor(value: string);
+        get badgeBorderWidth(): number;
+        set badgeBorderWidth(value: number);
+        get backgroundColor(): string;
+        set backgroundColor(value: string);
+        get textColor(): string;
+        set textColor(value: string);
+        get connectLines(): boolean;
+        set connectLines(value: boolean);
+        get neighborSearchRange(): number;
+        set neighborSearchRange(value: number);
+        private _colorExplicitlySet;
+        get markerColor(): BarMarkerColor;
+        set markerColor(value: BarMarkerColor);
+        get customMarkerColor(): string;
+        set customMarkerColor(value: string);
+        get gradientFrom(): string;
+        set gradientFrom(value: string);
+        get gradientTo(): string;
+        set gradientTo(value: string);
         get resizable(): boolean;
         set resizable(_value: boolean);
         get magnetMode(): string;
         set magnetMode(_value: string);
         get magnetPoint(): string;
         set magnetPoint(_value: string);
-        /**
-         * The label text ('E' by default when empty)
-         */
         get text(): string;
         set text(value: string);
+        /**
+         * Returns the text with dynamic macros resolved: {price} {open} {high} {low}
+         * {close} {volume} {time} (HH:mm) {date} (YYYY-MM-DD).
+         */
+        get resolvedText(): string;
         finishNewShape(): void;
         bounds(): IBounds;
         paint(): void;
         hitTest(point: IPoint): boolean;
+        /** Draws the badge background/border and the label text. */
+        private paintBadge;
+        /** Paints connecting lines to neighboring LINE BarMarkerShapes. */
+        private paintConnections;
+        private resolvedMarkerKind;
+        private getMarkerLayoutForConnection;
+        /** Resolves ARROW_AUTO to the actual arrow kind based on bar position. */
+        private resolveMarkerKind;
+        /**
+         * Resolves the final marker color: explicit user choice (preset/custom) wins,
+         * otherwise falls back to auto-detection from the candle direction.
+         */
+        private resolveMarkerColor;
+        /**
+         * Resolves anchor value when only a subset of OHLC data is available
+         * (e.g. Line/Area charts or P&F columns that lack full OHLC).
+         */
+        private resolveAnchorValue;
+        private resolveGradient;
         /**
-         * Auto-detects position and color from the bar type:
-         * bullish (close >= open) — green marker above high,
-         * bearish (close < open) — red marker below low.
+         * Resolves position, color and anchor value for a bar.
+         * User-set position/anchorSource win over auto-detection from candle direction.
          */
         private getBarDetails;
+        /**
+         * Line / Area charts expose a single closing price per record.
+         * The marker is always placed at the close value, above the line.
+         */
+        private getLineOrAreaBarDetails;
         /**
          * Snaps the shape point to the nearest bar on creation:
          * X is aligned to the bar center, Y is placed above high (or below low)
          * depending on the bar direction.
          */
         private snapToBar;
-        /**
-         * Computes pixel layout of the marker relative to its bar for the current frame
-         */
+        /** Computes pixel layout of the marker relative to its bar for the current frame. */
         private markerLayout;
         protected magnetizePoint(point: IPoint): IPoint;
     }
+    export {};
 }
 declare module FintaChart {
     /**

package/htmldialogs/ShapeSettingsDialog.html

@@ -262,6 +262,138 @@
                             </div>
                         </div>
                     </div>
+                    <!-- BarMarkerShape: marker type, position & colour -->
+                    <div id="tcdShapeDialog_pane_barMarker">
+                        <div class="tcdDialog-body-content">
+                            <!-- Marker Type -->
+                            <div class="tcdDialog-content-items">
+                                <div class="tcdDialog-left-part">
+                                    <label class="tcdLabel" for="tcdShapeDialog_input_barMarkerKind" data-i18n="shape.barMarker.markerType"></label>
+                                </div>
+                                <div class="tcdDialog-right-part">
+                                    <div class="tcdDialog-content-item">
+                                        <select id="tcdShapeDialog_input_barMarkerKind" class="tcdDropdown">
+                                            <option value="dot" data-i18n="shape.barMarker.kindDot"></option>
+                                            <option value="arrowAuto" data-i18n="shape.barMarker.kindArrowAuto"></option>
+                                            <option value="arrowUp" data-i18n="shape.barMarker.kindArrowUp"></option>
+                                            <option value="arrowDown" data-i18n="shape.barMarker.kindArrowDown"></option>
+                                            <option value="square" data-i18n="shape.barMarker.kindSquare"></option>
+                                            <option value="diamond" data-i18n="shape.barMarker.kindDiamond"></option>
+                                            <option value="star" data-i18n="shape.barMarker.kindStar"></option>
+                                            <option value="cross" data-i18n="shape.barMarker.kindCross"></option>
+                                            <option value="line" data-i18n="shape.barMarker.kindLine"></option>
+                                        </select>
+                                    </div>
+                                </div>
+                            </div>
+                            <!-- Marker Color -->
+                            <div class="tcdDialog-content-items">
+                                <div class="tcdDialog-left-part">
+                                    <label class="tcdLabel" for="tcdShapeDialog_input_barMarkerColor" data-i18n="shape.barMarker.color"></label>
+                                </div>
+                                <div class="tcdDialog-right-part">
+                                    <div class="tcdDialog-content-item">
+                                        <select id="tcdShapeDialog_input_barMarkerColor" class="tcdDropdown">
+                                            <option value="auto" data-i18n="shape.barMarker.colorAuto"></option>
+                                            <option value="#ec5a58" data-i18n="shape.barMarker.colorRed"></option>
+                                            <option value="#26a69a" data-i18n="shape.barMarker.colorGreen"></option>
+                                            <option value="#f7931a" data-i18n="shape.barMarker.colorOrange"></option>
+                                            <option value="#2196f3" data-i18n="shape.barMarker.colorBlue"></option>
+                                            <option value="#fdd835" data-i18n="shape.barMarker.colorYellow"></option>
+                                            <option value="#ab47bc" data-i18n="shape.barMarker.colorPurple"></option>
+                                            <option value="#ffffff" data-i18n="shape.barMarker.colorWhite"></option>
+                                            <option value="custom" data-i18n="shape.barMarker.colorCustom"></option>
+                                        </select>
+                                    </div>
+                                    <div class="tcdDialog-content-item tcdColorWithBorder" id="tcdShapeDialog_barMarkerCustomColorWrap" style="display:none;">
+                                        <input id="tcdShapeDialog_input_barMarkerCustomColor" type="text" class="tcdSpectrum">
+                                    </div>
+                                </div>
+                            </div>
+                            <!-- Gradient -->
+                            <div class="tcdDialog-content-items">
+                                <div class="tcdDialog-left-part">
+                                    <label class="tcdLabel" data-i18n="shape.barMarker.gradient"></label>
+                                </div>
+                                <div class="tcdDialog-right-part">
+                                    <div class="tcdDialog-content-item tcdColorWithBorder">
+                                        <input id="tcdShapeDialog_input_barMarkerGradientFrom" type="text" class="tcdSpectrum" data-i18n="[placeholder]shape.barMarker.gradientFrom">
+                                    </div>
+                                    <div class="tcdDialog-content-item tcdColorWithBorder">
+                                        <input id="tcdShapeDialog_input_barMarkerGradientTo" type="text" class="tcdSpectrum" data-i18n="[placeholder]shape.barMarker.gradientTo">
+                                    </div>
+                                </div>
+                            </div>
+                            <hr class="tcdDelimiter"/>
+                            <!-- Badge Style -->
+                            <div class="tcdDialog-content-items">
+                                <div class="tcdDialog-left-part">
+                                    <label class="tcdLabel" data-i18n="shape.barMarker.badgeRadius"></label>
+                                </div>
+                                <div class="tcdDialog-right-part">
+                                    <div class="tcdDialog-content-item">
+                                        <select id="tcdShapeDialog_input_barMarkerBadgeRadius" class="tcdDropdown">
+                                            <option value="0">0</option>
+                                            <option value="2">2</option>
+                                            <option value="3" selected>3</option>
+                                            <option value="5">5</option>
+                                            <option value="8">8</option>
+                                            <option value="12">12</option>
+                                        </select>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="tcdDialog-content-items">
+                                <div class="tcdDialog-left-part">
+                                    <label class="tcdLabel" data-i18n="shape.barMarker.badgeBorder"></label>
+                                </div>
+                                <div class="tcdDialog-right-part">
+                                    <div class="tcdDialog-content-item tcdColorWithBorder">
+                                        <input id="tcdShapeDialog_input_barMarkerBadgeBorderColor" type="text" class="tcdSpectrum">
+                                    </div>
+                                    <div class="tcdDialog-content-item">
+                                        <select id="tcdShapeDialog_input_barMarkerBadgeBorderWidth" class="tcdDropdown">
+                                            <option value="0">0</option>
+                                            <option value="1" selected>1</option>
+                                            <option value="2">2</option>
+                                            <option value="3">3</option>
+                                        </select>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="tcdDialog-content-items">
+                                <div class="tcdDialog-left-part">
+                                    <label class="tcdLabel" data-i18n="shape.barMarker.badgeBgColor"></label>
+                                </div>
+                                <div class="tcdDialog-right-part">
+                                    <div class="tcdDialog-content-item tcdColorWithBorder">
+                                        <input id="tcdShapeDialog_input_barMarkerBackgroundColor" type="text" class="tcdSpectrum">
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="tcdDialog-content-items">
+                                <div class="tcdDialog-left-part">
+                                    <label class="tcdLabel" data-i18n="shape.barMarker.badgeTextColor"></label>
+                                </div>
+                                <div class="tcdDialog-right-part">
+                                    <div class="tcdDialog-content-item tcdColorWithBorder">
+                                        <input id="tcdShapeDialog_input_barMarkerTextColor" type="text" class="tcdSpectrum">
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="tcdDialog-content-items">
+                                <div class="tcdDialog-left-part">
+                                    <label class="tcdLabel" for="tcdShapeDialog_chk_barMarkerConnectLines" data-i18n="shape.barMarker.connectLines"></label>
+                                </div>
+                                <div class="tcdDialog-right-part">
+                                    <div class="tcdDialog-content-item" style="transform: translateX(6px);">
+                                        <input id="tcdShapeDialog_chk_barMarkerConnectLines" type="checkbox" class="js-switch" />
+                                        <label class="tcdLabel" for="tcdShapeDialog_chk_barMarkerConnectLines"></label>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                     <div id="tcdShapeDialog_position_tool_tp">
                         <div class="tcdDialog-body-content">
                             <div class="tcdDialog-content-items">

package/localization/en.json

@@ -230,7 +230,39 @@
     },
     "barMarker": {
       "name": "Bar marker",
-      "placeholder": "Enter marker text (default: E)"
+      "placeholder": "Enter marker text (default: E)",
+      "markerType": "Marker Type",
+      "kindDot": "Dot",
+      "kindArrowUp": "Arrow Up",
+      "kindArrowDown": "Arrow Down",
+      "kindArrowAuto": "Arrow (auto)",
+      "position": "Position",
+      "positionAuto": "Auto (by candle)",
+      "positionAbove": "Above",
+      "positionBelow": "Below",
+      "color": "Marker Color",
+      "colorAuto": "Auto (by candle)",
+      "colorRed": "Red",
+      "colorGreen": "Green",
+      "colorOrange": "Orange",
+      "colorBlue": "Blue",
+      "colorYellow": "Yellow",
+      "colorPurple": "Purple",
+      "colorWhite": "White",
+      "colorCustom": "Custom...",
+      "gradient": "Gradient (optional)",
+      "gradientFrom": "From",
+      "gradientTo": "To",
+      "kindSquare": "Square",
+      "kindDiamond": "Diamond",
+      "kindStar": "Star",
+      "kindCross": "Cross",
+      "kindLine": "Line",
+      "badgeRadius": "Badge Radius",
+      "badgeBorder": "Badge Border",
+      "badgeBgColor": "Badge Background",
+      "badgeTextColor": "Text Color",
+      "connectLines": "Connect Lines"
     },
     "lineSegment": {
       "name": "Trend line"

package/localization/uk.json

@@ -227,7 +227,39 @@
     },
     "barMarker": {
       "name": "Маркер бара",
-      "placeholder": "Введіть текст маркера (за замовчуванням: E)"
+      "placeholder": "Введіть текст маркера (за замовчуванням: E)",
+      "markerType": "Тип маркера",
+      "kindDot": "Точка",
+      "kindArrowUp": "Стрілка вгору",
+      "kindArrowDown": "Стрілка вниз",
+      "kindArrowAuto": "Стрілка (авто)",
+      "position": "Позиція",
+      "positionAuto": "Авто (за свічкою)",
+      "positionAbove": "Зверху",
+      "positionBelow": "Знизу",
+      "color": "Колір маркера",
+      "colorAuto": "Авто (за свічкою)",
+      "colorRed": "Червоний",
+      "colorGreen": "Зелений",
+      "colorOrange": "Помаранчевий",
+      "colorBlue": "Синій",
+      "colorYellow": "Жовтий",
+      "colorPurple": "Фіолетовий",
+      "colorWhite": "Білий",
+      "colorCustom": "Власний...",
+      "gradient": "Градієнт (необов'язково)",
+      "gradientFrom": "Від",
+      "gradientTo": "До",
+      "kindSquare": "Квадрат",
+      "kindDiamond": "Ромб",
+      "kindStar": "Зірка",
+      "kindCross": "Хрест",
+      "kindLine": "Лінія",
+      "badgeRadius": "Радіус бейджу",
+      "badgeBorder": "Рамка бейджу",
+      "badgeBgColor": "Фон бейджу",
+      "badgeTextColor": "Колір тексту",
+      "connectLines": "З'єднати лінії"
     },
     "lineSegment": {
       "name": "Відрізок"

package/package.json

@@ -2,7 +2,7 @@
     "name": "@fintatech/fintachart",
     "description": "FintaChart financial charting component",
     "homepage": "https://fintatech.com",
-    "version": "3.1.13",
+    "version": "3.1.14",
     "types": "./d.ts/FintaChart.d.ts",
     "license": "SEE LICENSE IN LICENSE.md",
     "repository": {