reactjschart.jsreact-chartjschartjs-plugin-annotation

i can't create a line vertically with react annotation

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.

enter image description here

But I want it to appear vertical like this: enter image description here

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;
      },
    },
  },
},

};

Solution

  • 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,

    enter image description here

          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',
            },
          },
        ],
      },