Unable to set xMin/xMax of a vertical line annotation by value, only by index

[Mitchel Baker]

Been working with chart.js and everything's been super smooth, but have been facing difficulties with getting a vertical line annotation to display correctly after adding chartjs-plugin-annotation.

I've been using this example in the documentation:

This is my chart configuration -- line annotation I'm trying to create is at the bottom.

My x/y scales are labeled x/y so I don't think xScaleID/yScaleID are the issue.

What I don't understand is that if I set xMin = 0, yMin = 200, and xMax = 0, yMax = 0, or in other words end one at (0, 200) and end two at (0, 0) the vertical line annotation displays correctly.

However, if I want to move xMin/XMax to anywhere else along the x axis like shown in the chartjs-plugin-annotation example it doesn't display.

[Mitchel Baker]

Nevermind figured it out. I had to specify xMin/xMax by index, so if I want the vertical line at 1250 I have to set xMin = 4, xMax = 4.

Is there any way to set xMin/xMax by the value instead of the index?

[stockiNail]

@mitchthebaker x/yMin and Max are working with both value and index, when the axis is a category one, as in your case. But for category axis, the labels should be strings, even if it can manage labels as numbers.
The plugin accesses to the category axis by value, if is x/yMin and Max are set as strings or by index if set as numbers.

To provide the index in this case, you could use a scriptable options as the following (see codepen https://codepen.io/stockinail/pen/RwYROoW):

{
  type: 'line',
  data: {
    labels: [1, 2, 3, 4], // <-- numbers
    datasets: [ {
      data: [102, 200, 80, 55],
    }],
  },
  options: {
    plugins: {
      annotation: {
        annotations: {
          my: {
            type: 'line',
            xMin: ({chart}) => chart.data.labels.indexOf(1), // <-- gets the index of value 1 and the line is drawn at index 0
            xMax: ({chart}) => chart.data.labels.indexOf(1), // <-- gets the index of value 1 and the line is drawn at index 0
            borderColor: 'red',
            borderWidth: 3
         }
        }
      }
    }
  }
}

Just FYI, the x/yMin and Max on line annotations are usually used for "limited" line, where the line doesn't reach the end of chart area. Instead, if you need to draw for whole size of chart area, you can use value (and endvalue with scaleID option to identify the scale) options, with the same logic (index or value) of x/yMin and Max above described.

{
  type: 'line',
  data: {
    labels: [1, 2, 3, 4], // <-- numbers
    datasets: [ {
      data: [102, 200, 80, 55],
    }],
  },
  options: {
    plugins: {
      annotation: {
        annotations: {
          my: {
            type: 'line',
            scaleID: 'x',
            value: ({chart}) => chart.data.labels.indexOf(1),
            borderColor: 'red',
            borderWidth: 3
         }
        }
      }
    }
  }
}

[Mitchel Baker]

@stockiNail Thanks so much for the in-depth response! The example you created will help out a lot.