Chartjs-I can't create a line vertically with react annotation

by

0👍

✅

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

0👍

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

Leave a comment