React TypeScript - Аннотации Chartjs - Аннотации панели отображаются неправильно

Question

Мои аннотации настроены на:

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...
    },
  },],
},

И я инициализирую гистограмму, используя:

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

Что отображает:

Проблема:

Я не могу заставить аннотацию блока заполнять правильное пространство, она просто заполняет все пространство. Я пробовал разные значения min/max на обеих осях, но это не имеет значения.

Вы увидите, что мне нужно установить drawTime и ввести странным образом, иначе, если я установлю их нормально, я получу следующие ошибки типа:

Типы собственности "тип" несовместимы. Тип "строка" не может быть присвоен типу "коробка". Перегрузка 2 из 2, '(props: LinearComponentProps, context?: any): Bar' вызвала следующую ошибку.

Я не уверен, что я делаю не так, или почему это вызывает ошибки типа.

Я использую:

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

Answer 1

Ответ заключался в том, чтобы отформатировать метки и метки оси y для использования того же формата.

Решено через тикет github:

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