react-chartjs: difference between `scales.x`/`xAxes`/`xAxes[]`

Question

I'm using react-chartjs-2 with Typescript.

I'm very confused with the interface of chartjs (perhaps this is due to severe API changes beneath versions and information running around online without clearly stating the version).

What is the difference between the following options:

• options.scales.x: {}
• options.scales.xAxes: {}
  • I thought this was equal to the above, but under certain circumstances I could not get options.scales.xAxes.min working. So I resorted to using x.
• options.scales.xAxes: [{}]
  • I see many examples using this syntax (especially here on SO). However, using it myself results in a type error.

Answer 1

options.scales.xAxes: [{}] is V2 syntax, here all the x axes are grouped in a single array, same for all the y axes.

In v3 all the scales are their own object within the scales object where the key of the object is your scale ID.

by default you should use options.scales.x to configure the default x axis. But to make things a bit easyer chart.js looks at the fist letter of the object to determine its type so if you pass options.scales.xAxes it should result in the same if you dont have any other scales configured