React TypeScript - Chartjs Annotations - Bar Annotation not showing correctly

Question

My annotations are set to:

annotation: {
  events: ["onClick"],
  annotations: [{
    drawTime: "afterDraw" as "afterDraw",
    type: "box" as "box",
    xMin: "2 Sep",
    xMax: "4 Sep",
    yMin: 0,
    yMax: 50,
    backgroundColor: "green",
    borderColor: "red",
    borderWidth: 1,
    onClick: function (e: any) {
    //do something...
    },
  },],
},

And I initialise the Bar chart using:

<Bar
  data={data}
  height={height}
  options={options}
  plugins={[ChartAnnotation]}
 />

Which Renders:

The issue:

I can't get the box annotation to fill the correct space, it simply fills all the space. I have tried different values for the min/max on both axis, but it makes no difference.

You will see that I have to set drawTime and type in a strange way, otherwise if I set them normally, I get the following type errors:

Types of property 'type' are incompatible. Type 'string' is not assignable to type '"box"'. Overload 2 of 2, '(props: LinearComponentProps, context?: any): Bar', gave the following error.

I am not sure what I am doing wrong, or why it it would be throwing type errors.

I am using:

"@types/chartjs-plugin-annotation": "^0.5.1",
"chartjs-plugin-annotation": "^0.5.7",
"chart.js": "^2.9.3",

Answer 1

The answer was to format the ticks and labels of the y axis to use the same format.

Resolved via github ticket:

https://github.com/chartjs/chartjs-plugin-annotation/issues/228