plugins.legend.align are incompatible types typescript chartjs-CodePudding

I have something like this in my options object

const options = {
  plugins: {
    legend: {
      align: 'end',
    }
  }
}

According to Chartjs documentation, align accepts 3 values:

start
center
end

The alignment works fine, I am getting the desired result but typescript is complaining that the type of align should be 'start', 'center' or 'end' and not a string.

Type 'string' is not assignable to type ' "end" | "start" | "center" | undefined '

Diving in into Chartjs type definition, I see

export interface LegendOptions<TType extends ChartType> {
  ....
  /**
   * Alignment of the legend.
   * @default 'center'
   */
  align: 'start' | 'center' | 'end';

}

If I change align to a type of string. The typescript error goes away but I shouldn't be doing it.

Any ideas / comments / suggestions is highly appreciated, thanks!

CodePudding user response：

Issue seems to be within the react-chartjs-2 lib.

If you switch to the barebone version of chart.js you wont have this issue:https://codesandbox.io/s/goofy-curie-eyxrr?file=/src/App.tsx