Vertical line using Chart.js annotations plugin with linear scale on x axis

Question

I'm having real trouble using the annotations plugin for Chart.js to produce a vertical line when the x axis uses a linear scale. Here's the code:

const testConfig = {
    type: 'line',
    data: {
        datasets: [{
            label: 'Test dataset',
            data: [{x: .25, y: 65}, {x: .55, y: 59}, {x: .65, y: 80}, {x: .95, y: 81}, {x: 1, y: 56},
                {x: 1.5, y: 55}, {x: 2, y: 40}],
            fill: false,
            borderColor: 'rgb(75, 192, 192)',
            tension: 0.1
        }]
    },
    options: {
        scales: {
            xAxis: {
                type: 'linear'
            }
        },
        plugins: {
            annotation: {
                annotations: {
                    line1: {
                        type: 'line',
                        scaleId: 'x',
                        value: .55,
                        borderColor: 'rgba(255, 99, 132, 0.25)'
                    }
                }
            }
        }
    }
};
const testChart = new Chart(document.getElementById('testChart').getContext('2d'), testConfig);

And here's the result:

However I try to specify the vertical line (using scaleID and value or using xScaleID, xMin and xMax) the annotation always comes out as a diagonal line, . Specifying a horizontal line works just fine. Using a box annotation has similar results: I get a horizontal box across the whole chart (in other words, yMin and yMax work just fine, but xMin and xMax don't.

I'm using annotations plugin v 1.4.0.

What am I doing wrong?

Answer 1

This is because it cant match to a scale. You give your x axis a scale ID of xAxis while you say to the annotation plugin that it has to look at a scale with ID of x. These 2 need to be the same