Skip to content
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

[Feature] Help code, how to create this 3 elemen on chart #599

Open
rafael110706 opened this issue Oct 10, 2024 · 0 comments
Open

[Feature] Help code, how to create this 3 elemen on chart #599

rafael110706 opened this issue Oct 10, 2024 · 0 comments

Comments

@rafael110706
Copy link

Feature Description

Screenshot 2024-10-10 at 11 58 31

I use klinecharts v9.5.1 (i have no plan to upgrade, because need to rewrite my code and it's take time)

I need to draw 3 elemen :

  • circle with expired time
  • vertical line, it's depen on user input, if user wan't to close on 3 minutes, so the line draw to next 3 candle
  • horizontal line between open trade to vertical closing time

this my code to draw entry price (create custom overlay) :
registerOverlay({ name: 'mark', totalStep: 1, createPointFigures: function (_a) { const { coordinates, overlay } = _a; const xCoord = coordinates[0].x; const yCoord = coordinates[0].y; const text = overlay.extendData; const startX = coordinates[0].x const startY = coordinates[0].y return [ { type: 'circle', attrs: { x: xCoord, y: yCoord, r: 4 }, }, { type: 'line', attrs: { coordinates: [{ x: startX, y: startY }, { x: startX - 50, y: startY }] }, ignoreEvent: true }, { type: 'polygon', attrs: { coordinates: [{ x: startX - 50, y: startY - 10 }, { x: startX - 35, y: startY }, { x: startX - 50, y: startY + 10 }] }, styles: { style: 'fill', fill: { color: 'rgba(255, 193, 7, 0.9)' } }, ignoreEvent: true }, { type: 'polygon', attrs: { coordinates: [{ x: startX - 150, y: startY - 10 }, { x: startX - 150, y: startY + 10 }, { x: startX - 50, y: startY + 10 }, { x: startX - 50, y: startY - 10 }] }, styles: { style: 'fill', fill: { color: 'rgba(255, 193, 7, 0.9)' } }, ignoreEvent: true }, { type: 'text', attrs: { x: startX - 95, y: startY + 6, text: text ?? '', align: 'center', baseline: 'bottom' }, ignoreEvent: true } ] } })

and this code to create overlay :
this.kLineChart.createOverlay({ name: 'mark', id: 'tag_'+data.data.id, extendData: this.formatPrice(data.data.will_get), styles: { line: { color: '#ffc107', }, circle: { color: '#ffc107',] }, text: { color: '#fff', backgroundColor: '#FF0000' }, polygon: { style: 'dash', size: 1, color: '#ffc107', dashValue: [2, 2] }, }, points: [ { timestamp: this.form.entry_time, value: this.form.entry_price }, ] })

can you help me to modify my code to achive my goal?

Thank you

To Do

  1. Steps
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

No branches or pull requests

1 participant