i can't create a line vertically with react annotation

Question

I'm trying to create a line to show today's date with the help of react annotation, but I'm not successful. My line always stays horizontal between the x and y axis. What could I be doing wrong? This is how it looks now.

But I want it to appear vertical like this:

This is my codes:

const datas = {
labels: monthNames,
datasets: [
  {
    type: 'line',
    data: monthDatas,
    // fill: true,
    // backgroundColor: 'red',
    backgroundColor: 'rgba(229, 245, 226, 0.6)',
    borderColor: '#57b846',
    hoverBackgroundColor: '#57b846',
    hoverBorderColor: 'white',
    hoverBorderWidth: 2,
    // borderDash: [1, 1],
  },
  {
    type: 'scatter',
    label: 'Bu İlanın Fiyatı',
    data: [null, null, null, 30000],
    fill: false,
    radius: 7,
    backgroundColor: '#08bbb6',
    borderColor: '#08bbb6',
    pointStyle: 'circle',
    hoverBorderWidth: 10,
  },
],

};

 const options = {
elements: {
  line: {
    tension: 0.000001,
  },
},
responsive: true,
scales: {
  y: {
    stacked: true,
    grid: {
      circular: true,
      drawTicks: false,
    },
    ticks: {
      padding: 9,
      beginAtZero: true,
      callback(value) {
        return value === 0 ? value : `${numberFormatter.format(value)} TL`;
      },
    },
  },
  xAxes: {
    grid: {
      drawOnChartArea: false,
      drawTicks: true,
      padding: -10,
    },
    ticks: {
      z: 1,
    },
  },
},
plugins: {
  annotation: {
    annotations: [
      {
        type: 'line',
        id: 'a-line-1',
        mode: 'vertical',
        borderColor: 'black',
        borderWidth: 1,
        // display: (ctx) => ctx.chart.isDatasetVisible(1),
        scaleID: 'x-axis-1',
        value: parseFloat(130000),
        label: {
          enabled: true,
          content: 'Bugün',
          // position: 'start'
        },

      },
      // {
      //   type: 'point',
      //   backgroundColor: 'rgba(0, 255, 255, 0.4)',
      //   borderColor: 'black',
      //   borderWidth: 3,
      //   scaleID: 'y',
      //   xValue: (ctx) => value(ctx, 0, 1, 'x'),
      //   yValue: (ctx) => value(ctx, 0, 0, 'y'),
      // },
    ],
  },
  legend: false,
  tooltip: {
    backgroundColor: '#fcfcfc',
    titleColor: '#2d393e',
    bodyColor: '#8f9fa9',
    borderWidth: 1,
    borderColor: '#bcc2c6',
    displayColors: false,
    callbacks: {
      title: (data) => {
        if (data[0]?.dataset?.type !== 'scatter') {
          return `${data[0].formattedValue} TL`;
        }
        return null;
        // (data[0].formattedValue == 0 ? data[0].formattedValue : `${data[0].formattedValue} TL`),
      },
      label: (labels) => {
        if (labels?.dataset?.type === 'scatter') {
          return `${labels.dataset.label}: ${labels.formattedValue} TL`;
        }
        return labels.label;
      },
    },
  },
},

};

Answer 1

You tell the annotation plugin that it should link your annotation the an x scale with id: x-axis-1 but in your scales config you only specify 1 x axis with the id of: xAxes .

So to get your annotation to work you need to change the either the id in the annotation or the id of your scale.

annotations: [
      {
        type: 'line',
        scaleID: 'x', Must match with correct ID of x axis scale

scales: {
  x: { // This is ID of scale, must match with scaleID from annotation
    grid: {
      drawOnChartArea: false,
      drawTicks: true,
      padding: -10,
    },

Answer 2

I added the following codes in the annotation and specified the line as index and solved my problem. Anyone who has the same problem as me can fix it this way.

What i added:
xMax: 1, xMin: 1, yMax: 0, yMin: 160000,

      annotation: {
        drawTime: 'afterDraw',
        annotations: [
          {
            display: true,
            type: 'line',
            id: 'x',
            mode: 'vertical',
            borderColor: '#bcc2c7',
            borderDash: [3, 3],
            borderDashOffset: 0,
            borderWidth: 1,
            xScaleID: 'x',
            xMax: 1,
            xMin: 1,
            yMax: 0,
            yMin: 160000,
            value: 'Ağustos 2020',
            label: {
              backgroundColor: '#57b846',
              enabled: true,
              content: 'Bugün',
              position: 'start',
            },
          },
        ],
      },