title: Draw vertical thresholds with chartjs-plugin-annotation and vue-chartjs
body: <p>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.</p>
  <ul>
  <li>
        
      
  <pre><code>&lt;script&gt;
  import BarChart from &quot;@/components/TestsStatictics/BarChart.vue&quot;;
  export default {
    components: {
      BarChart,
    },
    data() {
      return {
        chartData: {
          labels: [24.35, 24, 24.2, 24.28],
          datasets: [
            {
              label: &quot;Bar Chart&quot;,
  
              backgroundColor: [
                &quot;rgba(255, 99, 132, 0.2)&quot;,
                &quot;rgba(54, 162, 235, 0.2)&quot;,
                &quot;rgba(255, 206, 86, 0.2)&quot;,
                &quot;rgba(75, 192, 192, 0.2)&quot;,
                &quot;rgba(75, 192, 192, 0.2)&quot;,
              ],
              borderColor: [
                &quot;rgba(255,99,132,1)&quot;,
                &quot;rgba(54, 162, 235, 1)&quot;,
                &quot;rgba(255, 206, 86, 1)&quot;,
                &quot;rgba(75, 192, 192, 1)&quot;,
                &quot;rgba(75, 192, 192, 0.2)&quot;,
              ],
              pointBorderColor: &quot;#2554FF&quot;,
              data: [24.35, 24, 24.2, 24.28],
            },
          ],
        },
        options: {
          annotation: {
            annotations: [
              {
                type: &quot;line&quot;,
                mode: &quot;vertical&quot;,
                scaleID: &quot;x-axis-0&quot;,
                value: 24.35,
                borderColor: &quot;green&quot;,
                borderWidth: 1,
                label: {
                  enabled: true,
                  position: &quot;center&quot;,
                  content: &quot;22.70&quot;,
                },
              },
              {
                type: &quot;line&quot;,
  
                mode: &quot;vertical&quot;,
                scaleID: &quot;x-axis-0&quot;,
                value: 24.28,
                borderColor: &quot;green&quot;,
                borderWidth: 1,
                label: {
                  enabled: true,
                  position: &quot;center&quot;,
                  content: &quot;25.70&quot;,
                },
              },
            ],
          },
          scales: {
            yAxes: [
              {
                ticks: {
                  beginAtZero: true,
                },
                gridLines: {
                  display: true,
                },
              },
            ],
            xAxes: [
              {
                gridLines: {
                  display: false,
                },
  
                barThickness: 30,
              },
            ],
          },
          legend: {
            display: true,
          },
          responsive: true,
          maintainAspectRatio: false,
        },
      };
    },
  };
  &lt;/script&gt;
  </code></pre>
  </li>
  </ul>
  <p>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:</p>
  <pre><code>annotations: [
              {
                type: &quot;line&quot;,
                mode: &quot;vertical&quot;,
                scaleID: &quot;x-axis-0&quot;,
                value: 22,
                borderColor: &quot;green&quot;,
                borderWidth: 1,
                label: {
                  enabled: true,
                  position: &quot;center&quot;,
                  content: &quot;22&quot;,
                },
              },
              {
                type: &quot;line&quot;,
  
                mode: &quot;vertical&quot;,
                scaleID: &quot;x-axis-0&quot;,
                value: 26,
                borderColor: &quot;green&quot;,
                borderWidth: 1,
                label: {
                  enabled: true,
                  position: &quot;center&quot;,
                  content: &quot;26&quot;,
                },
              },
            ],
  </code></pre>