title: Mark X value on Chart Js graph
body: <p>I have this chart:
  <a href="https://i.stack.imgur.com/ieFQe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ieFQe.png" alt="existing chart"></a></p>
  
  <p>And I want to mark a given X value for the user. For example I want something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/J3kY5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J3kY5.png" alt="wanted chart"></a></p>
  
  <p>The chart code:</p>
  
  <pre><code>var chart = new Chart(document.getElementById("featureChart"), {
      type: 'scatter',
      data: {
          datasets: [{
              label: "Benign_Cross_Entropy",
              data: customize_date
          }]
      },
      options: {
          responsive: true
      }
  
  });
  </code></pre>
  
  <p>How can I do it ? Thanks</p>
  
  <p>Edit: I'm trying to use annotation and i'm not sure what is wrong. 
  The example beaver gave in the comments looks good</p>
  
  <pre><code>    var ann = [1];
  var ann_values = ["your data"];
  
  var annotations_array = ann.map(function(date, index) {
      return {
          type: 'line',
          id: 'vline' + index,
          mode: 'vertical',
          scaleID: 'x-axis-0',
          value: date,
          borderColor: 'green',
          borderWidth: 1,
          label: {
              enabled: true,
              position: "center",
              content: ann_values[index]
          }
      }
  });
  
  var chart = new Chart(document.getElementById("featureChart"), {
      type: 'scatter',
      data: {
          datasets: [{
              label: "Benign_Cross_Entropy",
              data: customize_date,
              backgroundColor: "rgba(75,192,192,0.4)",
              borderColor: "rgba(75,192,192,1)",
              borderCapStyle: 'butt',
              borderJoinStyle: 'miter'
              // pointBorderColor: "rgba(75,192,192,1)",
              // pointBackgroundColor: "#fff"
          }
          ]
      },
      options: {
          responsive: true,
          elements: { point: { radius: 0 } },
          annotation: {
              drawTime: 'afterDatasetsDraw',
              annotations: annotations_array,
          }
      }
  
  });
  </code></pre>