How to Start Developing the XY Chart Panel in Grafana

Grafana Configuration
1

I’m working on developing and making modifications to the XY Chart panel that comes with Grafana. The panel is located in the public/app/plugins directory, which seems to indicate that it’s treated as a plugin. I’m trying to set up my development environment to effectively start developing and modifying this panel, but I’m encountering issues where my changes aren’t being reflected, despite following the documentation.

Here is what I’ve tried so far:

  1. Setting up Development Environment:
  • Installed dependencies (yarn install --immutable ).
  • Ran frontend in development mode using yarn start to initiate the Webpack dev server.
  • In a separate terminal, ran yarn plugin:build:dev to watch plugins for changes (as suggested in the README).
  • The backend is running via make run .
  1. Issue Description:
  • Changes not reflecting: When I make changes to the XY Chart panel, such as adding a simple console.log() , the browser does not reflect these changes. The terminal running yarn start does show successful rebuilds, but I don’t see the changes in the frontend UI.
  • Live reload does not work as expected for this particular panel, although Webpack seems to indicate it is detecting changes.
  1. Steps Taken to Diagnose:
  • Confirmed that app_mode = development is set in custom.ini .
  • Used Chrome DevTools to see if the updated JavaScript files are being served – timestamps still show old files.
  • Disabled caching in Chrome DevTools and used a hard refresh, but changes still don’t appear.
  • Verified that XY Chart is properly registered and appears under Configuration > Plugins.
  • Checked Webpack configuration to make sure it is watching the appropriate directories (using watchOptions in webpack.dev.js ).

Question

How can I properly set up my development environment to start developing the XY Chart panel in Grafana and ensure that my changes are reflected correctly in the frontend?

Is there something specific about how Grafana handles plugin panels like XY Chart during development that requires additional configuration or steps beyond what I’ve already tried? Any help to get started developing this panel effectively would be greatly appreciated.

2

I just want to point out to check which version of chart you are using… In my case there were v1 and v2. I were modifying all the time v1… And it’s enough to just run yarn watch