Annotation at 'point' position jumping around when panning chart

[DeeeeLAN]

https://user-images.githubusercontent.com/12877032/120276680-dcfe3780-c267-11eb-8292-589866bf79f2.mov

Here is a short clip demonstrating it. I am using a couple custom annotations but I tested it and it worked the same with the default ones. I tried going through the source code to determine what is happening but I couldn't quite figure it out. As best as I could tell, computeAxis for the Y axis is not getting called after the annotation is drawn and it is using an old Y value, which changes when it starts moving and calls the function again. I saw that after the annotations were added it should invalidate and reload the image, so I am not sure why this is happening. Also as it moves around the Y value jumps around a bit causing the arrow to bounce up and down.

I checked the sample you provided and it did not behave this way, which tells me it might be something in my configuration. If you have any thoughts about where I can look, let me know.

[liihuu]

I want to see what your input is when you use createAnnotation, if possible, it is best to show your code.

[DeeeeLAN]

Sure, here is the input:

    if (props.koReg.length > 0) {
      kLineChart.createAnnotation(
        props.koReg.reduce((r, ko) => {
          let koReg = props.row[ko];
          let startDate = parseDate(koReg['startDate']).getTime()
          let endDate = parseDate(koReg['endDate']).getTime()
          let startPrice = cleanData.filter(d => d.timestamp === startDate)[0]?.high;
          let endPrice = cleanData.filter(d => d.timestamp === endDate)[0]?.low;
          r.push({
            point: { timestamp: startDate, price: startPrice, fillColor: koColors[ko] },
            styles: {
              symbol: {
                type: 'custom',
                position: 'point',
                offset: [0, -2],
              }
            },
            drawCustomSymbol: drawKOHigh,
          })
          r.push({
            point: { timestamp: endDate, price: endPrice, fillColor: koColors[ko] },
            styles: {
              symbol: {
                type: 'custom',
                position: 'point',
                offset: [0, 2],
              }
            },
            drawCustomSymbol: drawKOLow,
          })
          return r
        }, [])
      )
    }

Let me know if you need more.

[liihuu]

Show the code of drawKOHigh and drawKOLow.

[DeeeeLAN]

const koHalfWidth = 10;
const koBottomWidth = 3;
const koHeight = 20;

function drawKOHigh({ ctx, point, coordinate, viewport, isActive, styles }) {
  const x = coordinate.x;
  const y = coordinate.y;
  const fillColor = point.fillColor;

  console.log(point, coordinate)

  ctx.fillStyle = fillColor;
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x + koHalfWidth, y - koHalfWidth);
  ctx.lineTo(x + koBottomWidth, y - koHalfWidth);
  ctx.lineTo(x + koBottomWidth, y - koHeight);
  ctx.lineTo(x - koBottomWidth, y - koHeight);
  ctx.lineTo(x - koBottomWidth, y - koHalfWidth);
  ctx.lineTo(x - koHalfWidth, y - koHalfWidth);
  ctx.closePath();
  ctx.fill()
}

function drawKOLow({ ctx, point, coordinate, viewport, isActive, styles }) {
  const x = coordinate.x;
  const y = coordinate.y;
  const fillColor = point.fillColor;

  ctx.fillStyle = fillColor;
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x + koHalfWidth, y + koHalfWidth);
  ctx.lineTo(x + koBottomWidth, y + koHalfWidth);
  ctx.lineTo(x + koBottomWidth, y + koHeight);
  ctx.lineTo(x - koBottomWidth, y + koHeight);
  ctx.lineTo(x - koBottomWidth, y + koHalfWidth);
  ctx.lineTo(x - koHalfWidth, y + koHalfWidth);
  ctx.closePath();
  ctx.fill()
}

Although like I said, I saw the same behavior using the predefined annotation shapes too.

[liihuu]

The code you gave does not seem to be a problem. This is most likely a bug in the chart. I need to verify it.

[liihuu]

Fixed it, see commit.

[DeeeeLAN]

Wow, that was a quick turnaround! I will test it out, although I assume you already did.

[DeeeeLAN]

Works perfectly, thanks!

[DeeeeLAN]

Weird the issue wasn't showing up on the demo page you had. Do you know why that was?

[liihuu]

The sample page has the same problem.