Annotation plugin - misplaced annotations

Hi, I am using this library with chartjs-plugin-annotation, I noticed that the annotations are misplaced on the charts.

Here are my chart configurations: { data: { datasets: [ { backgroundColor: "rgba(255, 55, 132, 0.7)", borderColor: "rgb(255, 55, 132)", fill: true, data: [ 10, 60, 34, 55, 23, ], id: "count", label: "Number of Customers", yAxisID: "integer", }, ], labels: [ [ "2013", ], [ "2014", ], [ "2015", ], [ "2016", ], [ "2017", ], ], labelValues: [ "2013", "2014", "2015", "2016", "2017", ], }, options: { elements: { bar: { borderWidth: 2, }, }, layout: { padding: 20, }, maintainAspectRatio: false, plugins: { legend: { display: true, labels: { boxWidth: 16, color: "#363636", }, }, title: { display: true, text: [ "The number of customers in Aruba between 2013 and 2017", ], }, tooltip: { intersect: false, mode: "index", position: "nearest", callbacks: { label: function () { [native code] }, title: function () { [native code] }, }, }, annotation: { annotations: { annotation0: { backgroundColor: "#ffffff", type: "point", xMax: "2014", xMin: "2014", xScaleID: "date", yMax: 20, yMin: 20, yScaleID: "integer", }, label0: { type: "label", xScaleID: "date", xValue: "2014", yValue: 20, xAdjust: 200, yAdjust: -100, yScaleID: "integer", backgroundColor: "rgba(245,245,245)", content: "asdasfaf afasfas asdfdasfa asfsa", textAlign: "start", callout: { enabled: true, side: 20, }, }, }, }, datalabels: { align: "end", anchor: "end", backgroundColor: _context => utilities_1.VizyUtilities.THUMBNAIL_TRANSPARENT_COLOR, borderRadius: 2, clamp: true, color: _context => this.textColor(), display: "auto", font: { lineHeight: 0.8, size: 10, }, formatter: (value, { datasetIndex, dataset }) => { var _a, _b; const field = dataFields.length > datasetIndex ? dataFields[datasetIndex] : dataFields[0]; const fieldType = field.getDataType(); const [absValue] = (_a = this.fieldName2AbsMinMax.get(field.getFieldName())) !== null && _a !== void 0 ? _a : [0]; const numberFormat = (numberValue) => utilities_1.VizyUtilities.formatNumber(numberValue, fieldType, utilities_1.VizyUtilities.formatNumberOptions(field, this.vizyGenerationConfiguration, absValue)); if (value === null) { return null; } if (typeof value === "object") { const [, , radius] = numericalFields; const [max] = (_b = this.fieldName2AbsMinMax.get(radius === null || radius === void 0 ? void 0 : radius.getFieldName())) !== null && _b !== void 0 ? _b : [0]; return ChartJSConfigurationManager.dataLabelObjectValueFormatter(numberFormat, value, max); } if (types_1.NUMERICAL_TYPES.includes(fieldType) && typeof value === "number") { const formattedValue = numberFormat(value); return dataset.datalabels && dataset.datalabels.negative ?-${formattedValue}: formattedValue; } return this.valueFormatter(value, field, true); }, offset: 0, padding: { bottom: 1, top: 1, }, }, }, responsive: true, scales: { integer: { axis: "y", grid: { display: true, drawBorder: false, lineWidth: ({ index }) => index === 0 ? 1 : 0, }, stacked: false, ticks: { autoSkip: true, color: ({ tick: { label } }) => utilities_1.VizyUtilities.isNone(label) ? utilities_1.VizyUtilities.DARK_SUBTLE_TEXT_COLOR : utilities_1.VizyUtilities.DARK_TEXT_COLOR, font: { size: 10, }, callback: value => utilities_1.VizyUtilities.formatNumber(value, dataType, formatOptions), maxTicksLimit: 5, }, title: { color: "#363636", display: true, text: "Number of Customers", }, type: "linear", beginAtZero: true, position: "left", }, date: { axis: "x", grid: { display: true, drawBorder: false, lineWidth: ({ index }) => index === 0 ? 1 : 0, }, stacked: false, ticks: { autoSkip: true, color: ({ tick: { label } }) => utilities_1.VizyUtilities.isNone(label) ? utilities_1.VizyUtilities.DARK_SUBTLE_TEXT_COLOR : utilities_1.VizyUtilities.DARK_TEXT_COLOR, font: { size: 10, }, }, title: { color: "#363636", display: true, text: "Year", }, type: "category", }, }, }, plugins: [ { beforeDraw: chart => { const ctx = chart.ctx; ctx.save(); ctx.fillStyle = vizyColor === commons_1.VizyColor.LIGHT ? utilities_1.VizyUtilities.THUMBNAIL_BACKGROUND_COLOR : utilities_1.VizyUtilities.THUMBNAIL_DARK_BACKGROUND_COLOR; ctx.fillRect(0, 0, chart.width, chart.height); ctx.restore(); }, id: "thumbnailBackgroundPlugin", }, ], type: "bar", } Here is the result with misplaced annotations:

SeanSobey / ChartjsNodeCanvas

Annotation plugin - misplaced annotations #98