Add chartjs-plugin-annotation

[dkadams]

Add chartjs-plugin-annotation to package.json and import from chartRenderer.ts.

This is a fix for issue #35.

I've only tested using the chartjs-plugin-annotation from Javascript code blocks and it works just fine. I don't use the YAML method for creating charts, so I didn't test that approach.

Note: I hand edited yarn.lock to reflect the new package. npm and yarn both rewrote the whole file, removing quotes and changing the order of properties. I thought it would be better to limit the updates to just the new package.

[netlify[bot]]

✅ Deploy Preview for obsidiancharts canceled.

Name	Link
🔨 Latest commit	bfcde7ecb489fe9032b04f71a8d0d6e53e92282c
🔍 Latest deploy log	https://app.netlify.com/sites/obsidiancharts/deploys/64cd554382d10d0008234062

[phibr0]

Thank you!

[claremacrae]

Do we need to do anything to take advantage of this? Would it be possible for the documentation to be updated if so?

[phibr0]

Currently you need to "manually" use it via the advanced-chart codeblocks, I unfortunately don't have the time currently to update documentation or make it available via the normal yaml based charts

[claremacrae]

Hi @dkadams, is there any chance that you could add an example here showing how to use what you added via advanced-chart code blocks please? Just to get people started...

[claremacrae]

Hi @dkadams, is there any chance that you could add an example here showing how to use what you added via advanced-chart code blocks please? Just to get people started...

Cancel that...

For anyone wondering how to use this, here is an example - the interesting bit is the "annotations" section at the end...

```advanced-chart
{
  "type": "scatter",
  "data": {
    "datasets": [
      {
        "label": "Scatter Dataset",
        "data": [
          {
            "x": "-10",
            "y": "0"
          },
          {
            "x": "0",
            "y": "10"
          },
          {
            "x": "10",
            "y": "5"
          },
          {
            "x": "0.5",
            "y": "5.5"
          }
        ],
        "backgroundColor": "rgb(255, 99, 132)"
      }
    ]
  },
  "options": {
    "scales": {
      "x": {ions 
        "type": "linear",
        "position": "bottom"
      }
    },
    "annotations": {
      "line1": {
        "type": "line",
        "yMin": 5,
        "yMax": 5,
        "borderColor": "rgb(255, 99, 132)",
        "borderWidth": 2
      }
    }
  }
}
```

The Annotations User Guide shows the available features.

[claremacrae]

You can also generate the advanced-chart code block in dataviewjs, by adjusting the second example here, which will allow you to construct the data programmatically:

https://charts.phibr0.de/Meta/Charts/Dataview+Integration#Get+data+from+current+page