chartjs / chartjs/chartjs-plugin-annotation

Example "Usage" config throws uncaught error, prevents chartjs from rendering (v2.2.1)

Open
#872 7 comments 0 reactions 0 assignees View on GitHub
help wanted
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.