Mark X value on Chart Js graph

Question

I have this chart:

And I want to mark a given X value for the user. For example I want something like this:

The chart code:

var chart = new Chart(document.getElementById("featureChart"), {
    type: 'scatter',
    data: {
        datasets: [{
            label: "Benign_Cross_Entropy",
            data: customize_date
        }]
    },
    options: {
        responsive: true
    }

});

How can I do it ? Thanks

Edit: I'm trying to use annotation and i'm not sure what is wrong. The example beaver gave in the comments looks good

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

});

Answer 1

Here is the correct usage of annotation plugin:

var ann = [1];
var ann_labels = ["your data"];

var annotations_array = ann.map(function(value, index) {
    return {
        type: 'line',
        id: 'vline' + index,
        mode: 'vertical',
        scaleID: 'x-axis-0',
        value: value,
        borderColor: 'red',
        borderWidth: 2,
        label: {
            enabled: true,
            position: "center",
            content: ann_labels[index]
        }
    }
});
console.log(annotations_array)

var data = [{
            x: 0,
            y: 5
         }, {
            x: 1,
            y: 6
         }, {
            x: 2,
            y: 8
         }, {
            x: 3,
            y: 9
         }];

var chart = new Chart(document.getElementById("ctx"), {
    type: 'scatter',
    data: {
        datasets: [{
            label: "Benign_Cross_Entropy",
            data: data,
            borderWidth: 2,
            showLine: true,
            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,
        },
        scales: {
          xAxes: [{
            type: 'linear',
            id: 'x-axis-0',
          }]
        }
    }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.5/chartjs-plugin-annotation.min.js"></script>

<canvas id="ctx"></canvas>

Here is a jsfiddle as well: https://jsfiddle.net/beaver71/e3b1Ldms/