I realy need "drawCandle" back

[baghuz]

hello, before "drawCandle" deleted, i can create custom image on candle with this code :

chart.subscribeAction('drawCandle', ({ ctx, dataIndex, kLineData, coordinate, isCandle }) => {
// alert("asa");
var image = document.createElement('img'); // use DOM HTMLImageElement
image.src = image_up;
var image2 = document.createElement('img'); // use DOM HTMLImageElement
image2.src = image_down;
if(kLineData.op == 'OP_BUY'){
ctx.drawImage(image, coordinate.x - 10,coordinate.low + 20,20,20)
// ctx.fillText(kLineData.add_text, coordinate.x - 10, coordinate.low + 47);
}else if(kLineData.op == 'OP_SELL'){
ctx.drawImage(image2, coordinate.x - 10,coordinate.high - 25,20,20)
// ctx.fillText(kLineData.add_text, coordinate.x - 10, coordinate.high - 30);
}
})

but now "drawCandle" is gone. :'( please tell me how to make it again. Thank you

[liihuu]

You can use createAnnotation or custom technical indicator.

[baghuz]

Okey, i will try… thank you

[baghuz]

hi liihu, i try to use createAnotion, I think this is more suitable and easier than custom technical indicator. but unfortunately I can't use the coordinate here to find the point of the highest and lowest prices, so all annotations are on top. I want the position to be dynamic, following the candle. can you help me for this??

/*********** CODE ***************************
checkEventCoordinateOnCustomSymbol: function ({ eventCoordinate, coordinate, size }) {
return eventCoordinate.x > coordinate.x - 4 &&
eventCoordinate.x < coordinate.x + 4 &&
eventCoordinate.y > coordinate.y - 4 &&
eventCoordinate.y < coordinate.y + 4
},
drawCustomSymbol: function ({ ctx, coordinate, isActive }) {
var color
var size
if (isActive) {
color = '#6767dd'
size = 6
} else {
color = '#dd22fc'
size = 4
}
ctx.fillStyle = color
ctx.beginPath()
ctx.moveTo(coordinate.x - size, coordinate.y - size)
ctx.lineTo(coordinate.x + size, coordinate.y - size)
ctx.lineTo(coordinate.x + size, coordinate.y + size)
ctx.lineTo(coordinate.x - size, coordinate.y + size)
ctx.closePath()
ctx.fill()
},
drawExtend: function ({ ctx, point, coordinate, viewport, isActive }) {
if (isActive) {
ctx.font = 'normal 20px'
ctx.fillStyle = '#78ccff'
ctx.fillText('这是一段测试文字', coordinate.x - 40, coordinate.y + 30)
}
}
/*********** CODE ***************************

[liihuu]

styles: { position: 'point' }

[baghuz]

Awesome, thank you