Annotations not appearing on chart

[adilold]

Hi,

I'm currently using chartjs to render a few charts generated on a server (data is pulled from a database and then passed to my svelte frontend via a JSON get request). The charts render fine but when I try to render an annotated chart, the annotations either do not appear or an seemingly unrelated error is thrown. I've provided an example of how I'm rendering the charts (with some sample data included): https://jsfiddle.net/nkwzb0fg/1/

I have a feeling that it may be something to do with the way I render the chart - I send down an array of X, Y pairs rather than sending separate arrays for the labels (X values) and actual values (Y values). Am I doing something wrong here?

Thank you,
Adil

[stockiNail]

@adilold your annotation plugin configuration is wrong.

You added the annotations config directly to the root node 'annotation' instead of in a inner node 'annotations'.

The plugins config should be (already tested in your jsfiddle):

    plugins: {
      annotation: {
        annotations: { // <--- missing in your config
          marker: {
            type: 'point',
            xValue: 50.0,
            yValue: 16.0,
            pointStyle: 'crossRot',
            radius: 20
          },
          label1: {
            type: 'label',
            xValue: 30.0,
            yValue: 16.4,
            content: ['this is a label'],
            font: {
              size: 18
            }
          }
        }
      }
    }

[adilold]

I cannot believe I missed that... thank you very much