KLineChart icon indicating copy to clipboard operation
KLineChart copied to clipboard

Add long/short position overlay

Open Daic115 opened this issue 9 months ago • 3 comments

Overview

This PR introduces two new overlay templates (longPosition and shortPosition) for visualizing trading positions. These overlays help users analyze profit/loss zones and risk-reward ratios.

Key Features

1. Interactive Position Visualization

Draws customizable rectangles for target (profit) and loss zones.

Automatically calculates and displays price change percentages and risk-reward ratios.

2. Multi-language & Styling Support

Labels (Target/Loss/Risk-Reward) support i18n localization.

Fully customizable styles for rectangles, text, and mid-line via PositionOverlayStyle.

3. User Interaction

Hover/selection states highlight active overlays.

Points are constrained to valid positions during dragging/drawing.

TEST

See tests/html/overlay/4.html

example1

Daic115 avatar May 02 '25 15:05 Daic115

This is a very useful feature

TonyChen-SH avatar May 20 '25 00:05 TonyChen-SH

Using it in a 'local' way: added as a local file, changed all the imports to the following:

import { utils } from 'klinecharts';
const { isNumber, isValid } = utils;
import type { OverlayTemplate, OverlayFigure, OverlayCreateFiguresCallback, OverlayCreateFiguresCallbackParams, DeepPartial, Point, Coordinate, RectAttrs, TextStyle, LineStyle, RectStyle } from 'klinecharts';

and registered it with:

import { registerOverlay } from 'klinecharts'
import {longPosition, shortPosition} from '@/components/.../overlays/longShortPosition'
...
    registerOverlay(longPosition);
    registerOverlay(shortPosition);

Works great! Thank you so much! One question though: how to save it and apply for the different chart? On onDrawEnd there's a overlay context about 3K lines long. Tried to save overlay by picking details manually: id, points, styles, etc. Just to pick absolute minimum and skip _prevOverlay which is really big in my case. However when I add such an overlay later, it is rendered in a way, where it's points are centered horisontally: image So profit/loss areas are not painted. The question is - whether there is a minimal set of properties which could be saved to apply such overlay later? Or it is not a intended use case?

ru5t avatar May 22 '25 14:05 ru5t

@Daic115 Thank you very much for submitting the PR. This is a very great extension, but considering the size management of the core library, I suggest submitting it to this project.

liihuu avatar May 28 '25 17:05 liihuu