2020-05-12 04:03:53 +08:00
+++
title = "Add support for annotations"
+++
# Add support for annotations
2020-07-01 05:18:38 +08:00
This guide explains how to add support for [annotations ]({{< relref "../../dashboards/annotations.md" >}} ) to an existing data source plugin.
2020-05-12 04:03:53 +08:00
2020-11-10 21:38:45 +08:00
This guide assumes that you're already familiar with how to [Build a data source plugin ]({{< relref "/tutorials/build-a-data-source-plugin.md" >}} ).
2020-05-12 04:03:53 +08:00
2021-03-08 17:46:48 +08:00
> **Note:** Annotation support for React plugins was released in Grafana 7.2. To support earlier versions, refer to the [Add support for annotation for Grafana 7.1](https://grafana.com/docs/grafana/v7.1/developers/plugins/add-support-for-annotations/).
2020-05-12 04:03:53 +08:00
## Add annotations support to your data source
2021-03-08 17:46:48 +08:00
To enable annotation support for your data source, add the following two lines of code. Grafana uses your default query editor for editing annotation queries.
2020-05-12 04:03:53 +08:00
2021-03-08 17:46:48 +08:00
1. Add `"annotations": true` to the [plugin.json ]({{< relref "metadata.md" >}} ) file.
2020-05-12 04:03:53 +08:00
2021-03-08 17:46:48 +08:00
**plugin.json**
2020-05-12 04:03:53 +08:00
2021-03-08 17:46:48 +08:00
```json
{
"annotations": true
2020-05-12 04:03:53 +08:00
}
```
2021-03-08 17:46:48 +08:00
2. In `datasource.ts` , override the `annotations` method from `DataSourceApi` . For the default behavior, you can set `annotations` to an empty object.
2020-05-12 04:03:53 +08:00
2021-03-08 17:46:48 +08:00
**datasource.ts**
2020-05-12 04:03:53 +08:00
```ts
2021-03-08 17:46:48 +08:00
annotations: {};
2020-05-12 04:03:53 +08:00
```