problem after update to v9
smolleyes opened this issue · comments
Feature Description
maybe update the doc a bit (between already integrated things and custom)...
To Do
hi
i tried but don't understand the doc on how to use figures :/ and have difficulties to understand overlays.. ok for indicators :)
for exemple, how do i convert this to v9 ?
const createBuySellMarker = (candle, index, buy, sell) => { chart.createAnnotation({ point: { timestamp: candle.timestamp, price: candle.close, }, styles: { symbol: { position: "custom", type: "custom", offset: [0, 3], }, }, drawCustomSymbol: ({ctx, coordinate}) => { const pxPoint = chart.convertToPixel( { timestamp: candle.timestamp, dataIndex: index, value: buy ? candle.low : candle.high, }, 1 ); ctx.save(); ctx.beginPath(); ctx.shadowColor = "black"; ctx.shadowBlur = 10; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; ctx.arc(pxPoint.x, buy ? pxPoint.y + 20 : pxPoint.y - 20, 8, 0, 2 * Math.PI); ctx.fillStyle = buy ? "green" : "red"; ctx.fill(); ctx.strokeStyle = "white"; ctx.stroke(); ctx.fillStyle = "white"; ctx.textBaseline = "middle"; ctx.textAlign = "center"; ctx.fillText(buy ? "B" : "S", pxPoint.x, buy ? pxPoint.y + 20 : pxPoint.y - 20); ctx.restore(); }, }); };
seems fibonacci is integrated but can t understand how it works too...
is used this to put fibonacci directly after chart is loaded but can t get it working with v9:
`
const drawFibonacci = (data = null, candle, index) => {
data = dataIndicators.fibonacci;
Object.keys(data).map((level) => {
console.log(data[level]);
chart.createAnnotation({
point: {
timestamp: candle.timestamp,
price: data[level],
},
styles: {
symbol: {
position: "custom",
type: "custom",
offset: [0, 3],
},
},
drawCustomSymbol: ({ctx, coordinate}) => {
const pxPoint = chart.convertToPixel(
{
timestamp: candle.timestamp,
dataIndex: index,
value: data[level],
},
1
);
const pxPointstart = chart.convertToPixel(
{
timestamp: dataIndicators.history[0].timestamp,
dataIndex: 0,
value: data[level],
},
1
);
ctx.save();
ctx.beginPath();
// draw a red line
drawLine(ctx, [pxPointstart.x, pxPoint.y], [pxPoint.x, pxPoint.y], "green", 1);
ctx.fillStyle = "white";
ctx.textBaseline = "middle";
ctx.textAlign = "center";
ctx.fillText(
` ${level} (${parseFloat(data[level]).toFixed(8)})`,
pxPoint.x - 20,
pxPoint.y - 5
);
ctx.restore();
},
});
});
};
`
can someone help me please :/
thanks !
The problems we encountered are quite similar, and I don't know how to handle Buy and sell marks, so I still use the v8 version.
how you guys want to mark buy and sell points? Here are 2 screenshots that I'm using with klinecharts v9 + react
"simpleAnnotation"
"custom overlay" for drawing 3 lines, upper line Take Profit Price, middle line Entry Price and bottom line Stop Loss Price, for short positions the colors green and red are reversed.
Let me know if any of these is what you guys are looking for so that I can share the code.
hi @guelweles
thanks for your feedback
i used to do this with chart.createAnnotation (code posted before):
after the v9 the fibonacci, volume on the chart and buy sell markers on this screenshot doesn t work anymore... no problems with indicators i converted them just fine.
thanks for your help
I hope the following example gives you an idea
import { init, dispose, registerOverlay } from 'klinecharts';
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;
return [
{
type: 'circle',
attrs: {
x: xCoord,
y: yCoord,
r: 8
}
},
{
type: 'text',
attrs: {
x: xCoord,
y: yCoord,
text: text,
align: 'center',
baseline: 'middle'
}
},
]
}
})
// Initiate your chart before calling the following lines
const currentCandle = chart.current?.getDataList().at(-1);
chart.current?.createOverlay({
name: 'mark',
extendData: 'B',
points: [{ value: currentCandle.close, timestamp: currentCandle.timestamp }],
styles: {
text: {
color: 'white'
},
circle: {
style: 'fill',
color: 'green'
}
},
})
This will plot a mark like the one below, I didn't have time to play with alignments but that's just to give you an idea, you may want to check out figures documentation at https://klinecharts.com/en-US/guide/figure.html#recttext
I hope this helps you somehow.
hi, thanks for this clear exemple :)
it just did it as usual too but using indicator... prefer you solution
so if i have many markers i just have to pass an array of
{
name: 'mark',
extendData: 'B',
points: [{ value: currentCandle.close, timestamp: currentCandle.timestamp }],
styles: {
text: {
color: 'white'
},
circle: {
style: 'fill',
color: 'green'
}
},
}
to createOverlay ?
ok this works perfect :)
const createBuySellMarker = (points) => {
const list = points.map((point) => {
return {
name: "mark",
extendData: point.buy ? "B" : "S",
points: [
{
timestamp: point.timestamp,
dataIndex: point.index,
value: point.buy ? point.low : point.high,
},
],
styles: {
text: {
color: "white",
},
circle: {
style: "fill",
color: point.buy ? "green" : "red",
},
},
};
});
chart.createOverlay(list, "candle_pane");
};
think i understand how this works now :) thanks a lot @guelweles
hi, thanks for this clear exemple :)
it just did it as usual too but using indicator... prefer you solution
so if i have many markers i just have to pass an array of
{ name: 'mark', extendData: 'B', points: [{ value: currentCandle.close, timestamp: currentCandle.timestamp }], styles: { text: { color: 'white' }, circle: { style: 'fill', color: 'green' } }, }
to createOverlay ?
There are many ways to add multiple marks, you could wrap the code I provided in a function like
const currentCandle = chart.current?.getDataList().at(-1);
chart.current?.createOverlay({
name: 'mark',
extendData: 'B',
points: [{ value: currentCandle.close, timestamp: currentCandle.timestamp }],
styles: {
text: {
color: 'white'
},
circle: {
style: 'fill',
color: 'green'
}
},
})
ok this works perfect :)
const createBuySellMarker = (points) => { const list = points.map((point) => { return { name: "mark", extendData: point.buy ? "B" : "S", points: [ { timestamp: point.timestamp, dataIndex: point.index, value: point.buy ? point.low : point.high, }, ], styles: { text: { color: "white", }, circle: { style: "fill", color: point.buy ? "green" : "red", }, }, }; }); chart.createOverlay(list, "candle_pane"); };think i understand how this works now :) thanks a lot @guelweles
I was about to give you a loop example but you got it :), I also had some issues when I migrated from v8 to v9, it takes time to understand the documentation but eventually I'm getting in there.
Are you programing a bot or something? That's what I've been building over the past year, my bot connects to Binance Futures in order to find good long/short entries, but unfortunately my strategies only rely on indicators, which I don't really like as there are high chances of getting false signals, I still want to program strategies based on price action, but that's way more complex to program, something I want to achieve with this library is the ability to have a custom overlay to automatically draw lines of support and resistance, as well as trend lines.
yup this is the ui for my bot i test all my strategies with it then have another node api for my indicators and binance api to buy/see + telegram bot etc...
i tried a looooooooooooooooooooooooot of strategies, price actions and everything you can imagine, i still don t have anything profitable thought :p still searching
yup this is the ui for my bot i test all my strategies with it then have another node api for my indicators and binance api to buy/see + telegram bot etc...
i tried a looooooooooooooooooooooooot of strategies, price actions and everything you can imagine, i still don t have anything profitable thought :p still searching
I can relate to it, there are days my strategies are profitable, and there are days I have more losses than winnings, I'm working on my risk management so that I can limit my daily loss, otherwise I may end up blowing off my account.
Today has been a good day, so far I won almost +11USDT, but in general I have more accumulated losses than winnings, and that's may be because of my band risk management, sometimes I feel like giving up on this trading world lol.
My TP target starts with +2USDT and loss -1UDST, if I reach 65% of my target, that is, if my unrealized pnl is greater than or equal to +1.30USDT, then I move my TP order to +4 USDT and increase my SL from -1USDT to +1USDT, so if price goes against me, I'll still be profitable, perhaps I should've started like this from the beginning and maybe I'd have more winnings, I hope to accumulate more profits overtime by moving my SL orders to a positive profit value.
By the way, I first started trading on Binance Spot, but later I realized futures is way better for some reasons like.
- You don't need to have a large account
- You can leverage
- You can go both directions short/long, while on spot you only make profits by going long, unless you trading margin to go short.
do not give up. I used to be like you. Try to combine multiple indicators to expect to win the market. however I realized that the trading style is something more important than the indicator. Maybe you are in the wrong direction of the market but still can make a profit using methods like DCA. hegde. currently i have few bots that are working on binance and have positive profit. not so much however everything is on semi-automatic level. bot will look for the signal and I decide whether to join or not. consider trading like coding. Patience will lead to success. best regards
You may not believe it but my strategy is using EMA only. only EMA. simple as that. The more sophisticated the more complicated the faster you lose. Simplicity is the truth of trading. I suggest you find out Sonic R system for scaping or turtle for swing trading.Once you understand and master the sonicR strategy then your strategy will be consistently profitable.
bytheway. your UI seem awesome.. mine is CLI with some help from klinechart in static html for visualization. and thanks for mark function. it super helpful.