Grafana Graph Panel Plugin Tutorial

This repository contains full working code to accompany this tutorial. The tutorial presents a step-by-step guide to create custom Graph Panel Plugins for Grafana
We create a simple Graph Panel which plot a time-series data using Graph component of Grafana's UI library. Making custom plugins helps customizing your panels according to your needs. As a simple customization, the code here provides options to user to change between bar graphs and line graphs.

Pre-requisites

• TypeScript
• React
• Grafana

Final Product

Line Graph

Bar Graph

What is Grafana Panel Plugin?

Panels are the building blocks of Grafana. They allow you to visualize data in different ways. While Grafana has several types of panels already built-in, you can also build your own panel, to add support for other visualizations.

For more information about panels, refer to the documentation on Panels

Getting started

1. Install dependencies

npm install

2. Build plugin in development mode or run in watch mode

npm dev

or

npm watch

Start the Grafana server on your system. Make sure the root directory of the plugin is in the plugins directly of Grafana in your system (default is /path/to/grafana-root/data/plugins)

Learn more

• Beginner Tutorial with options (slightly deprecated)
• Build a panel plugin tutorial
• Grafana documentation
• Grafana Tutorials - Grafana Tutorials are step-by-step guides that help you make the most of Grafana
• Grafana UI Library - UI components to help you build interfaces using Grafana Design System