Stacked Bar X-Axis (vertical) Annotation Line not working

[Jacyle]

Recently turned this piece of code into a stacked bar chart from a regular bar chart. Annotation was working on the x-axis. When switched to y-axis, line shows up fine.

Couldn't find anything on the internet related to this issue, so I'm hoping someone here can help. Thanks.

var config_delta = {
type: 'bar',
data: {
    datasets: [
    {
    data: [3.8635456200000000,0.91864468800000000000,3.0506386200000000,1.5481537680000000,0.55593540000000000000,9.0997879680000000,1.3021911600000000,0.21176811600000000000,1.5247572000000000,3.2008850880000000,15.5784626640000000,1.2660168600000000,1.6641993480000000,2.3172742440000000,4.0637822400000000,3.4261679520000000,2.2400760000000000,8.9503183680000000,-0.14851364400000000000,3.1357236240000000,-0.00182925600000000000,0.41221826400000000000,4.1846267880000000,0.45266263200000000000,-0.17626687200000000000,0.10990296000000000000,-0.07860241200000000000,2.2229076600000000,-0.33906475200000000000,-0.06301486800000000000,0.06082005600000000000,0.000000000000000000000000,14.1759089160000000,-0.06011748000000000000,0.10604961600000000000,0.02024383200000000000,0.000000000000000000000000,3.5868448200000000,0.000000000000000000000000,0.000000000000000000000000,0.000000000000000000000000,0.000000000000000000000000,2.4134026800000000],
    label: 'Opex Delta',
    backgroundColor: '#444444',
    
    }, 
    {       
    data: [19.6418444160000000,5.2080000720000000,5.6340883080000000,2.2670607240000000,1.9201662840000000,19.0396900440000000,1.2481872720000000,4.9949665320000000,0.07463049600000000000,0.15033601200000000000,32.9349843000000000,0.85423844400000000000,2.9307569160000000,0.81429690000000000000,0.48922659600000000000,12.4512929520000000,-0.43921528800000000000,4.8106992480000000,0.00309074400000000000,1.3231370760000000,0.03256056000000000000,1.5838690320000000,50.0265211320000000,0.16991613600000000000,-0.28202866800000000000,0.65346111600000000000,0.74684616000000000000,27.9974410560000000,-0.63033022800000000000,0.17321056800000000000,-0.50770414800000000000,0.48214376400000000000,32.1769067640000000,-0.53966004000000000000,-0.41447900400000000000,-1.9704895200000000,-0.55652973600000000000,16.9435786560000000,-0.28067370000000000000,-0.28227368400000000000,-0.71887399200000000000,-0.99450764400000000000,19.7907408360000000],
    label: 'Delta',
    backgroundColor: '#ff8a05',
    
    },
    ],
labels: [30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,47.5,48,48.5,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70],
},
options: {
    plugins:{
        legend: {
            display: false,
        },
        annotation: {
            
            annotations: {
                line1: {
                type: "line",
                scaleID: "x",
                
                value: 49,
                          
                borderWidth: 2,
                borderDash: [6, 6],
                borderColor: "black",
                backgroundColor: '#7f7f7f',
                },
            },                
        },
            tooltip:  {
                callbacks: {
                label: function(context) {
                    var label = context.dataset.label || '';

                    if (label) {
                        label += ': ';
                    }
                    if (context.parsed.y !== null) {
                        label += new Intl.NumberFormat('en-US', { style: 'decimal', minimumFractionDigits: '1',maximumFractionDigits:'1' }).format(context.parsed.y);
                    }
                    return label;
                }
            }
        }
    },
    scales: {
        x: {
            grid:{
                display:false,
            },
            title:{
                display:true,
                text: 'Strike'
            },
            ticks: {
                display: true,
                stepSize: 1,
                autoSkip: true,
                maxRotation: 90,
                minRotation: 90
            },
            gridLines: {
                offsetGridLines: false
            },
            stacked:true
        },
        y: {

            beginAtZero: true,
            title: {
                display:true,
                text: 'Net Nominal ($M)'
            },
            ticks: {
                callback: function(label, index, labels) {
                    return label;
                }, 
            },
            stacked:true
        }
    },
    responsive: true
}
};

[stockiNail]

@Jacyle use value: 22 instead of value: 49.

https://codepen.io/stockinail/pen/KKXwoMb

The access to the scale value by number uses the value passed as the index in the scale.
In this case, the labels as numbers but using the value as number, is looking for 50th value in the scale and not the numeric value 50.

I don't know if you can transform the labels from numbers to strings. in this case, you should be able to use the value: '49'

[Jacyle]

This is great! Thanks for the quick answer!