Developing Datasource Plugin in React

I need to develop a Datasource plugin.

  1. Does Grafana already provide full support for React data-sources plugins ?
  2. Is there some example repository for a react datasource plugin anywhere ?

Any help is appreciated

There is support for React plugins!

We certainly want to do more to help people getting started with plugins. Here are a few resources that might help:

A bare bones example that will eventually be used as the template we will use to create new plugins, is available here:

I’m also working on another example here:

I’ve also started writing a guide on writing data source plugins, which you can find here:

The guide still needs some more work, but I hope it still might be useful.

If you get stuck, I’d love to know where, so I can improve the guide! :slight_smile:



Thank you very much, we shall try using this!

1 Like

Following the csv example docs - I am trying to run: grafana-toolkit plugin:build

  1. Suggesting to change the docs to say: yarn grafana-toolkit plugin:build
  2. Should the plugin directory (grafana-csv-datasource) be placed under the grafana/data/plugin folder ?
  3. The build command fails with:
    => Cannot read property 'name' of null
    (after the previous steps were successful - Cleaning,Preparing,Prettier check,Linting,Tests)

It fails from somewhere inside the following code in bundle.js:

    compiler = webpack(webpack_plugin_config_1.getWebpackConfig({
        watch: watch,
        production: production,

You can either place the plugin directory inside data/plugins, symlink it there, or configure the path to the plugin in the config file.

Hm, I’m thinking it could be related to your dependencies. Can you make sure you have the latest versions? Something like this:

"devDependencies": {
    "@grafana/data": "latest",
    "@grafana/runtime": "latest",
    "@grafana/toolkit": "next",
    "@grafana/ui": "latest",
    "@types/grafana": "github:CorpGlory/types-grafana.git"

I have found the problem :slight_smile:
Since I am working in Windows, I had to change the following in your file webpack.plugin.config.js

var idx = id.indexOf('/src/');
var idx = id.indexOf('\\src\\');

Are there more places like this to fix ?

  1. Is the backend plugin mandatory in order to communicate with the server from which the data is fetched ?
    -or- can any code be executed in the query method in DataSource.ts ?

  2. Must the backend plugin be written in GO ?

  3. The plugin build command worked for me and the dist folder was created -
    but after executing yarn add @grafana/runtime --dev then it no longer compiles -
    error on the lodash import statement.
    To solve that I added:
    "noImplicitAny": false, under “compilerOptions” in tsconfig.json

    Now the build is successful - but Grafana server fails to init the plugin:


    datasource_windows_amd64.exe": file does not exist

    Seems that again the separating character should be changed.
    What file is responsible for that ? where should I change ?
    This .exe file does exist on disk.

question is also here