grafana/grafana

Panel plugins

A panel plugin is a frontend-only plugin that knows how to render data on a dashboard. There are roughly 30 built-in panel plugins in public/app/plugins/panel/.

Anatomy

A panel plugin folder typically contains:

public/app/plugins/panel/<id>/
├── plugin.json                 # Metadata
├── module.tsx                  # Builds and exports the PanelPlugin
├── <Component>.tsx             # The React component
├── panelcfg.cue                # CUE schema for panel options
├── panelcfg_types.gen.ts       # Generated TS types from CUE
├── suggestions.ts              # "Suggested visualization" rules
├── migrations.ts               # Option migration between versions
└── tests/

The entry point looks like:

// module.tsx
import { PanelPlugin } from '@grafana/data';
import { TimeSeriesPanel } from './TimeSeriesPanel';
import { defaultOptions } from './panelcfg.gen';

export const plugin = new PanelPlugin<MyOptions>(TimeSeriesPanel)
  .setPanelOptions((builder) => { /* options form schema */ })
  .useFieldConfig({ /* field config */ })
  .setMigrationHandler((panel) => /* migrate old options to current */);

Receiving data

The panel component receives PanelProps from @grafana/data:

function MyPanel({
  data,
  options,
  fieldConfig,
  width,
  height,
  timeRange,
  replaceVariables,
}: PanelProps<MyOptions>) {
  // data: PanelData with `series: DataFrame[]` + LoadingState
  // options: panel-specific options object
  // ...
}

Panels render whatever they want — most use <UPlot> (uplot) for time-series, <DataFrameTable> for tabular, or canvas/SVG for custom visualizations.

Panel-level field config (units, decimals, color thresholds, mappings) is shared across panels and lives in @grafana/data. Panels declare which field-config options they want to expose via useFieldConfig({ standardOptions, customOptions }).

Tour of built-in panels

Plugin	Purpose
`timeseries`	Default time-series visualization (uPlot-based)
`stat`	Big number with sparkline
`gauge`, `bargauge`	Gauge visualizations
`piechart`	Pie / donut
`histogram`	Histogram
`heatmap`	2-D heatmap (calendar/time-bucketed)
`trend`	Compact sparkline grid
`table`	Tabular data with column-level config
`logs`	Logs panel (used both in dashboards and Explore)
`traces`	Trace timeline
`flamegraph`	Flame graph (uses `@grafana/flamegraph`)
`geomap`	Map with layers (mapbox-gl)
`canvas`	Free-form canvas (drag/drop nodes)
`nodeGraph`	Service / dependency graph
`annolist`	Annotation list
`dashlist`	Dashboard list
`alertlist`	Alert state list
`news`	RSS feed
`text`	Markdown / HTML
`welcome`	First-run welcome page
`gettingstarted`	Onboarding tutorial widget

Suggestions

Each panel can register suggestions.ts rules that tell Grafana "if the data looks like X, suggest this panel". The suggestions engine (public/app/features/panel/state/getPanelSuggestions.ts — illustrative) collects all suggestions and surfaces them in the visualization picker.

Migrations

Panel options can change shape between versions. Each plugin declares a migrationHandler that maps an older panel.options blob to the current one, so dashboards written years ago still render.