Visualizations that support standard options
Standard options can be configured for: Bar chart, Bar gauge, Candlestick, Canvas, Gauge, Geomap, Histogram, Pie chart, Stat, State timeline, Status history, Table, Time series, Trend, and XY chart.
Grafana dashboards · all subjects
panels
138 notes in this subject, read out of this brain and free to use. This is page 2 of 3.
Unit field configuration options
The Unit option lets you choose which unit a field should use. The unit is applied to all fields except time. You can drill down in the Unit drop-down to find predefined units, or enter custom units. Custom units will appear as the last option in the drop-down.
Custom unit syntax: suffix, prefix, time, si
Custom units support the following syntax: suffix:<suffix> (custom unit after value), prefix:<prefix> (custom unit before value), time:<format> (custom date time formats like time:YYYY-MM-DD using moment.js format syntax), si:<base scale><unit characters> (custom SI units like si:mF, where you can specify both unit and source data scale).
Custom unit syntax: count and currency
Custom units support count:<unit> (custom count unit) and currency:<unit> (custom currency unit). Additionally, currency:financial:<unit> provides full format currency without abbreviations, displaying complete numeric values instead of scaled abbreviations (K for Thousand, M for Million, B for Billion, T for Trillion). For example, currency:financial:$ displays 500,555 instead of $501K. Add :suffix to place the symbol after the number, such as currency:financial:€:suffix which displays 500,555€.
Emoji as custom units
You can paste a native emoji in the Unit drop-down and select it as a custom unit.
Date and time format units expect milliseconds since Unix epoch
All Date & time format units in Grafana (such as Datetime ISO or Datetime US) expect input values to be in milliseconds since the Unix epoch (January 1, 1970). If your data source provides timestamps in seconds, these will be incorrectly interpreted as dates very close to January 1, 1970. To display timestamps that are in seconds since epoch, multiply your timestamp values by 1000 using a transformation.
Automatic unit scaling behavior
By default, Grafana automatically scales the unit based on the magnitude of the value. For example, values of 0.14kW and 3000kW are displayed as 140W and 3MW respectively. You can use custom units to control this behavior by setting a prefix, suffix, or custom SI unit.
String unit for displaying original string values
Sometimes Grafana is too aggressive in interpreting strings and displaying them as numbers. To configure Grafana to show the original string value, select Misc > String in the Unit drop-down.
Min and Max options for threshold calculations
The Min option sets the minimum value used in percentage threshold calculations. The Max option sets the maximum value used in percentage threshold calculations. Leave either field empty to automatically calculate the minimum or maximum.
Field min/max calculation scope
By default, the calculated Min and Max are based on the minimum and maximum of all series and fields. When you enable Field min/max, Grafana calculates the min or max of each field individually, based on the minimum or maximum value of that specific field.
Decimals option behavior
The Decimals option specifies the number of decimals Grafana includes in the rendered value. If you leave this field empty, Grafana automatically truncates the number of decimals based on the value (for example, 1.1234 displays as 1.12 and 100.456 displays as 100). To display all decimals, set the unit to String.
Display name field and variable support
The Display name option sets the display title of all fields. You can use variables in the field title. When multiple stats, fields, or series are displayed, this field controls the title in each stat. You can use expressions like ${__field.name} to use only the series name or field name in the title.
Color scheme options
The Color scheme options let you set single or multiple colors for your entire visualization. Available schemes include: Single color (specifies a single color), Shades of a color (Grafana selects shades of a single color), From thresholds (by value) (color taken from matching threshold, may require choosing Last/Min/Max value), Classic palette (Grafana automatically assigns color based on field/series order), Classic palette (by series name) (colors assigned based on series name), Multiple continuous colors (by value) (colors assigned based on percentage of value relative to min/max, with options Green-Yellow-Red, Red-Yellow-Green, Blue-Yellow-Red, Yellow-Red, Blue-Purple, Yellow-Blue), and Single continuous color (by value) (shades of one color based on percentage, with options Blues, Reds, Greens, Purples).
Legend color picker creates override rule
You can use the legend to open the color picker by clicking the legend series color icon. Setting color this way automatically creates an override rule that sets a specific color for a specific series.
No value option default
The No value option specifies what Grafana should display if the field value is empty or null. The default value is a hyphen (-).
Standard options changes require click or Enter outside field
Most field options won't affect the visualization until you click outside of the field option box you're editing or press Enter.
Granular control with field overrides
For more granular control over the display of fields beyond standard options, you can configure overrides.
Heatmap color scale value range configuration
By default, Grafana calculates cell colors based on minimum and maximum bucket values. Start color scale from value: set minimum value used for cell color calculation (placeholder Auto (min) uses series minimum; if bucket value is less than this, mapped to minimum color). End color scale at value: set maximum value used for cell color calculation (placeholder Auto (max) uses series maximum; if bucket value is greater than this, mapped to maximum color). These overwrite default values.
Heatmap tooltip options table
Tooltip options control information overlay appearing when hovering over data points. Tooltip mode: choose Single, All, or Hidden. Show histogram (Y axis): displayed when Tooltip mode is Single; controls whether tooltip includes histogram representing y-axis. Show color scale: controls whether tooltip includes color scale; only displayed when Tooltip mode is Single. Max width: set maximum width of tooltip box. Max height: set maximum height of tooltip box (shown when Tooltip mode is All or exemplar data present; if unset, tooltip not scroll-limited).
Heatmap legend options table
Legend options control color scale legend display. Show legend: toggle switch to turn legend on or off. Placement: choose Bottom (places legend below graph) or Right (places legend to right of graph). Width: control legend width when placed on right side (value may be pixel width or CSS width property like max(200px, 20%)); only displayed when legend placement is Right.
Heatmap visualization purpose and use cases
Heatmaps allow you to view histograms over time, identifying patterns in histogram data distribution over time. Use heatmaps when you need to visualize large density of data distribution, condense large amounts of data through color schemes for easier interpretation, identify outliers in data distribution, or provide statistical analysis to see how values or trends change over time.
Heatmap supported data format
Heatmaps support time series data.
Heatmap options table
The heatmap options control how data is calculated and grouped. Calculate from data: determines if data is already calculated (from data source/transformer) or should be calculated in the panel. X Bucket: determines how x-axis is split into buckets by specifying time interval in Size input or by Count. Y Bucket: determines how y-axis is split into buckets, choose from Size or Count. Y Bucket scale (when Calculate from data is Yes): select Linear, Logarithmic (choose Log base 2 or 10), or Symlog (choose Log base 2 or 10, enter Linear threshold). Y Bucket scale (when Calculate from data is No): choose Auto (uses default scale behavior), Linear, Log (choose Log base 2 or 10), or Symlog (choose Log base 2 or 10, enter Linear threshold).
Heatmap Y-Axis options table
Y-Axis options define y-axis display. Placement: set where y-axis is displayed (Left, Right, or Hidden). Unit: unit configuration. Decimals: decimal configuration. Min/Max value: configure axis range. Axis width: configure width for axis. Axis label: configure axis value. Tick alignment: set alignment of tick marks (Auto, Top (LE), Middle, Bottom (GE)), only displayed when Calculate from data is No and Y Bucket scale is Auto. Reverse: when selected, axis appears in reverse order.
Heatmap color options Scheme mode
When using Scheme color mode, select a color scheme to represent bucket values by cell color. The leftmost color on the spectrum represents minimum count and the rightmost color represents maximum count. Some color schemes are automatically inverted when using light theme.
Heatmap color options Opacity mode
When using Opacity color mode, cell color does not change but opacity changes with bucket count. Select a base Color for cells. Scale options: Exponential (power scale where cell opacity is calculated as value^k with configurable Exponent value greater than 0; exponent less than 1 gives logarithmic scale, greater than 1 gives exponential scale, equal to 1 gives linear scale) or Linear (bucket value maps linearly to opacity).
Heatmap color steps configuration
Steps can be set to a value between 1 and 128.
Heatmap reverse color scheme option
Toggle the reverse switch to reverse the color scheme. This option only applies to Scheme color mode.
Heatmap cell display options table
Cell display options control heatmap cell display. Value name: sets label for cell value column when Calculate from data is No. Unit: unit configuration. Decimals: decimal configuration. Cell gap: set space between cells. Hide cells with values <=: enter a value to hide cells at or below this threshold. Hide cells with values >=: enter a value to hide cells at or above this threshold.
Heatmap tooltip mode options
Tooltip mode controls how tooltips behave when hovering over visualization. Single: shows only the single series being hovered over. All: shows all series with hovered series highlighted in bold. Hidden: does not display tooltip on interaction.
Pie chart legend options
Legend options include: Visibility (toggle to turn the legend on or off); Mode (List displays legend as a list by default, Table displays it as a table); Placement (select Bottom or Right); Width (controls legend width when placed on the right, only displayed if placement is Right); Legend values (select Percent or Value to display in the legend, more than one can be selected).
Pie chart Value options
Value options are: Show (Choose Calculate to reduce each value to a single value per series, or All values to display every value from a single series); Calculation (If Show is Calculate, select a calculation to reduce each series, refer to Calculation types documentation); Limit (If Show is All values, enter a value to limit the number of values displayed); Fields (Select which field or fields to display, with options for Numeric Fields or All Fields).
Pie chart label options
Labels that can be displayed on the pie chart include: Name (the series or field name); Percent (the percentage of the whole); Value (the raw numerical value). More than one label can be selected. Labels are displayed in white over the body of the chart. Long names or numbers might be clipped.
Pie chart slice sorting options
Pie chart slices can be sorted using the following options: Descending (the slices decrease in size, clockwise - this is the default); Ascending (the slices increase in size, clockwise); None (no sorting is applied, the original order of the data is maintained).
Pie chart types: Pie or Donut
The pie chart display style can be selected as either Pie or Donut.
Pie chart visualization purpose and use cases
A pie chart displays data as segments of a circle proportional to the whole, making it look like a sliced pie. Each slice corresponds to a value or measurement. The pie chart visualization is ideal when you have data that adds up to a total and you want to show the proportion of each value compared to other slices and to the whole pie. Common use cases include: browser share distribution in the market, incident causes per category, network traffic sources, and user demographics.
Pie chart displays only one pie regardless of datasets
The pie chart visualization will only display one pie, regardless of the number of datasets, fields, or records queried in it.
Pie chart data format: single row of numeric values
The easiest way to provide data for a pie chart visualization is with a dataset containing a single record (or row) with multiple fields (or columns) containing numeric values. The default settings automatically display each column as a slice of the pie.
Pie chart data format: multiple rows
When using numeric data in multiple rows, the default behavior is to calculate a single value per column and display only the last row. To display all values from multiple rows, change the Show setting in Value options from Calculate to All values.
Pie chart data format: multiple rows and columns
When a dataset contains multiple rows and columns with numeric data, by default only the last row's values are summed. To display all cells, change the Show setting in Value options from Calculate to All values. This also labels elements by concatenating all text fields with the column name. To display only values from a specific field, set Show to All values and then set the Fields option to the desired column.
Canvas element types available
Canvas supports the following element types: Metric value, Text, Ellipse, Rectangle, Icon, Server, Triangle, Cloud, Parallelogram, and Button. Basic shapes (Cloud, Ellipse, Parallelogram, Rectangle, Triangle) can display text and have background color changed based on data thresholds.
Text element on canvas
The text element lets you add text to the canvas. It supports an editing mode triggered via double clicking or the edit menu option in the context menu.
Icon element on canvas
The icon element lets you add a supported icon to the canvas. Icons can have their color set based on thresholds or value mappings. Custom icons can be added by referencing an SVG file URL through the Icon > SVG Path option.
Server element on canvas
The server element lets you represent a single server, stack of servers, database, or terminal. Server elements support status color, bulb color, and bulb blink rate, all configurable by fixed or field values.
Button element on canvas
The button element lets you add a basic button to the canvas. Button elements are available when 'Experimental element types' is enabled. They support triggering basic, unauthenticated API calls. A button click will only trigger an API call when inline editing is disabled.
Button API options configuration table
Button API options include: Endpoint (enter endpoint URL), Method (choose GET, POST, or PUT), Content-Type (choose JSON, Text, JavaScript, HTML, XML, or x-www-form-urlencoded), Query parameters (Key/Value pairs), Header parameters (Key/Value pairs), Success message (appears if API call succeeds; default 'API call was successful' if empty), and Payload (body of API call).
Add custom image to canvas element
To add a custom background image to canvas elements (except Button), reference an image URL that allows requests from your Grafana instance. In the Background (element type) section, select 'Fixed' as the image source, click 'Select a value', click the 'URL' tab in the dialog, enter the URL, and click 'Select'.
Canvas connections between elements
You can connect canvas elements together to create complex visualizations. To create a connection: enable inline editing, hover over an element to display connection anchors, and drag from one anchor to another element's anchor. To remove a connection, click it and press Delete or Backspace.
Connection adjustment and alignment
Connections can be adjusted by clicking them to display midpoint controls and moving those as needed. When you move connected elements, the connection resizes automatically. If a connection is moved to almost a right angle or straight line, it snaps to that angle or line. Element snapping and alignment guides only work when the canvas is not zoomed in.
Canvas inline editing toggle
The inline editing toggle in canvas options locks or unlocks the canvas. When turned off, the canvas becomes 'locked', freezing elements in place and preventing unintended modifications.
Add custom icon to canvas
To add a custom icon to a canvas element by referencing an SVG file: under Icon > SVG Path, select 'Fixed' as file source, click 'Select a value', in the dialog click 'URL' tab, enter the URL, and click 'Select'. Optionally add a background image to the icon with the Background (icon) option by adding a custom image.
Canvas inline editor in dashboard mode
You can edit your canvas inline while in dashboard mode. The inline editor menu displays options relevant to the selected part of the canvas and can be moved around.
Connection styling options
Connection styles can be set based on fixed or field values including: Color (set connection color), Size (control size by entering a number), Radius (add curve by entering a value for degree), Direction (control arrow head appearance: Forward, Reverse, Both, None; or based on Field values where positive/negative/zero determine direction), and Line style (Solid, Dashed, or Dotted).
Canvas context menu functionality
Right clicking on the canvas panel allows setting a background image and adding elements. Right clicking on a canvas element allows editing, deleting, duplicating, and modifying the element's layer positioning.
Canvas visualization overview
The canvas is an extensible visualization that allows adding and arranging elements in unstructured static and dynamic layouts. It combines Grafana's power with the flexibility of custom elements, enabling custom visualizations and data overlays not possible with standard Grafana visualizations, all within the Grafana UI.
Canvas data format requirements
The canvas visualization has no specific data requirements. You can start adding and configuring visual elements without providing any data. Any data consumed should be accessible through supported Grafana data sources and structured for smooth integration with custom elements. If the canvas updates in real time, data should support refreshes at desired intervals without degrading user experience.
Metric value element on canvas
The metric value element lets you select data to display on a canvas. It has a unique edit mode triggered either through the context menu 'Edit' option or by double clicking. In edit mode, you can select which field data to display.
Experimental Element types toggle
The 'Experimental element types' toggle includes experimental element types in available selections: Button, Wind Turbine, Drone Top, Drone Front, and Drone Side. This option is on by default.
Canvas tooltip mode settings
The Tooltip mode setting controls display of tooltips when hovering over canvas elements connected to data, data links, or actions. Options are: Enabled (show tooltip on hover) and Disabled (no tooltips on hover). The 'Disable for one-click elements' setting allows hiding tooltips on elements with one-click functionality to prevent interference while still allowing tooltips on other elements.
Canvas layer options structure
Canvas layer options control its appearance and include: Elements (add elements to canvas), Background (set canvas background color, image, and image size), and Border (set canvas border width, color, and radius).