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