I am trying to upgrade my chartjs to v3 and with that the annotations plugin. Tried a few different ways but just cannot seem to get the vertical annotation to show. Tried explicitilty adding xScaleID/yScaleID but I believe that in v3 x/y are the new defaults so would have expected those to be the defaults anyway.
Simplified the whole thing down to this JSFiddle
const data = {
"labels": [
"07/09/2020",
"14/09/2020",
"21/09/2020",
"28/09/2020",
"05/10/2020",
"19/10/2020",
"02/11/2020",
"09/11/2020",
"16/11/2020",
"23/11/2020",
"30/11/2020",
"07/12/2020",
"14/12/2020",
"04/01/2021",
"11/01/2021",
"18/01/2021",
"25/01/2021",
"01/02/2021",
"08/02/2021",
"22/02/2021",
"01/03/2021",
"08/03/2021",
"15/03/2021",
"22/03/2021",
"29/03/2021",
"19/04/2021",
"26/04/2021",
"03/05/2021",
"10/05/2021",
"17/05/2021",
"24/05/2021",
"07/06/2021",
"14/06/2021",
"21/06/2021"
],
"datasets": [{
"label": [
"Information"
],
"data": [
"90",
"92",
"94.29",
"100",
"100",
"93.85",
"90",
"95.38",
"90",
"98.95",
"100",
"100",
"100",
null,
null,
"60",
null,
null,
null,
null,
"80",
"100",
null,
"100",
null,
"80",
"100",
null,
"100",
"100",
"100",
"100",
"100",
"100"
],
fill: false,
borderColor: 'rgb(75, 192, 192)'
}]
}
var chart = new Chart('chart1', {
type: 'line',
data: data,
options: {
responsive: true,
maintainAspectRatio: false,
bezierCurve: false,
spanGaps: true,
scales: {
y: {
beginAtZero: true
}
}
},
plugins: {
annotation: {
annotations: {
line1: {
type: 'line',
mode: 'vertical',
xMin: '09/11/2020',
xMax: '09/11/2020',
borderColor: "#56A6A6",
borderWidth: 10
}
}
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.4.0/chartjs-plugin-annotation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<canvas id="chart1" height="400">
</canvas>If anyone has any ideas then please let me know.