Skip to main content

Build a Panel plugin

We are not here to lecture you on the basics of programming. If you are already looking to build a plugin for Grafana, you most likely know a thing or two about software development.

We thought that the "follow-me, step-by-step tutorial" format, where Daria demonstrates the steps, might be the fastest to get you up to speed.

To this day, we have created two parts of the tutorial. If you like our format, please indicate that by liking the videos on YouTube and leaving a comment.

We need to know if our effort helps and third part would bring value.

Part 1​

Lean back on your chair and watch how Daria creates a panel plugin for Grafana.

Alternatively, follow every step and in the end have your first-ever panel plugin created and provisioned with configured version control!

In this part, Daria walks you through the following 10 steps:

  • Step 1. Prerequisites
  • Step 2. Scaffolding
  • Step 3. VS Code
  • Step 4. Install dependencies
  • Step 5. Build a plugin
  • Step 6. Start Grafana instance
  • Step 7. Login into Grafana UI
  • Step 8. Create a dashboard
  • Step 9. Provisioning
  • Step 10. Rebuild the Grafana container
Part 1. Build a panel plugin tutorial for Grafana.

Part 2​

Daria walks you through the following 10 steps:

  • Step 11. Version Control
  • Step 12. Update Grafana Version
  • Step 13. Update Dependencies
  • Step 14. GitHub Commit
  • Step 15. Plugin.json file
  • Step 16. Plugin Options and Types
  • Step 17. Update component
  • Step 18. Commit to GitHub
  • Step 19. Update Styles
  • Step 20. Add Data Source
Part 2. Build a panel plugin tutorial for Grafana.

Part 3 (final)​

Part 3 is coming if the Community approves the format of Part 1 and Part 2 by liking and commenting on the videos, especially the second part. For some reason, Part 2 did not get much love yet.

We plan to cover the following:

  • Step 21. Unit tests
  • Step 22. End-to-end tests
  • Step 23. Signing a plugin to make it a part of the Grafana catalog
  • Step 24. Release Workflow
  • Step 25. Variables
  • Step 26. Bonus, adding a custom editor for panel options