Нарисуйте вертикальные пороги с помощью chartjs-plugin-annotation и vue-chartjs

Question

Я пытаюсь расположить две вертикальные линии, которые являются моими пороговыми значениями для списка результатов некоторых тестов. Моя проблема в том, что когда я пытаюсь взять значение, которое не является частью результатов, строки не отображаются. В следующем коде я вижу строки.

•         <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>
  

но если я изменю часть аннотации на эту (значение аннотации находится вне значений данных и меток), это не сработает:

      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

Попробуйте установить максимальные и минимальные значения для осей:

suggestedMax, suggestedMin

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