chartjs / chartjs/chartjs-plugin-annotation
Example "Usage" config throws uncaught error, prevents chartjs from rendering (v2.2.1)
- Dominant language
- JavaScript
- Stars
- 623
- Forks
- 377
- PR merge metrics
- No merged PRs in 30d
Description
**Backstory**
I was trying to set up a codepen to try using chartjs-plugin-annotaiton. (If I just set it up wrong, I'm sorry). I created If you go look at [the codepen](https://codepen.io/chart2music/pen/gOdqLJz?editors=1010), you'll notice that:
1. It's the example config from the docs ([docs page](https://www.chartjs.org/chartjs-plugin-annotation/master/guide/usage.html)) ([github page](https://github.com/chartjs/chartjs-plugin-annotation/blob/master/docs/guide/usage.md))
1. there's an error message in the console.
> chartjs-plugin-annotation.esm.js:940 Uncaught TypeError: Cannot set properties of undefined (setting 'backgroundColor')
> at ht (chartjs-plugin-annotation.esm.js:940:9)
> at dt (chartjs-plugin-annotation.esm.js:857:17)
> at Ct.resolveElementProperties (chartjs-plugin-annotation.esm.js:1249:12)
> at ne (chartjs-plugin-annotation.esm.js:2441:32)
> at Object.afterUpdate (chartjs-plugin-annotation.esm.js:2614:5)
> at callback (helpers.segment-1e4938ea.js:43:15)
> at PluginService._notify (chartjs.js:5037:11)
> at PluginService.notify (chartjs.js:5020:25)
> at Chart.notifyPlugins (chartjs.js:6266:26)
> at Chart.update (chartjs.js:5827:10)
So, I dug into the code. The error was thrown on [this line](https://github.com/chartjs/chartjs-plugin-annotation/blob/master/src/helpers/helpers.chart.js#L269):
```js
function resolveLabelElementProperties(chart, properties, options) {
const label = options.label;
label.backgroundColor = 'transparent';
```
So, if `options.label` is considered `undefined`, where is options coming from?
```js
export function resolveBoxAndLabelProperties(chart, options, centerBased) {
const properties = resolveBoxProperties(chart, options);
properties.initProperties = initAnimationProperties(chart, properties, options, centerBased);
properties.elements = [{
type: 'label',
optionScope: 'label',
properties: resolveLabelElementProperties(chart, properties, options),
initProperties: properties.initProperties
}];
return properties;
}
```
which is called by
```js
resolveElementProperties(chart, options) {
return resolveBoxAndLabelProperties(chart, options);
}
```
...which is called from [over here](https://github.com/chartjs/chartjs-plugin-annotation/blob/master/src/elements.js#L46):
```js
function updateElements(chart, state, options, mode) {
const animations = resolveAnimations(chart, options.animations, mode);
const annotations = state.annotations;
const elements = resyncElements(state.elements, annotations);
for (let i = 0; i < annotations.length; i++) {
const annotationOptions = annotations[i];
const element = getOrCreateElement(elements, i, annotationOptions.type);
const resolver = annotationOptions.setContext(getContext(chart, element, annotationOptions));
const properties = element.resolveElementProperties(chart, resolver);
```
and now we've switched from `options` to `resolver`. Maybe there's a mistake, and maybe the function is expecting an option and receiving a resolver? Maybe I'm providing the config in the wrong way? So I go look at the other pages in the docs, and I start recognizing options I saw in the code. So, I update my annotation to have these properties:
```js
label: {
callout: {}
}
```
and then I was able to move forward to another error message
> Uncaught TypeError: Cannot read properties of undefined (reading 'family')
> at de (chartjs-plugin-annotation.esm.js:2520:19)
> at te (chartjs-plugin-annotation.esm.js:2397:57)
> at de (chartjs-plugin-annotation.esm.js:2524:22)
> at ae (chartjs-plugin-annotation.esm.js:2508:5)
> at ie (chartjs-plugin-annotation.esm.js:2486:26)
> at ne (chartjs-plugin-annotation.esm.js:2446:7)
> at Object.afterUpdate (chartjs-plugin-annotation.esm.js:2614:5)
> at callback (helpers.segment-1e4938ea.js:43:15)
> at PluginService._notify (chartjs.js:5037:11)
> at PluginService.notify (chartjs.js:5020:25)
which took me back to the updateElements function abov. So, another function that thought `resolver` would have something that it didn't. Suspicious...
**What's the bug?**
1. I can't make [this chart](https://codepen.io/chart2music/pen/gOdqLJz?editors=1010) display.
2. I found some weird console errors.
Maybe they're related?
Contributor guide
Assessment
This issue has not been assessed yet.