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

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