Draw vertical thresholds with chartjs-plugin-annotation and vue-chartjs

Question

I try to position 2 vertical lines which are my thresholds for list of results for some tests. My problem is that when I try to take value which is not part of the results, The lines are not shown. With the following code I see the lines.

• <script>
  import BarChart from "@/components/TestsStatictics/BarChart.vue";
  export default {
    components: {
      BarChart,
    },
    data() {
      return {
        chartData: {
          labels: [24.35, 24, 24.2, 24.28],
          datasets: [
            {
              label: "Bar Chart",
  
              backgroundColor: [
                "rgba(255, 99, 132, 0.2)",
                "rgba(54, 162, 235, 0.2)",
                "rgba(255, 206, 86, 0.2)",
                "rgba(75, 192, 192, 0.2)",
                "rgba(75, 192, 192, 0.2)",
              ],
              borderColor: [
                "rgba(255,99,132,1)",
                "rgba(54, 162, 235, 1)",
                "rgba(255, 206, 86, 1)",
                "rgba(75, 192, 192, 1)",
                "rgba(75, 192, 192, 0.2)",
              ],
              pointBorderColor: "#2554FF",
              data: [24.35, 24, 24.2, 24.28],
            },
          ],
        },
        options: {
          annotation: {
            annotations: [
              {
                type: "line",
                mode: "vertical",
                scaleID: "x-axis-0",
                value: 24.35,
                borderColor: "green",
                borderWidth: 1,
                label: {
                  enabled: true,
                  position: "center",
                  content: "22.70",
                },
              },
              {
                type: "line",
  
                mode: "vertical",
                scaleID: "x-axis-0",
                value: 24.28,
                borderColor: "green",
                borderWidth: 1,
                label: {
                  enabled: true,
                  position: "center",
                  content: "25.70",
                },
              },
            ],
          },
          scales: {
            yAxes: [
              {
                ticks: {
                  beginAtZero: true,
                },
                gridLines: {
                  display: true,
                },
              },
            ],
            xAxes: [
              {
                gridLines: {
                  display: false,
                },
  
                barThickness: 30,
              },
            ],
          },
          legend: {
            display: true,
          },
          responsive: true,
          maintainAspectRatio: false,
        },
      };
    },
  };
  </script>
  

but if I change the part of the annotation to this (the value of the annotation is not within the data and labels values), It doesn`t work:

annotations: [
            {
              type: "line",
              mode: "vertical",
              scaleID: "x-axis-0",
              value: 22,
              borderColor: "green",
              borderWidth: 1,
              label: {
                enabled: true,
                position: "center",
                content: "22",
              },
            },
            {
              type: "line",

              mode: "vertical",
              scaleID: "x-axis-0",
              value: 26,
              borderColor: "green",
              borderWidth: 1,
              label: {
                enabled: true,
                position: "center",
                content: "26",
              },
            },
          ],

Answer 1

Try setting max an min values for the axes:

suggestedMax, suggestedMin

        scales: {
          xAxes: [
            {
              gridLines: {
                display: false,
              },
              ticks: {
                suggestedMax: 35,
                suggestedMin: 20
              },
              barThickness: 30,
            },
          ],