@pradeepjadhav/trading-reload-chart 1.2.0 → 1.4.0

package/README.md

@@ -253,6 +253,46 @@ export function ChartPanel() {
 - `TradingReload` fills **100%** of that container.
 - Do **not** import chart CSS manually; styles ship with the component (`src/styles/chart.css`).
 
+### Watermark
+
+Add a text watermark (symbol / timeframe label, chart id, etc.) through `config.watermark`.
+It renders on its own canvas **beneath** candles, shapes, trades, and the crosshair, so it
+never intercepts pointer events.
+
+```tsx
+import {
+  TradingReload,
+  type ChartConfig,
+  type DeepPartial,
+} from "@pradeepjadhav/trading-reload-chart";
+
+const config = {
+  watermark: {
+    text: `${symbol}, ${timeframe}`,
+    position: "top-center",
+    fontSize: 24,
+    fontWeight: 700,
+    color: "#FFFFFF",
+    opacity: 0.35,
+  },
+} satisfies DeepPartial<ChartConfig>;
+
+<TradingReload config={config} /* … */ />;
+```
+
+| Option        | Type                                                                                     | Default                                     | Description                              |
+| ------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------- | ---------------------------------------- |
+| `text`        | `string`                                                                                 | `""`                                        | Empty text hides the watermark            |
+| `position`    | `"center" \| "top-center" \| "bottom-center" \| "left-center" \| "right-center"`         | `"center"`                                  | Anchor inside the plot area               |
+| `fontSize`    | `number`                                                                                 | `48`                                        | Font size in CSS pixels                  |
+| `fontWeight`  | `number`                                                                                 | `700`                                       | Numeric font weight                       |
+| `fontFamily`  | `string`                                                                                 | `"Inter, system-ui, -apple-system, sans-serif"` | CSS font stack                         |
+| `color`       | `string`                                                                                 | `COLORS.white`                              | Text color                                |
+| `opacity`     | `number`                                                                                 | `0.25`                                      | Clamped to `0` - `1`                      |
+| `padding`     | `number`                                                                                 | `16`                                        | Inset from the plot edge                  |
+
+> Because `config` is deep-merged, you can pass only the keys you want to change.
+
 ### 3. Vite / Create React App
 
 ```tsx
@@ -286,6 +326,7 @@ Import from the package root:
 | `Candle`, `OpenTrade`, `ClosedTrade`, …      | Domain types         |
 | `Shape`, `ShapeToolType`, shape payloads     | Drawing types        |
 | `ChartConfig`, `CHART_CONFIG`, `DeepPartial` | Configuration        |
+| `WatermarkConfig`, `WatermarkPosition`       | Watermark types      |
 | `ClosedTradeIndicator`, trade handle types   | Trade overlay types  |
 
 Controlled props (parent owns state):
@@ -319,7 +360,7 @@ trading-reload-chart/
 │   ├── index.ts          # Public exports
 │   ├── react/            # TradingReload component
 │   ├── chart/            # ChartController, DOM, utils
-│   ├── canvas/layers/    # Canvas layers (candles, shapes, trades, …)
+│   ├── canvas/layers/    # Canvas layers (candles, volume, watermark, shapes, trades, …)
 │   ├── config/           # CHART_CONFIG and types
 │   ├── models/           # Candle, Trade, ChartViewport, … (*.types.ts)
 │   ├── helpers/          # Shared pure utilities
@@ -336,11 +377,12 @@ Type declarations live in `*.types.ts` files next to implementation code (see AG
 
 ## Features
 
-- Layered canvas rendering (volume, candles, shapes, trades, axes, crosshair)
+- Layered canvas rendering (volume, watermark, candles, shapes, trades, axes, crosshair)
 - Pan, horizontal wheel zoom, Ctrl+wheel vertical zoom
 - Drawing tools (trendline, rectangle, path, fib, long/short position)
 - Open trade SL/TP drag with `onTradeModify` on release
 - Closed trade markers
+- Configurable text watermark layer
 - Deep-merge chart `config` over defaults
 
 ---

package/dist/canvas/layers/CrosshairLayer.d.ts

@@ -9,6 +9,7 @@ export declare class CrosshairLayer {
     crosshairStyle: CrosshairStyle;
     constructor(options: CrosshairLayerOptions);
     updateMousePosition(x: number, y: number, options?: UpdateMousePositionOptions): void;
+    setPosition(x: number, y: number): void;
     hide(): void;
     applyCrosshairStyle(): void;
     drawVerticalCrosshairLine(ctx: CanvasRenderingContext2D, height: number): void;

package/dist/canvas/layers/ExistingCandlesLayer.d.ts

@@ -1,4 +1,5 @@
 import { Candle } from '../../models/Candle.types';
+import { ChartCursorState, ChartViewState } from '../../models/ChartSync.types';
 import { ChartViewport } from '../../models/ChartViewport.types';
 import { VisibleRange } from '../../models/VisibleRange.types';
 import { DrawCandlesOptions, DrawPriceLineOptions, DrawSingleCandleOptions, ExistingCandlesLayerOptions } from './ExistingCandlesLayer.types';
@@ -60,6 +61,14 @@ export declare class ExistingCandlesLayer {
     get liveCandle(): Candle;
     get viewport(): ChartViewport;
     getVisibleRange(chartWidth: number): VisibleRange;
+    getViewState(): ChartViewState | null;
+    setViewState(view: ChartViewState): void;
+    setCursorState(cursor: ChartCursorState): {
+        candle: Candle;
+        candleIndex: number;
+        x: number;
+        y: number;
+    } | null;
     getCandleX(candleIndex: number): number;
     getCandleCenterX(candleIndex: number): number;
     getNearestCandleIndexByX(x: number): number | null;
@@ -90,12 +99,40 @@ export declare class ExistingCandlesLayer {
     private getInitialPriceRange;
     private getInitialFallbackPercent;
     private detectCandleTimeframeMs;
+    private hasUsableTimeframe;
     private applyManualViewportOverrides;
     private closeLastCandle;
     private appendLiveCandle;
     private updateAutoFollowAfterAppend;
     private clampCandleIndex;
     private getRightEdgeCandleIndex;
+    private getRightmostVisibleTime;
+    private getRightmostVisibleX;
+    private getRightmostVisibleIndex;
+    private getRightEdgeTime;
+    private getVisibleDurationMs;
+    private getTimeDeltaInCandleSlots;
+    /**
+     * Resolves a timestamp to the candle whose span contains it.
+     *
+     * Synced cursors arrive from charts of a different timeframe, so the
+     * incoming timestamp is not a multiple of this chart's timeframe away from
+     * the first candle. Dividing by this chart's timeframe to derive an index
+     * therefore drifts by the timeframe ratio, and clamping that drift pinned
+     * the crosshair to the last candle. Binary searching the real candle times
+     * is correct for any incoming timestamp and any target timeframe.
+     *
+     * Containment is measured against the candle's open time, so a finer
+     * timeframe hovering partway through a coarse candle snaps to the coarse
+     * candle that is actually covering that moment, rather than to whichever
+     * neighbour happens to start closest to the timestamp.
+     */
+    private getCandleIndexByTime;
+    /**
+     * Binary search for the first candle whose time is greater than or equal to
+     * `targetTime`, falling back to the last index when every candle is earlier.
+     */
+    private findCandleIndexAtOrAfter;
     private getNextHorizontalZoom;
     private getNextVerticalPriceRange;
     private clearCanvas;

package/dist/canvas/layers/ShapesLayer/LineShape.d.ts

@@ -1,4 +1,4 @@
-import { ShapeCoordinateConverter, CommonShapeConfig, ShapeHandleHitbox, ShapePoint, ShapeVertex, TrendlineShape } from './ShapesLayer.types';
+import { CommonShapeConfig, ShapeCoordinateConverter, ShapeHandleHitbox, ShapePoint, ShapeVertex, TrendlineShape } from './ShapesLayer.types';
 export declare class LineShape {
     static defaultConfig: CommonShapeConfig;
     static draw({ ctx, shape, converter, config, selected, hovered, }: {

package/dist/canvas/layers/ShapesLayer/PathShape.d.ts

@@ -1,4 +1,4 @@
-import { PathShapeData, ShapeCoordinateConverter, CommonShapeConfig, ShapeHandleHitbox, ShapePoint, ShapeVertex } from './ShapesLayer.types';
+import { CommonShapeConfig, PathShapeData, ShapeCoordinateConverter, ShapeHandleHitbox, ShapePoint, ShapeVertex } from './ShapesLayer.types';
 export declare class PathShape {
     static defaultConfig: CommonShapeConfig;
     static draw({ ctx, shape, converter, config, selected, hovered, }: {

package/dist/canvas/layers/ShapesLayer/RectangleShape.d.ts

@@ -1,4 +1,4 @@
-import { RectangleShapeData, ShapeCoordinateConverter, ShapeHandleHitbox, ShapePoint, ShapeVertex, RectangleShapeConfig } from './ShapesLayer.types';
+import { RectangleShapeConfig, RectangleShapeData, ShapeCoordinateConverter, ShapeHandleHitbox, ShapePoint, ShapeVertex } from './ShapesLayer.types';
 export declare class RectangleShape {
     static defaultConfig: RectangleShapeConfig;
     static draw({ ctx, shape, converter, config, selected, hovered, }: {

package/dist/canvas/layers/ShapesLayer/ShapesLayer.helpers.d.ts

@@ -1,5 +1,5 @@
 import { Candle } from '../../../models/Candle.types';
-import { FibLevelValue, Shape, ShapeBoundingBox, ShapeCoordinateConverter, CommonShapeConfig, ShapeHandleHitbox, ShapeLineStyle, ShapePoint, ShapeVertex } from './ShapesLayer.types';
+import { CommonShapeConfig, FibLevelValue, Shape, ShapeBoundingBox, ShapeCoordinateConverter, ShapeHandleHitbox, ShapeLineStyle, ShapePoint, ShapeVertex } from './ShapesLayer.types';
 export declare const SHAPE_HIT_TOLERANCE = 8;
 export declare const SHAPE_HANDLE_RADIUS = 5;
 export declare const generateShapeId: () => string;

package/dist/canvas/layers/TradeLayer/TradeLayer.types.d.ts

@@ -1,4 +1,4 @@
-import { MissingTradeProtectionHandleRectConfig, ClosedTradeIndicatorArrowConfig as ClosedTradeIndicatorArrowConfig, TemporaryTradeProtectionHandleRectConfig, TradeHandleLineConfig, TradeHandleRectConfig, TradeHandleStyleConfig } from '../../../config/chartConfig.types';
+import { ClosedTradeIndicatorArrowConfig, MissingTradeProtectionHandleRectConfig, TemporaryTradeProtectionHandleRectConfig, TradeHandleLineConfig, TradeHandleRectConfig, TradeHandleStyleConfig } from '../../../config/chartConfig.types';
 import { ChartViewport } from '../../../models/ChartViewport.types';
 import { ClosedTrade, OpenTrade, TradeDirection } from '../../../models/Trade.types';
 /**

package/dist/canvas/layers/WatermarkLayer/WatermarkLayer.d.ts

@@ -0,0 +1,40 @@
+import { WatermarkConfig } from '../../../config/chartConfig.types';
+import { WatermarkLayerOptions } from './WatermarkLayer.types';
+/**
+ * Text watermark drawn on its own canvas beneath the candlestick and
+ * interaction layers, so it never intercepts pointer events and is always
+ * painted over by candles, shapes, trades, and the crosshair.
+ *
+ * @example
+ * ```ts
+ * const layer = new WatermarkLayer({
+ *   canvas,
+ *   config: { ...CHART_CONFIG.watermark, text: "USDJPY, 15m" },
+ * });
+ * layer.resize(800, 600);
+ * layer.render();
+ * ```
+ */
+export declare class WatermarkLayer {
+    #private;
+    constructor(options: WatermarkLayerOptions);
+    setConfig(config: WatermarkConfig): void;
+    /**
+     * Resizes the canvas and stores the plot size used for placement.
+     *
+     * @example
+     * ```ts
+     * layer.resize(800, 600);
+     * ```
+     */
+    resize(width: number, height: number): void;
+    /**
+     * Clears the canvas and paints the watermark when it has text.
+     *
+     * @example
+     * ```ts
+     * layer.render();
+     * ```
+     */
+    render(): void;
+}

package/dist/canvas/layers/WatermarkLayer/WatermarkLayer.helpers.d.ts

@@ -0,0 +1,27 @@
+import { ResolveWatermarkTextPlacementOptions, WatermarkTextPlacement } from './WatermarkLayer.types';
+/**
+ * Resolves the canvas text anchor for a watermark position.
+ *
+ * `textAlign` and `textBaseline` are returned alongside the coordinates so the
+ * caller can apply them to the context before measuring or drawing the text.
+ *
+ * @example
+ * ```ts
+ * const { x, y, textAlign, textBaseline } = resolveWatermarkTextPlacement({
+ *   position: "bottom-center",
+ *   width: 800,
+ *   height: 600,
+ *   padding: 16,
+ * });
+ * ```
+ */
+export declare const resolveWatermarkTextPlacement: (options: ResolveWatermarkTextPlacementOptions) => WatermarkTextPlacement;
+/**
+ * Clamps an opacity into the `0` - `1` range accepted by the canvas context.
+ *
+ * @example
+ * ```ts
+ * clampWatermarkOpacity(1.4); // 1
+ * ```
+ */
+export declare const clampWatermarkOpacity: (opacity: number) => number;

package/dist/canvas/layers/WatermarkLayer/WatermarkLayer.types.d.ts

@@ -0,0 +1,66 @@
+import { WatermarkConfig } from '../../../config/chartConfig.types';
+/**
+ * Constructor options for {@link WatermarkLayer}.
+ *
+ * @example
+ * ```ts
+ * const layer = new WatermarkLayer({
+ *   canvas,
+ *   config: { ...CHART_CONFIG.watermark, text: "USDJPY, 15m" },
+ * });
+ * ```
+ */
+export type WatermarkLayerOptions = {
+    /** Canvas the watermark is painted on. */
+    canvas: HTMLCanvasElement;
+    /** Resolved watermark configuration. */
+    config: WatermarkConfig;
+};
+/**
+ * Text anchor resolved from a {@link WatermarkPosition} and the plot size.
+ *
+ * All values are in CSS pixels.
+ *
+ * @example
+ * ```ts
+ * const placement: WatermarkTextPlacement = {
+ * 	x: 400,
+ * 	y: 16,
+ * 	textAlign: "center",
+ * 	textBaseline: "top",
+ * };
+ * ```
+ */
+export type WatermarkTextPlacement = {
+    /** Horizontal anchor point. */
+    x: number;
+    /** Vertical anchor point. */
+    y: number;
+    /** Canvas text alignment applied before measuring. */
+    textAlign: CanvasTextAlign;
+    /** Canvas text baseline applied before measuring. */
+    textBaseline: CanvasTextBaseline;
+};
+/**
+ * Inputs used to resolve the watermark text anchor.
+ *
+ * @example
+ * ```ts
+ * const placement = resolveWatermarkTextPlacement({
+ *   position: "top-center",
+ *   width: 800,
+ *   height: 600,
+ *   padding: 16,
+ * });
+ * ```
+ */
+export type ResolveWatermarkTextPlacementOptions = {
+    /** Configured watermark position. */
+    position: WatermarkConfig["position"];
+    /** Plot width in CSS pixels. */
+    width: number;
+    /** Plot height in CSS pixels. */
+    height: number;
+    /** Padding between the watermark and the plot edge. */
+    padding: number;
+};

package/dist/chart/ChartController.d.ts

@@ -1,8 +1,13 @@
+import { ChartCursorState, ChartViewState } from '../models/ChartSync.types';
 import { ChartControllerProps } from './ChartController.types';
 export declare class ChartController {
     #private;
     constructor(container: HTMLElement, props: ChartControllerProps);
     updateProps(props: ChartControllerProps): void;
     resetChartView(): void;
+    setView(view: ChartViewState): void;
+    getView(): ChartViewState | null;
+    setCursor(cursor: ChartCursorState | null): void;
+    hideCursor(): void;
     destroy(): void;
 }

package/dist/chart/ChartController.types.d.ts

@@ -1,6 +1,7 @@
 import { Shape, ShapeAddedPayload, ShapeModifiedPayload, ShapeSelectedPayload, ShapeToolType } from '../canvas/layers/ShapesLayer/ShapesLayer.types';
 import { ChartConfig } from '../config/chartConfig.types';
 import { Candle } from '../models/Candle.types';
+import { ChartCursorState, ChartViewState } from '../models/ChartSync.types';
 import { ClosedTrade, OpenTrade } from '../models/Trade.types';
 import { DeepPartial } from './utils/deepPartial.types';
 /**
@@ -249,4 +250,13 @@ export type ChartControllerProps = {
     onTradeClose?: (payload: {
         ticket: number;
     }) => void;
+    /**
+     * Called after a local pan, zoom, reset, or resize changes the chart view.
+     * The timestamp-based payload can be applied to charts with different candle timeframes.
+     */
+    onViewChange?: (view: ChartViewState) => void;
+    /**
+     * Called when the local crosshair moves, and with `null` when it leaves the chart.
+     */
+    onCursorMove?: (cursor: ChartCursorState | null) => void;
 };

package/dist/chart/createChartDom.types.d.ts

@@ -3,6 +3,7 @@ export type ChartDomElements = {
     layout: HTMLDivElement;
     stack: HTMLDivElement;
     volumeCanvas: HTMLCanvasElement;
+    watermarkCanvas: HTMLCanvasElement;
     candleCanvas: HTMLCanvasElement;
     shapesCanvas: HTMLCanvasElement;
     tradesCanvas: HTMLCanvasElement;

package/dist/chart/utils/resolveWheelZoomAxis.d.ts

@@ -0,0 +1,7 @@
+import { WheelZoomAxis } from './resolveWheelZoomAxis.types';
+/**
+ * Horizontal for a plain wheel, and horizontal for a trackpad pinch so the
+ * gesture zooms the time axis. Vertical stays reserved for a real Ctrl/Cmd +
+ * mouse wheel so existing mouse and keyboard-driven zoom is untouched.
+ */
+export declare const resolveWheelZoomAxis: (event: WheelEvent) => WheelZoomAxis;

package/dist/chart/utils/resolveWheelZoomAxis.types.d.ts

@@ -0,0 +1 @@
+export type WheelZoomAxis = "x" | "y";

package/dist/config/chartConfig.types.d.ts

@@ -116,6 +116,46 @@ export type VolumeConfig = {
     bottomOffset: number;
     minBarHeight: number;
 };
+/**
+ * Placement of the watermark inside the plot area.
+ *
+ * @example `"top-center"`
+ */
+export type WatermarkPosition = "center" | "top-center" | "bottom-center" | "left-center" | "right-center";
+/**
+ * Text watermark rendered on a dedicated canvas beneath the candlestick and
+ * interaction layers.
+ *
+ * @example
+ * ```ts
+ * const watermark: WatermarkConfig = {
+ * 	text: "USDJPY, 15m",
+ * 	position: "top-center",
+ * 	fontSize: 24,
+ * 	fontWeight: 700,
+ * 	color: "#ffffff",
+ * 	opacity: 0.35,
+ * };
+ * ```
+ */
+export type WatermarkConfig = {
+    /** Watermark text. An empty string hides the watermark. */
+    text: string;
+    /** Watermark placement inside the plot area. */
+    position: WatermarkPosition;
+    /** Font size in CSS pixels, before device pixel ratio scaling. */
+    fontSize: number;
+    /** Numeric CSS font weight. */
+    fontWeight: number;
+    /** CSS font family used to measure and paint the watermark. */
+    fontFamily: string;
+    /** Watermark color, any CSS color value. */
+    color: string;
+    /** Watermark opacity between `0` and `1`. */
+    opacity: number;
+    /** Padding in CSS pixels between the watermark and the plot edge. */
+    padding: number;
+};
 /**
  * Crosshair line style.
  *
@@ -633,6 +673,7 @@ export type ChartConfig = {
     zoom: ZoomConfig;
     candles: CandlesConfig;
     volume: VolumeConfig;
+    watermark: WatermarkConfig;
     crosshair: CrosshairConfig;
     tradeHandles: TradeHandlesConfig;
     closedTradeIndicators: ClosedTradeIndicatorsConfig;

package/dist/index.d.ts

@@ -4,8 +4,9 @@ export type { ChartControllerProps, PreviousDay, TradeModifyPayload, } from './c
 export type { DeepPartial } from './chart/utils/deepPartial.types';
 export type { CanvasPoint } from './chart/utils/getCanvasPoint.types';
 export { CHART_CONFIG } from './config/chartConfig';
-export type { ChartConfig, PreviousDayHighLowConfig } from './config/chartConfig.types';
+export type { ChartConfig, PreviousDayHighLowConfig, WatermarkConfig, WatermarkPosition, } from './config/chartConfig.types';
 export type { Candle } from './models/Candle.types';
+export type { ChartCursorState, ChartViewState } from './models/ChartSync.types';
 export type { ChartViewport } from './models/ChartViewport.types';
 export type { Point2D } from './models/Point.types';
 export type { BaseTrade, ClosedTrade, OpenTrade, TradeDirection } from './models/Trade.types';

package/dist/models/Candle.types.d.ts

@@ -55,9 +55,12 @@ export type Candle = {
     /**
      * Current ask price during this candle.
      *
+     * Only the forming candle carries it; feeds that omit a live tick leave it
+     * undefined, so the ask line falls back to this candle's close.
+     *
      * @example `1.0853`
      */
-    ask: number;
+    ask?: number;
     /**
      * `false` while the realtime candle is still forming.
      *

package/dist/models/ChartSync.types.d.ts

@@ -0,0 +1,16 @@
+export type ChartViewState = {
+    /** UTC timestamp of the chart's rightmost visible candle. */
+    rightmostVisibleTime: number;
+    /** Normalized screen position of that candle, from 0 to 1. */
+    rightmostVisibleX: number;
+    /** UTC timestamp of the plot's right edge. */
+    rightEdgeTime: number;
+    /** Visible duration represented by the plot, in milliseconds. */
+    visibleDurationMs: number;
+};
+export type ChartCursorState = {
+    /** UTC timestamp selected by the vertical crosshair. */
+    time: number;
+    /** Price selected by the horizontal crosshair. */
+    price: number;
+};

package/dist/react/TradingReload.types.d.ts

@@ -1,5 +1,6 @@
 import { CSSProperties } from 'react';
 import { ChartControllerProps } from '../chart/ChartController.types';
+import { ChartCursorState, ChartViewState } from '../models/ChartSync.types';
 /**
  * Imperative methods exposed through the `ref` passed to {@link TradingReload}.
  *
@@ -24,6 +25,45 @@ export type TradingReloadHandle = {
      * ```
      */
     resetChartView: () => void;
+    /**
+     * Returns the current timestamp-based view state, or `null` when the chart
+     * has no candles to describe.
+     *
+     * @example
+     * ```tsx
+     * const view = chartRef.current?.getView();
+     * ```
+     */
+    getView: () => ChartViewState | null;
+    /**
+     * Applies a timestamp-based view state so charts with different candle
+     * timeframes stay aligned. Does not emit `onViewChange`.
+     *
+     * @example
+     * ```tsx
+     * chartRef.current?.setView(sourceView);
+     * ```
+     */
+    setView: (view: ChartViewState) => void;
+    /**
+     * Draws a synced crosshair at the given time and price, snapped to the
+     * nearest candle. Does not emit `onCursorMove`.
+     *
+     * @example
+     * ```tsx
+     * chartRef.current?.setCursor({ time, price });
+     * ```
+     */
+    setCursor: (cursor: ChartCursorState | null) => void;
+    /**
+     * Hides the crosshair and axis labels.
+     *
+     * @example
+     * ```tsx
+     * chartRef.current?.hideCursor();
+     * ```
+     */
+    hideCursor: () => void;
 };
 /**
  * Props accepted by the public `TradingReload` React component.

package/dist/trading-reload-chart.css

@@ -1,2 +1,2 @@
-.trading-reload-chart{box-sizing:border-box;outline:none;width:100%;height:100%;overflow:hidden}.trading-reload-chart *,.trading-reload-chart :before,.trading-reload-chart :after{box-sizing:border-box}.trading-reload-chart__layout{--axis-x-height:30px;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.trading-reload-chart__stack{flex:1;height:100%;position:relative;overflow:hidden}.trading-reload-chart canvas{display:block}.trading-reload-chart__volume,.trading-reload-chart__plot,.trading-reload-chart__shapes,.trading-reload-chart__trades,.trading-reload-chart__overlay{width:100%;height:calc(100% - var(--axis-x-height));position:absolute;top:0;left:0}.trading-reload-chart__volume{z-index:0;pointer-events:none}.trading-reload-chart__plot{z-index:1}.trading-reload-chart__shapes{z-index:2}.trading-reload-chart__trades{z-index:3}.trading-reload-chart__overlay{z-index:4}.trading-reload-chart__axis-x{width:100%;height:var(--axis-x-height);z-index:5;position:absolute;bottom:0;left:0}.trading-reload-chart__axis-y{height:calc(100% - var(--axis-x-height));z-index:4;flex-shrink:0;position:relative}
+.trading-reload-chart{box-sizing:border-box;outline:none;width:100%;height:100%;overflow:hidden}.trading-reload-chart *,.trading-reload-chart :before,.trading-reload-chart :after{box-sizing:border-box}.trading-reload-chart__layout{--axis-x-height:30px;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.trading-reload-chart__stack{flex:1;height:100%;position:relative;overflow:hidden}.trading-reload-chart canvas{display:block}.trading-reload-chart__volume,.trading-reload-chart__watermark,.trading-reload-chart__plot,.trading-reload-chart__shapes,.trading-reload-chart__trades,.trading-reload-chart__overlay{width:100%;height:calc(100% - var(--axis-x-height));position:absolute;top:0;left:0}.trading-reload-chart__volume{z-index:0;pointer-events:none}.trading-reload-chart__watermark{z-index:1;pointer-events:none}.trading-reload-chart__plot{z-index:2}.trading-reload-chart__shapes{z-index:3}.trading-reload-chart__trades{z-index:4}.trading-reload-chart__overlay{z-index:5}.trading-reload-chart__axis-x{width:100%;height:var(--axis-x-height);z-index:6;position:absolute;bottom:0;left:0}.trading-reload-chart__axis-y{height:calc(100% - var(--axis-x-height));z-index:4;flex-shrink:0;position:relative}
 /*$vite$:1*/