Skip to content

Add long/short position overlay #696

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: dev
Choose a base branch
from

Conversation

Daic115
Copy link

@Daic115 Daic115 commented May 2, 2025

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

@TonyChen-SH
Copy link

This is a very useful feature

@ru5t
Copy link

ru5t commented May 22, 2025

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?

@liihuu
Copy link
Member

liihuu commented May 28, 2025

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants