Custom Overlay Click Event Not Working

[msaimm]

I’m using a custom overlay in Kline Charts with Angular. The overlay is working fine, but I want to trigger a function when the user clicks on it. I tried using the onClick event from the documentation, but it’s not working. I’d really appreciate any help in fixing this issue.

`

registerFigure({
name: 'circle',
draw: (ctx: any, attrs: any, styles: any) => {
const { x, y, width, height } = attrs;
const { color } = styles;
const radius = Math.min(width, height) / 2;
const borderRadius = radius + 3;

    ctx.beginPath();
    ctx.arc(x, y - 73, borderRadius, 0, 2 * Math.PI);
    ctx.closePath();
    ctx.fillStyle = color;
    ctx.fill();

    ctx.beginPath();
    ctx.arc(x, y - 73, radius, 0, 2 * Math.PI);
    ctx.closePath();
    ctx.fillStyle = '#ffffff';
    ctx.fill();

    const stickHeight = height * 5;
    ctx.beginPath();
    ctx.moveTo(x, y - 72 + radius);
    ctx.lineTo(x, y - 72 + radius + stickHeight);
    ctx.setLineDash([]);
    ctx.strokeStyle = color;
    ctx.lineWidth = 1;
    ctx.stroke();
  },
  checkEventOn: (coordinate, attrs) => {
    const { x, y } = coordinate;
    const { width, height } = attrs;
    const radius = Math.min(width, height) / 2;
    const stickHeight = height * 0.6;
    const dx = x - attrs.x;
    const dy = y - attrs.y;
    const distanceToCircle = dx * dx + dy * dy <= radius * radius;
    const isOnStick = x === attrs.x && y > attrs.y + radius && y <= attrs.y + radius + stickHeight;

    return distanceToCircle || isOnStick;
  },
});


registerOverlay({
  name: 'longTrade',
  totalStep: 2,
  createPointFigures: ({ coordinates }) => {
    return {
      type: 'circle',
      attrs: {
        x: coordinates[0].x,
        y: coordinates[0].y,
        width: 13,
        height: 13,
      },
      styles: { color: '#28a745' },
    };
  },
});

registerOverlay({
  name: 'shortTrade',
  totalStep: 2,
  createPointFigures: ({ coordinates }) => {
    return {
      type: 'circle',
      attrs: {
        x: coordinates[0].x,
        y: coordinates[0].y,
        width: 13,
        height: 13,
      },
      styles: { color: '#F92855' },
    };
  },
});

this.chart?.createOverlay({
  name: `${trade.side === 'B' ? 'longTrade' : 'shortTrade'}`,
  paneId: 'candle_pane',
  points: [
    {
      timestamp: new Date(trade?.timestamp).getTime(),
      value: trade.high,
    },
  ],
  onClick: (event: any) => {
    console.log(event);
    return true;
  },
});

`