Chart.js: Bar Chart

Developer Experience

• Terms 'scale' and 'axis' are often used interchangeably in documentation.
• Labels of x-axis (and y-axis?) can be specified both in scale object or in data object as 'labels'. This may lead to confusion but the authors probably intended to accept as many configurations as possible
• Type Information is given and works correctly so far. One has to define the config with type ChartConfiguration.
• The documentation does not mention information about all configuration options. For instance, options 'maxRotation' and 'minRotation' are not mentioned. However, the properties are listed in the API section of the chart.js website and type documentation is given.
• Axis Label rotation can be configured but seems to not work so well. Apparently, some defaults are hard to overwrite. Also, the rotation starting point cannot be specified.
• Formatting numbers is basically possible, one has to provide a callback function for doing so.
• Labeling the chart elements can be done via the 'chartjs-plugin-datalabels' plugin. However, the plugin did not work in production with the ES6 module. Therefore, a released bundle was included which worked also in production.
• Swapping x and y-axis, in general, is possible but requires additional, effortful restructurings in code.
• There are some troubles with responsiveness: This is due to the fact that chart.js differentiates between display size and render size. When providing specific options, the change of display size is detected and the render size adapted accordingly. For this to work,the canvas needs a container that is relatively positioned and dedicated to the chart canvas only.
• The research structure was most of the time: 1. search-in-docs, 2. search-in-types, 3. google, 4. ask chat gpt