# Visualizations available in Grafana version 12 **** This documentation topic is designed for Grafana workspaces that support **Grafana version 12.x**. For Grafana workspaces that support Grafana version 10.x, see [Working in Grafana version 10](using-grafana-v10.md). For Grafana workspaces that support Grafana version 9.x, see [Working in Grafana version 9](using-grafana-v9.md). For Grafana workspaces that support Grafana version 8.x, see [Working in Grafana version 8](using-grafana-v8.md). Grafana offers a variety of visualizations to support different use cases. This section of the documentation highlights the built-in visualizations, their options and typical usage. A common panel to get started with, and to learn the basics of using panels, is the [Time series](v12-panels-time-series.md) panel. **Note** If you are unsure which visualization to pick, Grafana can provide visualization suggestions based on the panel query. When you select a visualization, Grafana will show a preview with that visualization applied. + Graphs & charts + [Time series](v12-panels-time-series.md) is the default and main Graph visualization. + [State timeline](v12-panels-state-timeline.md) for state changes over time. + [Status history](v12-panels-status-history.md) for periodic state over time. + [Bar chart](v12-panels-bar-chart.md) shows any categorical data. + [Histogram](v12-panels-histogram.md) calculates and shows value distribution in a bar chart. + [Heatmap](v12-panels-heatmap.md) visualizes data in two dimensions, used typically for the magnitude of a phenomenon. + [Pie chart](v12-panels-piechart.md) is typically used where proportionality is important. + [Candlestick](v12-panels-candlestick.md) is typically for financial data where the focus is price/data movement. + [Gauge](v12-panels-gauge.md) is the traditional rounded visual showing how far a single metric is from a threshold. + [Trend](v12-panels-trend.md) for datasets that have a sequential, numeric x that is not time. + [XY Chart](v12-panels-xychart.md) provides a way to visualize arbitrary x and y values in a graph. + Stats & numbers + [Stat](v12-panels-stat.md) for big stats and optional sparkline. + [Bar gauge](v12-panels-bar-gauge.md) is a horizontal or vertical bar gauge. + Misc + [Table](v12-panels-table.md) is the main and only table visualization. + [Logs](v12-panels-logs.md) is the main visualization for logs. + [Node graph](v12-panels-node-graph.md) for directed graphs or networks. + [Traces](v12-panels-traces.md) is the main visualization for traces. + [Flame graph](v12-panels-flamegraph.md) is the main visualization for profiling. + [Geomap](v12-panels-geomap.md) helps you visualize geospatial data. + [Datagrid](v12-panels-datagrid.md) allows you to create and manipulate data, and acts as a data source for other panels. + Widgets + [Dashboard list](v12-panels-dashboard-list.md) can list dashboards. + [Alert list](v12-panels-alert-list.md) can list alerts. + [Text](v12-panels-text.md) can show markdown and html. + [News](v12-panels-news.md) can show RSS feeds. ## Get more You can add more visualization types by installing panel plugins from the [Find plugins with the plugin catalog](grafana-plugins.md#plugin-catalog). ## Examples In the following sections you can find visualizations examples. ## Graphs For time based line, area, and bar charts, we recommend the default [time series](v12-panels-time-series.md) visualization. ![\[An image showing examples of times series visualizations in Grafana.\]](http://docs.aws.amazon.com/grafana/latest/userguide/images/viz/time_series_example.png) For categorical data, use a [bar chart](v12-panels-bar-chart.md). ![\[An image showing examples of bar chart visualizations in Grafana.\]](http://docs.aws.amazon.com/grafana/latest/userguide/images/viz/barchart_example.png) ## Big numbers & stats A [stat](v12-panels-stat.md) visualization shows one large stat value with an optional graph sparkline. You can control the background or value color using thresholds or color scales. ![\[An image showing an example of a stat visualization in Grafana.\]](http://docs.aws.amazon.com/grafana/latest/userguide/images/viz/stat_panel_example.png) ## Gauge If you want to present a value as it relates to a min and max value, you have two options. First a standard radial [gauge](v12-panels-gauge.md): ![\[An image showing an example of a gauge visualization in Grafana.\]](http://docs.aws.amazon.com/grafana/latest/userguide/images/viz/gauge_example.png) Secondly, Grafana also has a horizontal or vertical [bar gauge](v12-panels-bar-gauge.md) with three distinct display modes. ![\[An image showing an example of a gauge visualization in Grafana.\]](http://docs.aws.amazon.com/grafana/latest/userguide/images/viz/bar_gauge_example.png) ## Table To show data in a table layout, use a [table](v12-panels-table.md) visualization. ![\[An image showing an example of a table visualization in Grafana.\]](http://docs.aws.amazon.com/grafana/latest/userguide/images/viz/table_example.png) ## Pie chart To display reduced series, or values in a series, from one or more queries, as they relate to each other, use a [pie chart](v12-panels-piechart.md) visualization. ![\[An image showing an example of a pie chart visualization in Grafana.\]](http://docs.aws.amazon.com/grafana/latest/userguide/images/viz/pie_chart_example.png) ## Heatmaps To show value distribution over time, use a [heatmap](v12-panels-heatmap.md) visualization. ![\[An image showing an example of a heatmap visualization in Grafana.\]](http://docs.aws.amazon.com/grafana/latest/userguide/images/viz/heatmap_example.jpg) ## State timeline A [state timeline](v12-panels-state-timeline.md) shows discrete state changes over time. When used with time series, thresholds are used to turn numerical values into discrete state regions. ![\[An image showing an example of a state timeline visualization in Grafana.\]](http://docs.aws.amazon.com/grafana/latest/userguide/images/viz/state_timeline_example.png) # Alert list **** This documentation topic is designed for Grafana workspaces that support **Grafana version 12.x**. For Grafana workspaces that support Grafana version 10.x, see [Working in Grafana version 10](using-grafana-v10.md). For Grafana workspaces that support Grafana version 9.x, see [Working in Grafana version 9](using-grafana-v9.md). For Grafana workspaces that support Grafana version 8.x, see [Working in Grafana version 8](using-grafana-v8.md). Use alert lists to display your alerts. You can configure the list to show current state. For more information about alerts, see [Alerts in Grafana version 12](v12-alerts.md). Use these settings to refine your visualization. ## Options + **Group mode** – Choose between **Default grouping** to show alert instances grouped by their alert rule, and **Custom grouping** to group alert instances by a custom set of labels. + **Max Items** – Set the maximum number of alerts to list. + **Sort order** – Select how to order the alerts displayed. + **Alphabetical (asc)** – Alphabetical order + **Alphabetical (desc)** – Reverse alphabetical order + **Importance** – By importance according to the following values, with 1 being the highest: + `alerting` or `firing`: 1 + `no_data`: 2 + `pending`: 3 + `ok`: 4 + `paused` or `inactive`: 5 + **Time (asc)** – Newest active alert instances first. + **Time (desc)** – Oldest active alert instances first. + **Alerts from this dashboard** – Show alerts only from the dashboard that the alert list is in. ## Filter These options allow you to limit alerts shown to only those that match the query, folder, or tags that you choose: + **Alert name** – Enter an alert name query. + **Alert instance label** – Filter alert instances using label querying. For example, `{severity="critical", instance=~"cluster-us-.+"}`. + **Folder** – Select a folder. Only alerts from dashboards in the selected folder will be displayed. + **Datasource** – Filter alerts from the selected data source. ## State filter Choose which alert states to display in this panel. + Alerting / Firing + Pending + No data + Normal + Error # Annotations list **** This documentation topic is designed for Grafana workspaces that support **Grafana version 12.x**. For Grafana workspaces that support Grafana version 10.x, see [Working in Grafana version 10](using-grafana-v10.md). For Grafana workspaces that support Grafana version 9.x, see [Working in Grafana version 9](using-grafana-v9.md). For Grafana workspaces that support Grafana version 8.x, see [Working in Grafana version 8](using-grafana-v8.md). The Annotations list shows a list of available annotations you can use to view annotated data. Various options are available to filter the list based on tags and on the current dashboard. ## Annotation query The following options control the source query for the list of annotations. **Query Filter** Use the query filter to create a list of annotations from all dashboards in your organization or the current dashboard in which this panel is located. It has the following options: + All dashboards - List annotations from all dashboards in the current organization. + This dashboard - Limit the list to the annotations on the current dashboard. **Time Range** Use the time range option to specify whether the list should be limited to the current time range. It has the following options: + None - no time range limit for the annotations query. + This dashboard - Limit the list to the time range of the dashboard where the annotation list panel is available. **Tags** Use the tags option to filter the annotations by tags. You can add multiple tags in order to refine the list. **Note** Optionally, leave the tag list empty and filter on the fly by selecting tags that are listed as part of the results on the panel itself. **Limit** Use the limit option to limit the number of results returned. ## Display These options control additional metadata included in the annotations panel display. **Show user** Use this option to show or hide which user created the annotation. **Show time** Use this option to show or hide the annotation creation time. **Show Tags** Use this option to show or hide the tags associated with an annotation. *NB*: You can use the tags to live-filter the annotation list on the visualization itself. ## Link behavior **Link target** Use this option to chose how to view the annotated data. It has the following options. + Panel - This option will take you directly to a full-screen view of the panel with the corresponding annotation + Dashboard - This option will focus the annotation in the context of a complete dashboard **Time before** Use this option to set the time range before the annotation. Use duration string values like “1h” = 1 hour, “10m” = 10 minutes, etc. **Time after** Use this option to set the time range after the annotation. # Bar chart **** This documentation topic is designed for Grafana workspaces that support **Grafana version 12.x**. For Grafana workspaces that support Grafana version 10.x, see [Working in Grafana version 10](using-grafana-v10.md). For Grafana workspaces that support Grafana version 9.x, see [Working in Grafana version 9](using-grafana-v9.md). For Grafana workspaces that support Grafana version 8.x, see [Working in Grafana version 8](using-grafana-v8.md). Bar charts allow you to graph categorical data. ![\[An image showing examples of bar chart visualizations in Grafana.\]](http://docs.aws.amazon.com/grafana/latest/userguide/images/viz/barchart_example.png) ## Supported data formats Only one data frame is supported and it needs to have at least one string field that will be used as the category for an X or Y axis and one or more numerical fields. The following is an example of data formats: | Browser | Market share | | --- | --- | | Chrome | 50 | | Internet Explorer | 17.5 | If you have more than one numerical field, the panel shows grouped bars. ### Visualizing time series or multiple result sets If you have multiple time series or tables, you first need to join them using a join, or reduce transform. For example, if you have multiple time series and you want to compare their last and max value, add the **Reduce** transform and specify **Max** and **Last **as options under **Calculations**. ## Bar chart options Use these options to refine your visualization. **Orientation** + **Auto ** – Grafana decides the bar orientation based on the panel dimensions. + **Horizontal** – Makes the X axis the category axis. + **Vertical** – Makes the Y axis the category axis. **Rotate x-axis tick labels** When the graph is vertically oriented, this setting rotates the labels under the bars. This setting is useful when bar chart labels are long and overlap. **X-axis tick label maximum length** Sets the maximum length of bar chart labels. Labels longer than the maximum length are truncated with ellipses. **Bar labels minimum spacing** Sets the minimum spacing between bar labels. **Show values** Controls whether values are shown on top of or to the left of bars. + **Auto** – Values are shown if there is space. + **Always** – Always show values. + **Never** – Never show values. **Stacking** Controls bar chart stacking. + **Off** – Bars will not be stacked. + **Normal** – Bars will be stacked on top of each other. + **Percent** – Bars will be stacked on top of each other, and the height of each bar is the percentage of the total height of the stack. **Group width** Controls the width of groups. + `0 = Minimum width` + `1 = Maximum width` **Bar width** Controls the width of bars. + `0 = Minimum width` + `1 = Maximum width` **Bar radius** Controls the radius of the bars. + `0 = Minimum radius` + `0.5 = Maximum radius` **Highlight full area on hover** Controls if the entire surrounding area of the bar is highlighted when you hover over the bar. **Line width** Controls line width of the bars. **Fill opacity** Controls the fill opacity of the bars. **Gradient mode** Sets the mode of the gradient fill. Fill gradient is based on the line color. To change the color, use the standard color scheme field option. Gradient appearance is influenced by the **Fill opacity** setting. + **None** – no gradient fill. This is the default setting. + **Opacity** – Transparency of the gradient is calculated based on the values on the y-axis. Opacity of the fill is increasing with the values on the Y-axis. + **Hue** – Gradient color is generated based on the hue of the line color. **Tooltip mode** When you hover your cursor over the visualization, Grafana can display tooltips. Choose how tooltips behave. + **Single ** – The hover tooltip shows only a single series, the one that you are hovering over on the visualization. + **All** – The hover tooltip shows all series in the visualization. Grafana highlights the series that you are hovering over in bold in the series list in the tooltip. + **Hidden** – Do not display the tooltip when you interact with the visualization. **Note** You can use an override to hide individual series from the tooltip. **Text size** Enter a value to change the size of the text on your bar chart. ## Legend options **Legend mode** Use these settings to define how the legend appears in your visualization. For more information, see [Configure a legend](v12-panels-configure-legend.md). + **List** – Displays the legend as a list. This is a default display mode of the legend. + **Table** – Displays the legend as a table. + **Hidden** – Hides the legend. **Legend placement** Choose where to place the legend. + **Bottom** – Below the graph. + **Right** – To the right of the graph. **Legend values** Choose series data values or standard calculations to show in the legend. You can have more than one. For more information, see [Configure a legend](v12-panels-configure-legend.md). ## Axis options Use the following field settings to refine how your axes display. Some field options will not affect the visualization until you click outside of the field option box you are editing or press Enter. **Placement** Sets the placement of the Y-axis. + **Auto** – Grafana automatically assigns Y-axis to the series. When there are two or more series with different units, then Grafana assigns the left axis to the first unit and right to the following units. + **Left** – Display all Y-axes on the left side. + **Right** – Display all Y-axes on the right side. + **Hidden** – Hide all Y-axes. To selectively hide axes, [adding field overrides](v12-panels-configure-overrides.md) that targets specific fields. **Label** Set a Y-axis text label. If you have more than one Y-axis, then you can assign different labels with an override. **Width** Set a fixed width of the axis. By default, Grafana dynamically calculates the width of an axis. By setting the width of the axis, data with different axes types can share the same display proportions. This makes it easier to compare more than one graph’s worth of data because the axes are not shifted or stretched within visual proximity of each other. **Soft min and soft max** Set a soft min or soft max option for better control of Y-axis limits. By default, Grafana sets the range for the Y-axis automatically based on the dataset. Soft min and soft max settings can prevent blips from turning into mountains when the data is mostly flat, and hard min or max derived from standard min and max field options can prevent intermittent spikes from flattening useful detail by clipping the spikes past a defined point. You can set standard min/max options to define hard limits of the Y-axis. For more information, see [Configure standard options](v12-panels-configure-standard-options.md). **Display multiple y-axes** In some cases, you may want to display multiple y-axes. For example, if you have a dataset showing both temperature and humidity over time, you may want to show two y-axes with different units for these two series. You can do this by [adding field overrides](v12-panels-configure-overrides.md). Follow the steps as many times as required to add as many y-axes as you need. # Bar gauge **** This documentation topic is designed for Grafana workspaces that support **Grafana version 12.x**. For Grafana workspaces that support Grafana version 10.x, see [Working in Grafana version 10](using-grafana-v10.md). For Grafana workspaces that support Grafana version 9.x, see [Working in Grafana version 9](using-grafana-v9.md). For Grafana workspaces that support Grafana version 8.x, see [Working in Grafana version 8](using-grafana-v8.md). Bar gauges simplify your data by reducing every field to a single value. You choose how Grafana calculates the reduction. This panel can show one or more bar gauges depending on how many series, rows, or columns your query returns. Bar gauge visualizations also support legends, improving readability when displaying multiple series. ![\[An image showing an example of a bar gauge visualization in Grafana.\]](http://docs.aws.amazon.com/grafana/latest/userguide/images/viz/bar_gauge_example.png) ## Value options Use the following options to refine how your visualization displays the value: **Show** Choose how Grafana displays your data. **Calculate** Show a calculated value based on all rows. + **Calculation** – Select a reducer function that Grafana will use to reduce many fields to a single value. For a list of available calculations, refer to [Calculation types](v12-panels-calculation-types.md). + **Fields** – Select the fields display in the panel. **All values** Show a separate stat for every row. If you select this option, then you can also limit the number of rows to display. + **Limit** – The maximum number of rows to display. Default is 5,000. + **Fields** – Select the fields display in the panel. ## Bar gauge options Adjust how the bar gauge is displayed. **Orientation** Choose a stacking direction. + **Auto** – Grafana selects what it thinks is the best orientation. + **Horizontal** – Bars stretch horizontally, left to right. + **Vertical** – Bars stretch vertically, bottom to top. **Display mode** Choose a display mode. + **Gradient** – Threshold levels define a gradient. + **Retro LCD** – The gauge is split into small cells that are lit or unlit. + **Basic** – Single color based on the matching threshold. **Value display** Choose a value display mode. + **Value color** – Value color is determined by value. + **Text color** – Value color is the default text color. + **Hidden** – Values are hidden. **Name placement** Choose a name placement mode. **Note** This option only applies when the orientation of the bar gauge is horizontal. When the bar gauge is in the vertical orientation, names are always placed at the bottom of each bar gauge. + **Auto** – Grafana determines the best placement. + **Top** – Names are placed on the top of each bar gauge. + **Left** – Names are placed to the left of each bar gauge. **Show unfilled area** Select this if you want to render the unfilled region of the bars as dark gray. Not applicable to Retro LCD display mode. **Bar size** Choose a bar size mode. + **Auto** – Grafana determines the best bar gauge size. + **Manual** – Manually configure the bar gauge size. **Min width** Limit the minimum width of the bar column when the gauge is oriented vertically. Automatically show x-axis scrollbar when there is a large amount of data. **Note** This option only applies when bar size is set to manual. **Min height** Limit the minimum height of the bar row when the gauge is oriented horizontally. Automatically show y-axis scrollbar when there is a large amount of data. **Note** This option only applies when bar size is set to manual. **Max height** Limit the maximum height of the bar row when the gauge is oriented horizontally. Automatically show y-axis scrollbar when there is a large amount of data. **Note** This option only applies when bar size is set to manual. # Candlestick **** This documentation topic is designed for Grafana workspaces that support **Grafana version 12.x**. For Grafana workspaces that support Grafana version 10.x, see [Working in Grafana version 10](using-grafana-v10.md). For Grafana workspaces that support Grafana version 9.x, see [Working in Grafana version 9](using-grafana-v9.md). For Grafana workspaces that support Grafana version 8.x, see [Working in Grafana version 8](using-grafana-v8.md). The Candlestick visualization allows you to visualize data that includes a number of consistent dimensions focused on price movement. The Candlestick panel includes an Open-High-Low-Close (OHLC) mode, as well as support for additional dimensions based on time series data. ![\[An image showing an example of a candlestick visualization in Grafana.\]](http://docs.aws.amazon.com/grafana/latest/userguide/images/viz/candlestick-panel-example.png) Candlestick visualizations build upon the foundation of the [Time series](v12-panels-time-series.md) and includes many common configuration settings. ## Mode The mode options allow you to toggle which dimensions are used for the visualization. + **Candles** – Limit the panel dimensions to the open, high, low, and close dimensions used by candlestick visualizations. + **Volume** – Limit the panel dimension to the volume dimension. + **Both** – The default behavior for the candlestick panel. It includes both candlestick and volume visualizations. ## Candle style + **Candles** – The default display style, creates candle-style visualizations between the open and close dimensions. + **OHLC Bars** – Display the four core dimensions open, high, low, and close values. ## Color strategy + **Since Open** – The default behavior. This mode will utilize the *Up* color (below) if the intra-period price movement is positive. In other words, if the value on close is greater or equal to the value on open, the *Up* color is used. + **Since Prior Close** – An alternative display method where the color of the candle is based on the inter-period price movement or change in value. In other words, if the value on open is greater than the previous value on close, the *Up* color is used. If the value on open is lower than the previous value on close, the *Down* color is used. *This option also triggers the hollow candlestick visualization mode*. Hollow candlesticks indicate that the intra-period movement is positive (value is higher on close than on open), filled candlesticks indicate the intra-period change is negative (value is lower on close than on open). To learn more, see the [explanation of the differences](https://thetradingbible.com/how-to-read-hollow-candlesticks). ## Up & down colors The **Up color** and **Down color** options select which colors are used when the price movement is up or down. The *Color strategy* above will determine if intra-period or inter-period price movement is used to select the candle or OHLC bar color. ## Open, high, low, close The candlestick panel will attempt to map fields to the appropriate dimension. + **Open** corresponds to the starting value of the given period. + **High** corresponds to the highest value of the given period. + **Low** corresponds to the lowest value of the given period. + **Close** corresponds to the final (end) value of the given period. + **Volume** corresponds to the sample count in the given period. (e.g. number of trades) **Note** The candlestick legend doesn't display these values. To properly map these dimensions, the query results table from your data must include *at least* the following columns. + `timestamp` + `open` + `high` + `low` + `close` If your data can't be mapped to these dimensions for some reason (for example, because the column names aren't the same), you can map them manually using the **Open**, **High**, **Low**, and **Close** fields under the **Candlestick** options in the panel editor. ## Additional fields **Additional fields** The candlestick panel is based on the time series visualization. It can visualize additional data dimensions beyond open, high, low, close, and volume. The **Include** and **Ignore** options allow it to visualize other included data such as simple moving averages, Bollinger bands and more, using the same styles and configurations available in the [Time series](v12-panels-time-series.md). # Canvas **** This documentation topic is designed for Grafana workspaces that support **Grafana version 12.x**. For Grafana workspaces that support Grafana version 10.x, see [Working in Grafana version 10](using-grafana-v10.md). For Grafana workspaces that support Grafana version 9.x, see [Working in Grafana version 9](using-grafana-v9.md). For Grafana workspaces that support Grafana version 8.x, see [Working in Grafana version 8](using-grafana-v8.md). Canvases combine the power of Grafana with the flexibility of custom elements. Canvases are extensible form-built panels that allow you to explicitly place elements within static and dynamic layouts. This empowers you to design custom visualizations and overlay data in ways that aren’t possible with standard Grafana panels, all within Grafana’s UI. If you’ve used popular UI and web design tools, then designing Canvas panels will feel very familiar. Canvas panels support one-click data links and actions, dynamic connection directions, the ability to disable tooltips, and pan and zoom controls. ## Elements You can add these elements on your canvas. Adding multiple, and different kinds, of elements lets you customize a visualization in ways that are not possible with any other visualization. **Metric value** The metric value element lets you easily select the data you want to display on canvas. This element has a unique *edit* mode that can be triggered either through the context menu **Edit** option or by double-clicking panel. When in edit mode you can select which field data that you want to display. **Text** The text element lets you easily add text to the canvas. The element also supports an editing mode, triggered via either double-clicking or the edit menu option in the context menu. **Ellipse** The ellipse element lets you add a basic ellipse to the canvas. An ellipse element can display text (both fixed and field data) and its background color can be changed based on data thresholds. **Rectangle** The rectangle element lets you to add a basic rectangle to the canvas. A rectangle elements can display text (both fixed and field data) and its background color can be changed based on data thresholds. **Icon** The icon element lets you add a supported icon to the canvas. Icons can have their color set based on thresholds or value mappings. **Server** The server element lets you easily represent a single server, a stack of servers, a database, or a terminal. Server elements support status color, bulb color, and a bulb blink rate, all configurable by fixed or field values. **Button** The button element lets you add a basic button to the canvas. Button elements support triggering basic, unauthenticated API calls. API settings are found in the button element editor. You can also pass template variables in the API editor. **Note** Choosing a button will only trigger an API call when inline editing is disabled. See [Canvas editing](#v12-panels-canvas-editing). ## Connections When building a canvas, you can connect elements together to create more complex visualizations. You can create connections by dragging from the connection anchor of one element to the connection anchor of another element. You can also create connections to the background of the canvas. Connection anchors are displayed when you hover over an element and inline editing is turned on. To remove a connection, select the connection and then press `Delete` or `Backspace`. You can set both the size and color of connections based on fixed or field values. To do so, enter into panel edit mode, select the connection, and modify the connection’s properties in the panel editor. ## Canvas editing **Inline editor** You can edit your canvas inline while in the context of dashboard mode. **Pan and zoom** You and turn on panning and zooming in a canvas. This allows you to both create and navigate more complex designs. **Note** Pan and zoom is currently in preview by Grafana Labs. Support is limited, and breaking changes might occur before general availability. **Context menu** The context menu lets you perform common tasks quickly and efficiently. Supported functionality includes opening and closing the inline editor, duplicating an element, deleting an element, and more. The context menu is triggered by a right click action (or equivalent) over the panel or a given canvas element. When right clicking *the panel*, you are able to set a background image and easily add elements to the canvas. When right clicking *an element*, you are able to edit, delete, and duplicate the element, or modify the element’s layer positioning. ## Canvas Options **Inline editing** The inline editing toggle lets you lock or unlock the canvas panel. When turned off, the canvas panel becomes *locked*, freezing elements in place and preventing unintended modifications. **Data links** Canvases support [data links](v12-panels-configure-data-links.md). You can create a data link for a metric-value element and display it for all elements that use the field name by following these steps. **To create a data link for an element** 1. Set an element to be tied to a field value. 1. Turn off the inline editing toggle. 1. Create an override for **Fields with name** and select the element field name from the list. 1. Choose the **\$1 Add override property** button. 1. Select **Datalinks > Datalinks** from the list. 1. Choose **\$1 Add link**, add a title and URL for the data link. 1. Hover over the element to display the data link tooltip. 1. Choose the element to be able to open the data link. If multiple elements use the same field name, and you want to control which elements display the data link, you can create a unique field name using the [Add field from calculation](v12-panels-xform-functions.md#v12-panels-xform-funcs-add) transform. The alias you create in the transform will appear as a field you can use with an element. # Dashboard list **** This documentation topic is designed for Grafana workspaces that support **Grafana version 12.x**. For Grafana workspaces that support Grafana version 10.x, see [Working in Grafana version 10](using-grafana-v10.md). For Grafana workspaces that support Grafana version 9.x, see [Working in Grafana version 9](using-grafana-v9.md). For Grafana workspaces that support Grafana version 8.x, see [Working in Grafana version 8](using-grafana-v8.md). Dashboard lists allow you to display dynamic links to other dashboards. The list can be configured to use starred dashboards, recently viewed dashboards, a search query, and dashboard tags. On each dashboard load, this panel queries the dashboard list, always providing the most up-to-date results. **Options** Use these options to refine your visualization. + **Include current time range** – Select this option to propagate the time range of the current dashboard to the dashboard links. When the user selects a link, the linked dashboard opens with the indicated time range already set. + **Include current template variable values** – Select this option to include template variables currently used as query parameters in a link. When the user selects a link, any matching templates in the linked dashboard are set to the values from the list. For more information, see [Dashboard URL variables](v12-dash-dashboard-url-variables.md). + **Starred** – Display starred dashboards in alphabetical order. + **Recently viewed** – Display recently viewed dashboards in alphabetical order. + **Search** – Display dashboards by search query or tags. You must enter at least one value in **Query** or **Tags**. For the **Query** and **Tags** fields, variable interpolation is supported, for example, `$my_var` or `${my_var}`. + **Show headings** – The chosen list selection (Starred, Recently viewed, Search) is shown as a heading. + **Max items** – Sets the maximum number of items to list per section. For example, if you left this at the default value of 10 and displayed Starred and Recently viewed dashboards, then the panel would display up to 20 total dashboards, ten in each section. **Search** These options only apply if the **Search** option is selected. + **Query** – Enter the query you want to search by. Queries are case-insensitive, and partial values are accepted. + **Folder** – Select the dashboard folders that you want to display. + **Tags** – Here is where you enter the tags you want to search by. Existing tags will not appear as you type, and they *are* case sensitive. **Note** When multiple tags and strings appear, the dashboard list displays those matching *all* conditions. # Datagrid **** This documentation topic is designed for Grafana workspaces that support **Grafana version 12.x**. For Grafana workspaces that support Grafana version 10.x, see [Working in Grafana version 10](using-grafana-v10.md). For Grafana workspaces that support Grafana version 9.x, see [Working in Grafana version 9](using-grafana-v9.md). For Grafana workspaces that support Grafana version 8.x, see [Working in Grafana version 8](using-grafana-v8.md). **Note** The data grid visualization is currently in preview by Grafana Labs. Support is limited, and breaking changes might occur before general availability. Datagrids offer you the ability to create, edit, and fine-tune data within Grafana. As such, this panel can act as a data source for other panels inside a dashboard. ![\[An image showing an example of a datagrid visualization in Grafana.\]](http://docs.aws.amazon.com/grafana/latest/userguide/images/viz/datagrid-panel-example.png) Through it, you can manipulate data queried from any data source, you can start from a blank slate, or you can pull data from a dragged and dropped file. You can then use the panel as a simple tabular visualization, or you can modify the data—and even remove it altogether—to create a blank slate. Editing the dataset changes the data source to use the built-in **Grafana** data source, replacing the old data source settings and related queries, while also copying the current dataset into the dashboard model. You can then use the panel as a data source for other panels, by using the built-in **Dashboard** data source to pull the datagrid data. This provides an interactive dashboard experience, where you can modify the data and see the changes reflected in other panels. For more information about the **Grafana** and **Dashboard** data sources, see [Special data sources](AMG-data-sources.md#AMG-data-sources-special). ## Context menu To provide a more streamlined experience, the datagrid has a context menu that can be accessed by right-clicking on a cell, column header, or row selector. Depending on the state of your datagrid, the context menu offers different options including the following. + Delete or clear all rows and columns. + Remove all existing data (rendering your datagrid blank). + Trigger search functionality, which allows you to find keywords within the dataset. Deleting a row or column will remove the data from the datagrid, while clearing a row or column will only remove the data from the cells, leaving the row or column intact. **Header menu** You can also access a header menu by choosing the dropdown icon next to the header title. From here, you can not only delete or clear a column, but also rename it, freeze it, or convert the field type of the column. ## Selecting series If there are multiple series, you can set the datagrid to display the preferred dataset using the **Select series** dropdown in the panel options. ## Using datagrids Datagrids offer various ways of interacting with your data. You can edit, move, clear, and remove rows and columns; use the built-in search functionality to find specific data; and convert field types or freeze horizontal scroll on a specific column. **Adding data** You can add data to a datagrid by creating a new column or row. **To add a new column** 1. In an existing panel, choose the **\$1** button in the table header after the last column. 1. Add a name for the new column. 1. Select anywhere outside the field or press `Enter` to save the column. Now you can add data in each cell. To add a new row, choose a **\$1** button after the last row. The button is present in each cell after the last row, and choosing it triggers the creation of a new row while also activating the cell that you chose. **Editing data** You can move columns and rows as needed. **To move a column** 1. Press and hold the header of the column that needs to be moved. 1. Drag the column to the desired location. 1. Release the column to finalize the move. To move a row, select and hold the row selector from the number column situated on the far left side of the grid, and drag it to the desired location. Release the row to finalize the move. **Selecting multiple cells** You can select multiple cells by choosing a single cell, and dragging across others. This select can be used to copy the data from the selected cells or to delete them using the `Delete` key. **Deleting or clearing multiple rows or columns** To delete or clear multiple rows, you can do the following. **To delete or clear multiple rows or columns** 1. Hover over the number column (to the left of the first column in the grid) to display row checkbox. 1. Select the checkboxes for the rows you want to work with. To select multiple consecutive rows, press and hold the `Shift` key while clicking the first and last row. To select non-consecutive rows, press and hold the `Ctrl` (or `Cmd`) key while clicking the desired rows. 1. Right-click (or equiavalent) to access the context menu. 1. Select **Delete rows** or **Clear rows**. The same rules apply to columns by clicking the column headers. To delete all rows, use the **Select all** checkbox at the top left corner of the datagrid. This select all rows and allows you to delete them using the context menu. # Flame graph **** This documentation topic is designed for Grafana workspaces that support **Grafana version 12.x**. For Grafana workspaces that support Grafana version 10.x, see [Working in Grafana version 10](using-grafana-v10.md). For Grafana workspaces that support Grafana version 9.x, see [Working in Grafana version 9](using-grafana-v9.md). For Grafana workspaces that support Grafana version 8.x, see [Working in Grafana version 8](using-grafana-v8.md). Flame graphs let you visualize profiling data. Using this visualization, the profile can be represented as a flame graph, table, or both. ![\[An image showing an example of a flame graph visualization in Grafana.\]](http://docs.aws.amazon.com/grafana/latest/userguide/images/viz/flamegraph-panel-example.png) ## Flame graph mode A flame graph takes advantage of the hierarchical nature of profiling data. It condenses data into a format that allows you to easily see which code paths are consuming the most system resources, such as CPU time, allocated objects, or space when measuring memory. Each block in the flame graph represents a function call in a stack and its width represents its value. Grayed-out sections are a set of functions that represent a relatively small value and they are collapsed together into one section for performance reasons. You can hover over a specific function to view a tooltip that shows you additional data about that function, like the function's value, percentage of total value, and the number of samples with that function. **Drop-down actions** You can click a function to show a drop-down menu with additional actions: + **Focus block** – When you choose **Focus block**, the block, or function, is set to 100% of the flame graph’s width and all its child functions are shown with their widths updated relative to the width of the parent function. This makes it easier to drill down into smaller parts ofthe flame graph. + **Copy function name** – When you choose **Copy function name**, the full name of the function that the block represents is copied. + **Sandwich view** – The sandwich view allows you to show the context of the clicked function. It shows all the function’s callers on the top and all the callees at the bottom. This shows the aggregated context of the function so if the function exists in multiple places in the flame graph, all the contexts are shown and aggregated in the sandwich view. **Status bar** The status bar shows metadata about the flame graph and currently applied modifications, like what part of the graph is in focus or what function is shown in sandwich view. Click the **X** in the status bar pill to remove that modification. ## Toolbar **Search** You can use the search field to find functions with a particular name. All the functions in the flame graph that match the search will remain colored while the rest of the functions are grayed-out. **Color schema picker** You can switch between coloring functions by their value or by their package name to visually tie functions from the same package together. **Text align** Align text either to the left or to the right to show more important parts of the function name when it does not fit into the block. **Visualization picker** You can choose to show only the flame graph, only table, or both at the same time. ## Top table mode The top table shows the functions from the profile in table format. The table has three columns: symbols, self, and total. The table is sorted by self time by default, but can be reordered by total time or symbol name by clicking the column headers. Each row represents aggregated values for the given function if the function appears in multiple places in the profile. There are also action buttons on the left for each row. The first button searches for the function name while second button shows the sandwich view of the function. ## Data API In order to render the flame graph, you must format the data frame data using a [nested set model](https://wikipedia.org/wiki/Nested_set_model). A nested set model ensures each item of the flame graph is encoded just by its nesting level as an integer value, its metadata, and by its order in the data frame. This means that the order of items is significant and needs to be correct. The ordering is a depth-first traversal of the items in the flame graph which recreates the graph without needing variable-length values in the data frame like in a children’s array. Required fields: | Field name | Type | Description | | --- | --- | --- | | level | number | The nesting level of the item. In other words how many items are between this item and the top item of the flame graph. | | value | number | The absolute or cumulative value of the item. This translates to the width of the item in the graph. | | label | string | Label to be shown for the particular item. | | self | number | Self value which is usually the cumulative value of the item minus the sum of cumulative values of its immediate children. | # Gauge **** This documentation topic is designed for Grafana workspaces that support **Grafana version 12.x**. For Grafana workspaces that support Grafana version 10.x, see [Working in Grafana version 10](using-grafana-v10.md). For Grafana workspaces that support Grafana version 9.x, see [Working in Grafana version 9](using-grafana-v9.md). For Grafana workspaces that support Grafana version 8.x, see [Working in Grafana version 8](using-grafana-v8.md). Gauges are single-value visualizations that can repeat a gauge for every series, column or row. ![\[An image showing an example of a gauge visualization in Grafana.\]](http://docs.aws.amazon.com/grafana/latest/userguide/images/viz/gauge_example.png) ## Value options Use the following options to refine how your visualization displays the value: **Show** Choose how Grafana displays your data. *Calculate* Show a calculated value based on all rows. + **Calculation** – Select a reducer function that Grafana will use to reduce many fields to a single value. For a list of available calculations, refer to [Calculation types](v12-panels-calculation-types.md). + **Fields** – Select the fields to display in the panel. *All values* Show a separate stat for every row. If you select this option, then you can also limit the number of rows to display. + **Limit** – The maximum number of rows to display. Default is 5,000. + **Fields** – Select the fields to display in the panel. ## Gauge Adjust how the gauge is displayed. **Orientation** Choose a stacking direction. + **Auto** – Gauges display in rows and columns. + **Horizontal** – Gauges display top to bottom. + **Vertical** – Gauges display left to right. **Show threshold labels** Controls if threshold values are shown. **Show threshold markers** Controls if a threshold band is shown outside the inner gauge value band. **Gauge size** Choose a guage size mode + **Auto** – Grafana determines the best gauge size. + **Manual** – Manually configure the gauge size. **Min width** Set the minimum width of vertically-oriented gauges. If you set a minimum width, the x-axis scrollbar is automatically displayed when there is a large amount of data. **Note** This option only applies when gauge size is set to manual. **Min height** Se the minimum height of horizontally-oriented gauges. If you set a minimum height, the y-axis scrollbar is automatically displayed when there is a large amount of data. **Note** This option only applies when gauge size is set to manual. **Neutral** Set the starting value from which every gauge will be filled. ## Text size Adjust the sizes of the gauge text. + **Title** – Enter a numeric value for the gauge title size. + **Value** – Enter a numeric value for the gauge value size. # Geomap **** This documentation topic is designed for Grafana workspaces that support **Grafana version 12.x**. For Grafana workspaces that support Grafana version 10.x, see [Working in Grafana version 10](using-grafana-v10.md). For Grafana workspaces that support Grafana version 9.x, see [Working in Grafana version 9](using-grafana-v9.md). For Grafana workspaces that support Grafana version 8.x, see [Working in Grafana version 8](using-grafana-v8.md). Geomaps allow you to view and customize the world map using geospatial data. You can configure various overlay styles and map view settings to easily focus on the important location-based characteristics of the data. Geomap visualizations support keyboard navigation for improved accessibility. **Note** You can add your own geospatial data on top of basemap layers provides by AWS. The basemap layers must all come from [https://tiles.maps.search-services.aws.a2z.com](https://tiles.maps.search-services.aws.a2z.com). ![\[An image showing an example of a geomap visualization in Grafana.\]](http://docs.aws.amazon.com/grafana/latest/userguide/images/viz/geomap-panel-example.png) ## Map View The map view controls the initial view of the map when the dashboard loads. **Initial View** The initial view configures how the GeoMap panel renders when the panel is first loaded. + **View** sets the center for the map when the panel first loads. + **Fit to data** fits the map view based on the data extents of Map layers and updates when data changes. + **Data** option allows selection of extent based on data from *All layers*, a single *Layer*, or the *Last value* from a selected layer. + **Layer** can be selected if fitting data from a single *Layer* or the *Last value* of a layer. + **Padding** sets padding in relative percent beyond data extent (not available when looking at *Last value* only). + **Max Zoom** sets the maximum zoom level when fitting data. + **Coordinates** sets the map view based on: + **Latitude** + **Longitude** + Default views are also available including: + **(0°, 0°)** + **North America** + **South America** + **Europe** + **Africa** + **West Asia** + **South Asia** + **South-East Asia** + **East Asia** + **Australia** + **Oceania** + **Zoom** sets the initial zoom level. ## Map layers Geomaps support showing multiple layers. Each layer determines how you visualize geospatial data on top of the base map. **Types** There are three map layer types to choose from in the Geomap visualization. + [Markers layer](#v12-panels-geomap-markers) renders a marker at each data point. + [Heatmap layer](#v12-panels-geomap-heatmap) visualizes a heatmap of the data. + [GeoJSON layer](#v12-panels-geomap-geojson) renders static data from a GeoJSON file. + [Night / Day layer (Alpha)](#v12-panels-geomap-nightday) renders a night or day region. + [Route layer (preview)](#v12-panels-geomap-route) render data points as a route. + [Photos layer (preview)](#v12-panels-geomap-photos) renders a photo at each data point. + [Network layer (preview)](#v12-panels-geomap-network) visualizes a network graph from the data. There are also two experimental (or alpha) layer types. + **Icon at last point (alpha)** renders an icon at the last data point. + **Dynamic GeoJSON (alpha)** styles a GeoJSON file based on query results. **Note** Layers marked *preview* or *alpha* in public preview. Grafana Labs offers limited support, and breaking changes might occur prior to the feature being made generally available. **Layer Controls** The layer controls allow you to create layers, change their name, reorder and delete layers. + **Add layer** creates an additional, configurable data layer for the geomap. When you add a layer, you are prompted to select a layer type. You can change the layer type at any point during panel configuration. + The layer controls allow you to rename, delete, and reorder the layers of the panel. + **Edit layer name** (pencil icon) renames the layer. + **Trash Bin** deletes the layer. + **Reorder** (six dots/grab handle) allows you to change the layer order. Data on higher layers will appear above data on lower layers. The visualization will update the layer order as you drag and drop to help simplify choosing a layer order. You can add multiple layers of data to a single geomap panel in order to create rich, detailed visualizations. **Location** Geomaps needs a source of geographical data. This data comes from a database query, and there are four mapping options for your data. + **Auto** automatically searches for location data. Use this option when your query is based on one of the following names for data fields. + *geohash*: `geohash` + *latitude*: `latitude`, `lat` + *longitude*: `longitude`, `lng`, `lon` + *lookup*: `lookup` + **Coords** specifies that your query holds coordinate data. You will getprompted to select numeric data fields for latitude and longitude from your database query. + **Geohash** specifies that your query holds geohash data. You will be prompted to select a string data field for the geohash from your database query. + **Lookup** specifies that your query holds location name data that needs to be mapped to a value. You will be prompted to select the lookup field from your database query and a gazetteer. The gazetteer is the directory that is used to map your queried data to a geographical point. ## Markers layer The markers layer allows you to display data points as different marker shapes such as circles, squares, triangles, stars, and more. Markers have many customization options. + **Size** configures the size of the markers. The default is `Fixed size`, which makes all marker sizes the same regardless of the data; however, there is also an option to size the markers based on the data corresponding to selected field. `Min` and `Max` marker size has to be set such that the Marker layer can scale within this range. + **Symbol** allows you to choose the symbol, icon, or graphic to aid in providing additional visual context to your data. Choose from assets that are included with Grafana such as simple symbols or the Unicon library. You can also specify a URL containing an image asset. The image must be a scalable vector graphic (SVG). + **Symbol Vertical Align** configures the vertical alignment of the symbol relative to the data point. Note that the symbol's rotation angle is applies first around the data point, then the vertical alignment is applied relative to the rotation of the symbol. + **Symbol Horizontal Align** configures the horizontal alignment of the symbol relative to the data point. Note that the symbol's rotation angle is applies first around the data point, then the horizontal alignment is applied relative to the rotation of the symbol. + **Color** configures the color of the markers. The default `Fixed color` sets all markers to a specific color. There is also an option to have conditional colors depending on the selected field data point values and the color scheme set at the **Standard options** section. + **Fill opacity** configures the transparency of each marker. + **Rotation angle** configures the rotation angle of each marker. The default is **Fixed value**, which makes all markers rotate to the same angle regardless of the data; however, there is also an option to set the rotation of the markers based on data corresponding to a selected field. + **Text label** configures a text label for each marker. + **Show legend** lets you toggle the legend for the layers. + **Display tooltip** lets you toggle tooltips for the layer. ## Heatmap layer The heatmap layer clusters various data points to visualize locations with different densities. ![\[An image showing an example of heatmap using the geomap visualization in Grafana.\]](http://docs.aws.amazon.com/grafana/latest/userguide/images/viz/geomap-heatmap-example.png) To add a heatmap layer: Choose on the dropdown menu under Data Layer and select `Heatmap`. Similar to `Markers`, you are prompted with options to determine which data points to visualize and how you want to visualize them. + **Weight values** configure the intensity of the heatmap clusters. **Fixed value** keeps a constant weight value throughout all data points. This value should be in the range of 0-1. Similar to Markers, there is an alternate option in the dropdown to automatically scale the weight values depending on data values. + **Radius** configures the size of the heatmap clusters. + **Blur** configures the amount of blur on each cluster. + **Opacity** configures the opacity of each cluster. + **Display tooltip** lets you toggle tooltips for the layer. ## GeoJSON layer The GeoJSON layer allows you to select and load a static GeoJSON file from the filesystem. + **GeoJSON URL** provides a choice of GeoJSON files that ship with Grafana. + **Default Style** controls which styles to apply when no rules above match. + **Color** configures the color of the default style + **Opacity** configures the default opacity + **Style Rules** apply styles based on feature properties + **Rule** allows you to select a *feature*, *condition*, and *value* from the GeoJSON file in order to define a rule. The trash bin icon can be used to delete the current rule. + **Color** configures the color of the style for the current rule + **Opacity** configures the transparency level for the current rule. + **Add style rule** creates additional style rules. + **Display tooltip** lets you toggle tooltips for the layer. ## Night / Day layer (Alpha) The Night / Day layer displays night and day regions based on the current time range. ![\[An image showing an example of a night / day layer using the geomap visualization in Grafana.\]](http://docs.aws.amazon.com/grafana/latest/userguide/images/viz/geomap-day-night-example.png) **Options** + **Show** toggles the time source from panel time range. + **Night region color** picks the color for the night region. + **Display sun** toggles sun icon. + **Opacity** from 0 (transparent) to 1 (opaque). + **Display tooltip** lets you toggle tooltips for the layer. **Note** For more information, see [Extensions for OpenLayers - DayNight](https://viglino.github.io/ol-ext/examples/layer/map.daynight.html). ## Route layer (preview) The Route layer renders data points as a route. **Note** The Route layer is currently in public preview. Grafana Labs offers limited support, and breaking changes might occur prior to the feature being made generally available. ![\[An image showing an example of a route layer using the geomap visualization in Grafana.\]](http://docs.aws.amazon.com/grafana/latest/userguide/images/viz/geomap-route-layer-example.png) **Options** + **Size** sets the route thickness. Fixed value by default. When field data is selected, you can set the Min and Max range in which field data can scale. + **Color** sets the route color. Set to fixed color by default, you can also tie the color to field data. + **Fill opacity** configures the opacity of the route. + **Text label** configures a text label for each route. + **Arrow** configures the arrow styling to display along the route, in order of data. + **None** + **Forward** + **Reverse** + **Display tooltip** lets you toggle tooltips for the layer. **Note** For more information, see [Extensions for OpenLayers - Flow Line Style](http://viglino.github.io/ol-ext/examples/style/map.style.gpxline.html). ## Photos layer (preview) The Photos layer renders a photo at each data point. **Note** The Photos layer is currently in public preview. Grafana Labs offers limited support, and breaking changes might occur prior to the feature being made generally available. **Options** + **Image Source Field** lets you select a string field containing image data as a Base64 encoded image binary (`data:image/png;base64,...`). + **Kind** sets the frame style around the images. Choose from: + **Square** + **Circle** + **Anchored** + **Folio** + **Crop** toggles whether the images are cropped to fit. + **Shadow** toggles a box shadow behind the images. + **Border** sets the border size around images. + **Border color** sets the border color around images. + **Radius** sets the overall size of images in pixels. + **Display tooltip** lets you toggle tooltips for the layer. **Note** For more information, see [Extensions for OpenLayers - Image Photo Style](http://viglino.github.io/ol-ext/examples/style/map.style.photo.html). ## Network layer (preview) The Network layer renders a network graph. This layers supports the same data format supported by the node graph visualization, with the addition of geospatial data included in the nodes data. The geospatial data is used to locate and render the nodes on the map. **Note** The Network layer is currently in public preview. Grafana Labs offers limited support, and breaking changes might occur prior to the feature being made generally available. ![\[An image showing examples of network visualizations within a geomap in Grafana.\]](http://docs.aws.amazon.com/grafana/latest/userguide/images/viz/geomap-network-layer-example.png) **Note** The Network layer is currently in public preview. Grafana Labs offers limited support, and breaking changes might occur prior to the feature being made generally available. **Options** + **Arrow** sets the arrow direction to display for each edge, with forward meaning source to target. Choose from: + **None** + **Forward** + **Reverse** + **Both** + **Show legend** lets you toggle the legend for the layer. The legend only supports node data. + **Display tooltip** lets you toggle tooltips for the layer. **Node styles** + **Size** configures the size of the nodes. The default is **Fixed size**, which makes all node sizes the same regardless of the data; however, there is also an option to size the nodes based on data corresponding to a selected field. **Min** and **Max** node sizes have to be set such that the nodes can scale within this range. + **Color** configures the color of the nodes. The default is **Fixed color**, which sets all nodes to a specific color. There is also an option to have conditional colors depending on the selected field data point values and the color scheme set in the **Standard options** section. + **Symbol** lets you choose the symbol, icon, or graphic to aid in providing additional visual context to your data. Choose from assets that are included with Grafana, such as simple symbols or the Unicon library. You can also specify a URL containing an image asset. The image must be a scalable vector graphic (SVG). + **Fill opacity** configures the transparency of each node. + **Rotation angle** configures the rotation angle of each node. The default is **Fixed value**, which makes all nodes rotate to the same angle regardless of the data; however, there is also an option to set the rotation of the nodes based on data corresponding to a selected field. + **Text label** configures a text label for each node. **Edge styles** + **Size** configures the line width of the edges. The default is **Fixed size**, which makes all edge line widths the same regardless of the data; however, there is also an option to size the edges based on data corresponding to a selected field. **Min** and **Max** edge sizes have to be set such that the edges can scale within this range. + **Color** configures the color of the edges. The default is **Fixed color**, which sets all edges to a specific color. There is also an option to have conditional colors depending on the selected field data point values and the color scheme set in the **Standard options** section. + **Fill opacity** configures the transparency of each edge. + **Text label** configures a text label for each edge. ## CARTO layer CARTO layers are not supported in Amazon Managed Grafana. ## XYZ tile layer XYZ tile layers are not supported in Amazon Managed Grafana. ## Open Street Map layer Open Street Map layers (other than the default basedmap) are not supported in Amazon Managed Grafana. ## ArcGIS layer ArcGIS layers are not supported in Amazon Managed Grafana. ## Map Controls The map controls section contains various options for map information and tool overlays. **Zoom** Options for zoom controls. *Show zoom control* Displays zoom controls in the upper left corner. *Mouse wheel zoom* Turns on or off using the mouse wheel for zooming in or out. **Show attribution** Displays attribution for basemap layers on the map. **Show scale** Displays scale information in the bottom left corner. **Note** Displays units in [m]/[km]. **Show measure tools** Displays measure tools in the upper right corner. Measurements appear only when this control is open. + **Click** to start measuring + **Continue clicking** to continue measurement + **Double-click** to end measurement **Note** When you change measurement type or units, the previous measurement is removed from the map. If the control is closed and then re-opened, the most recent measurement is displayed. A measurement can be modified by clicking and dragging on it. *Length* Get the spherical length of a geometry. This length is the sum of the great circle distances between coordinates. For multi-part geometries, the length is the sum of the length of each part. Geometries are assumed to be in ‘EPSG:3857’. You can choose the following units for length measurements: + **Metric (m/km)** + **Feet (ft)** + **Miles (mi)** + **Nautical miles (nmi)** *Area* Get the spherical area of a geometry. This area is calculated assuming that polygon edges are segments of great circles on a sphere. Geometries are assumed to be in ‘EPSG:3857’. You can choose the following units for area measurements: + **Square Meters (m²)** + **Square Kilometers (km²)** + **Square Feet (ft²)** + **Square Miles (mi²)** + **Acres (acre)** + **Hectare (ha)** **Show debug** Displays debug information in the upper right corner of the map. This can be useful for debugging or validating a data source. + **Zoom** displays the current zoom level of the map. + **Center** displays the current **longitude**, and **latitude** of the map center. **Tooltip** + **None** displays tooltips only when a data point is clicked. + **Details** displays tooltips when a pointer hovers over a data point. # Heatmap **** This documentation topic is designed for Grafana workspaces that support **Grafana version 12.x**. For Grafana workspaces that support Grafana version 10.x, see [Working in Grafana version 10](using-grafana-v10.md). For Grafana workspaces that support Grafana version 9.x, see [Working in Grafana version 9](using-grafana-v9.md). For Grafana workspaces that support Grafana version 8.x, see [Working in Grafana version 8](using-grafana-v8.md). The Heatmap panel visualization allows you to view histograms over time. For more information about histograms, refer to [Introduction to histograms and heatmaps](getting-started-grafanaui.md#introduction-to-histograms-and-heatmaps). ![\[An image showing an example of a heatmap visualization in Grafana.\]](http://docs.aws.amazon.com/grafana/latest/userguide/images/viz/heatmap_example.jpg) ## Calculate from data This setting determines if the data is already a calculated heatmap (from the data source/transformer), or one that should be calculated in the panel. **X Bucket** This setting determines how the X-axis is split into buckets. You can specify a time interval in the **Size** input. For example, a time range of `1h` makes the cells 1-hour wide on the X-axis. **Y Bucket** This setting determines how the Y-axis is split into buckets. **Y Bucket scale** Select one of the following Y-axis value scales: + **linear** – Linear scale. + **log (base 2)** – Logarithmic scale with base 2. + **log (base 10)** – Logarithmic scale with base 10. + **symlog** – Symlog scale. ## Y Axes Defines how the Y axis is displayed **Placement** + **Left** – On the left + **Right** – On the right + **Hidden** – Hidden **Unit** Unit configuration **Decimals** This setting determines decimal configuration. **Min/Max value** This setting configures the axis range. **Reverse** When selected, the axis appears in reverse order. **Display multiple y-axes** In some cases, you may want to display multiple y-axes. For example, if you have a dataset showing both temperature and humidity over time, you may want to show two y-axes with different units for these two series. You can do this by [adding field overrides](v12-panels-configure-overrides.md). Follow the steps as many times as required to add as many y-axes as you need. ## Colors The color spectrum controls the mapping between value count (in each bucket) and the color assigned to each bucket. The leftmost color on the spectrum represents the minimum count and the color on the right most side represents the maximum count. Some color schemes are automatically inverted when using the light theme. You can also change the color mode to Opacity. In this case, the color will not change but the amount of opacity will change with the bucket count + **Mode** + **Scheme** – Bucket value represented by cell color. + **Scheme** – If the mode is **Scheme**, then select a color scheme. + **opacity** – Bucket value represented by cell opacity. Opaque cell means maximum value. + **Color** – Cell base color. + **Scale** – Scale for mapping bucket values to the opacity. + **linear** – Linear scale. Bucket value maps linearly to the opacity. + **sqrt** – Power scale. Cell opacity calculated as `value ^ k`, where `k` is a configured **Exponent** value. If exponent is less than `1`, you will get a logarithmic scale. If exponent is greater than `1`, you will get an exponential scale. In case of `1`, scale will be the same as linear. + **Exponent** – value of the exponent, greater than `0`. **Start/end color from value** By default, Grafana calculates cell colors based on minimum and maximum bucket values. With Min and Max you can overwrite those values. Consider a bucket value as a Z-axis and Min and Max as Z-Min and Z-Max, respectively. + **Start** – Minimum value using for cell color calculation. If the bucket value is less than Min, then it is mapped to the “minimum” color. The series min value is the default value. + **End** – Maximum value using for cell color calculation. If the bucket value is greater than Max, then it is mapped to the “maximum” color. The series max value is the default value. ## Cell display Use these settings to refine your visualization. ## Additional display options **Tooltip** + **Show tooltip** – Show heatmap tooltip. + **Show Histogram** – Show a Y-axis histogram on the tooltip. A histogram represents the distribution of the bucket values for a specific timestamp. + **Show color scale** – Show a color scale on the tooltip. The color scale represents the mapping between bucket value and color. **Legend** Choose whether you want to display the heatmap legend on the visualization. **Exemplars** Set the color used to show exemplar data. # Histogram **** This documentation topic is designed for Grafana workspaces that support **Grafana version 12.x**. For Grafana workspaces that support Grafana version 10.x, see [Working in Grafana version 10](using-grafana-v10.md). For Grafana workspaces that support Grafana version 9.x, see [Working in Grafana version 9](using-grafana-v9.md). For Grafana workspaces that support Grafana version 8.x, see [Working in Grafana version 8](using-grafana-v8.md). The histogram visualization calculates the distribution of values and presents them as a bar chart. The Y-axis and the height of each bar represent the count of values that fall into each bracket while the X-axis represents the value range. ![\[An image showing an example of a histogram visualization in Grafana.\]](http://docs.aws.amazon.com/grafana/latest/userguide/images/viz/histogram-example.png) ## Supported formats Histogram visualization supports time series and any table results with one or more numerical fields. ## Display options Use these options to refine your visualizations. **Bucket size** The size of the buckets. Leave this empty for automatic bucket sizing (\$110% of the full range). **Bucket offset** If the first bucket should not start at zero. A non-zero offset shifts the aggregation window. For example, 5-sized buckets that are 0–5, 5–10, 10–15 with a default 0 offset would become 2–7, 7–12, 12–17 with an offset of 2; offsets of 0, 5, or 10, in this case, would effectively do nothing. Typically, this option would be used with an explicitly defined bucket size rather than automatic. For this setting to affect, the offset amount should be greater than 0 and less than the bucket size; values outside this range will have the same effect as values within this range. **Combine series** This will merge all series and fields into a combined histogram. **Line width** Controls line width of the bars. **Fill opacity** Controls the fill opacity of the bars. **Gradient mode** Set the mode of the gradient fill. Fill gradient is based on the line color. To change the color, use the standard color scheme field option. Gradient appearance is influenced by the **Fill opacity** setting. + **None ** – No gradient fill, this is the default setting. + **Opacity** – Transparency of the gradient is calculated based on the values on the Y-axis. Opacity of the fill is increasing with the values on the Y-axis. + **Hue** – Gradient color is generated based on the hue of the line color. ## Legend options When the legend option is enabled, it can show either the value mappings or the threshold brackets. To show the value mappings in the legend, it’s important that the Color scheme option under standard options is set to Single color or Classic palette. To see the threshold brackets in the legend, set the Color scheme to From thresholds. For more information about the legend, see [Configure a legend](v12-panels-configure-legend.md). **Legend mode** Use these settings to define how the legend appears in your visualization. + **List ** – Displays the legend as a list. This is a default display mode of the legend. + **Table** – Displays the legend as a table. + **Hidden** – Hides the legend. **Legend placement** Choose where to place the legend. + **Bottom ** – Below the graph. + **Right** – To the right of the graph. **Legend Values** Choose which of the standard calculations to show in the legend. You can have more than one. For more information, see [Calculation types](v12-panels-calculation-types.md). **Legend calculations** Choose which calculations to show in the legend. You can select more than one. # Logs **** This documentation topic is designed for Grafana workspaces that support **Grafana version 12.x**. For Grafana workspaces that support Grafana version 10.x, see [Working in Grafana version 10](using-grafana-v10.md). For Grafana workspaces that support Grafana version 9.x, see [Working in Grafana version 9](using-grafana-v9.md). For Grafana workspaces that support Grafana version 8.x, see [Working in Grafana version 8](using-grafana-v8.md). The logs panel visualization shows log lines from data sources that support logs, such as Elastic, Influx, and Loki. Typically, you would use this panel next to a graph panel to display the log output of a related process. The logs panel shows the result of queries that were entered on the **Query** tab. The results of multiple queries are merged and sorted by time. You can scroll inside the panel if the data source returns more lines than can be displayed. To limit the number of lines rendered, you can use the **Max data points** setting in the **Query options**. If it is not set, the data source will usually enforce a default limit. ## Log level For logs where a **level** label is specified, we use the value of the label to determine the log level and update color accordingly. If the log doesn’t have a level label specified, we try to find out if its content matches any of the supported expressions (see below for more information). The log level is always determined by the first match. In case Grafana is not able to determine a log level, it will be visualized with **unknown** log level. For more information, see [Log level](v12-explore-logs.md#v12-explore-log-level). ## Log details Each log row has an extendable area with its labels and detected fields, for more robust interaction. Each field or label has a stats icon to display statistics in relation to all displayed logs. **Data links** By using data links, you can turn any part of a log message into an internal or external link. The created link is visible as a button in the **Links** section inside the **Log details** view. **Display options** Use the following settings to refine your visualization: + **Time** – Show or hide the time column. This is the timestamp associated with the log line as reported from the data source. + **Unique labels** – Show or hide the unique labels column, which shows only non-common labels. + **Common labels** – Show or hide the common labels + **Wrap lines** – Toggle line wrapping. + **Prettify JSON** – Set this to `true` to pretty print all JSON logs. This setting does not affect logs in any format other than JSON. + **Enable log details** – Toggle option to see the log details view for each log row. The default setting is `true`. + **Order** – Display results in descending or ascending time order. The default is **Descending**, showing the newest logs first. Set to **Ascending** to show the oldest log lines first. # News **** This documentation topic is designed for Grafana workspaces that support **Grafana version 12.x**. For Grafana workspaces that support Grafana version 10.x, see [Working in Grafana version 10](using-grafana-v10.md). For Grafana workspaces that support Grafana version 9.x, see [Working in Grafana version 9](using-grafana-v9.md). For Grafana workspaces that support Grafana version 8.x, see [Working in Grafana version 8](using-grafana-v8.md). The news visualization displays an RSS feed. By default, it displays articles from the Grafana Labs blog, and users can change this by entering a different RSS feed URL. Enter the URL of an RSS in the **Display** section. This visualization type does not accept any other queries, and users should not expect to be able to ilter or query the RSS feed data in any way using this visualization. **Note** RSS feeds are loaded by the Grafana front end without a proxy. As a result, only RSS feeds that are configured with the appropriate [CORS headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) will load. If the RSS feed you're trying to display fails to load, consider re-hosting the RSS feed or creating your own proxy. # Node graph **** This documentation topic is designed for Grafana workspaces that support **Grafana version 12.x**. For Grafana workspaces that support Grafana version 10.x, see [Working in Grafana version 10](using-grafana-v10.md). For Grafana workspaces that support Grafana version 9.x, see [Working in Grafana version 9](using-grafana-v9.md). For Grafana workspaces that support Grafana version 8.x, see [Working in Grafana version 8](using-grafana-v8.md). Node graphs can visualize directed graphs or networks. They use a directed force layout to effectively position the nodes, so they can help with displaying complex infrastructure maps, hierarchies, or run diagrams. ## Data requirements A node graph requires a specific shape of the data to be able to display its nodes and edges. Not every data source or query can be visualized with this graph. If you want to use this as a data source developer, see the section about data API. A node graph consists of *nodes* and *edges*. + A *node* is displayed as a circle. A node might represent an application, a service, or anything else that is relevant from an application perspective. + An *edge* is displayed as a line that connects two nodes. The connection might be a request, an operation, or some other relationship between the two nodes. Both nodes and edges can have associated metadata or statistics. The data source defines what information and values is shown, so different data sources can show different type of values or not show some values. ## Nodes Usually, nodes show two statistical values inside the node and two identifiers just below the node, usually name and type. Nodes can also show another set of values as a color circle around the node, with sections of different color representing different values that should add up to 1. For example, you can have the percentage of errors represented by red portion of the circle. Additional details can be displayed in a context menu, which is displayed when you choose the node. There also can be additional links in the context menu that can target either other parts of the Grafana workspace or any external link. **Note** Node graph can show only 1,500 nodes. If this limit is crossed, a warning is visible in the upper right corner, and some nodes will be hidden. You can expand hidden parts of the graph by clicking on the **Hidden nodes** markers in the graph. ## Edges Edges can also show statistics when you hover over the edge. Similar to nodes, you can open a context menu with additional details and links by choosing the edge. The first data source supporting this visualization is the AWS X-Ray data source for its service map feature. For more information, see [Connect to an AWS X-Ray data source](x-ray-data-source.md). ## Navigating the node graph **Pan** You can pan within the node graph by choosing outside of any node or edge and dragging the pointer. **Zoom in or out** You can zoom by using the buttons on the upper left corner of the node graph, or use a mouse wheel or other scroll input with the `Ctrl` (or `Cmd`) key. **Explore hidden nodes** The number of nodes shown at a given time is limited to maintain a reasonable performance. Nodes that are outside this limit are hidden behind selectable markers that show an approximate number of hidden nodes that are connected to that edge. You can choose the marker to expand the graph around that node. **Grid view** You can switch to the grid view to have a better overview of the most interesting nodes in the graph. Grid view shows nodes in a grid without edges and can be sorted by stats shown inside the node or by stats represented by the a colored border of the nodes. To sort the nodes, choose the stats inside the legend. The marker next to the stat name (either `˄` or `˅`) shows which stat is currently used for sorting and sorting direction. Choose a node and then select the **Show in Graph layout** option to switch back to graph layout with focus on the selected node, to show it in context of the full graph. ## Data API This visualization needs a specific shape of the data to be returned from the data source in order to correctly display it. Node Graph at minimum requires a data frame describing the edges of the graph. By default, node graph will compute the nodes and any stats based on this data frame. Optionally a second data frame describing the nodes can be sent in case there is need to show more node specific metadata. You have to set `frame.meta.preferredVisualisationType = 'nodeGraph'` on both data frames or name them `nodes` and `edges` respectively for the node graph to render. **Edges data from structure** Required fields: | Field name | Type | Description | | --- | --- | --- | | id | string | Unique identifier of the edge. | | source | string | Id of the source node. | | target | string | Id of the target. | Optional fields: | Field name | Type | Description | | --- | --- | --- | | mainstat | string/number | First stat shown in the overlay when hovering over the edge. It can be a string showing the value as is or it can be a number. If it is a number, any unit associated with that field is also shown. | | secondarystat | string/number | Same as mainStat, but shown right under it. | | detail\$1\$1\$1 | string/number | Any field prefixed with `detail__` will be shown in the header of context menu when clicked on the edge. Use `config.displayName` for a more human readable label. | **Nodes data from structure** Required fields: | Field name | Type | Description | | --- | --- | --- | | id | string | Unique identifier of the node. This ID is referenced by edge in its source and target field. | Optional fields: | Field name | Type | Description | | --- | --- | --- | | title | string | Name of the node visible just under the node. | | subtitle | string | Additional, name, type or other identifier shown under the title. | | mainstat | string/number | First stat shown inside the node itself. It can either be a string showing the value as is or a number. If it is a number, any unit associated with that field is also shown. | | secondarystat | string/number | Same as mainStat, but shown under it inside the node. | | arc\$1\$1\$1 | number | Any field prefixed with `arc__` will be used to create the color circle around the node. All values in these fields should add up to 1. You can specify color using `config.color.fixedColor`. | | detail\$1\$1\$1 | string/number | Any field prefixed with `detail__` will be shown in the header of context menu when clicked on the node. Use `config.displayName` for more human readable label. | | color | string/number | Can be used to specify a single color instead of using the `arc__` fields to specify color sections. It can either be a string (it must be an acceptable HTML color string), or it can be a number, in which case the behavior depends on the `field.config.color.mode` setting. This can be used, for example, to create gradient colors controlled by a field value. | | icon | string | Name of the icon to show inside the node instead of the default stats. Only Grafana built in icons are allowed (see the available icons [here](https://developers.grafana.com/ui/latest/index.html?path=/story/docs-overview-icon--icons-overview)). | | nodeRadius | number | Radius value in pixels. Used to manage node size. | | highlighted | Boolean | Sets whether the node should be highlighted. Use, for example, to represent a specific path in the graph by highlighting several nodes and edges. Defaults to `false`. | # Pie chart **** This documentation topic is designed for Grafana workspaces that support **Grafana version 12.x**. For Grafana workspaces that support Grafana version 10.x, see [Working in Grafana version 10](using-grafana-v10.md). For Grafana workspaces that support Grafana version 9.x, see [Working in Grafana version 9](using-grafana-v9.md). For Grafana workspaces that support Grafana version 8.x, see [Working in Grafana version 8](using-grafana-v8.md). ![\[An image showing an example of a pie chart visualization in Grafana.\]](http://docs.aws.amazon.com/grafana/latest/userguide/images/viz/pie_chart_example.png) The pie chart displays reduced series, or values in a series, from one or more queries, as they relate to each other, in the form of slices of a pie. The arc length, area and central angle of a slice are all proportional to the slices value, as it relates to the sum of all values. This type of chart is best used when you want a quick comparison of a small set of values in an aesthetically pleasing form. ## Value options Use the following options to refine the value in your visualization. **Show** Choose how much information to show. + **Calculate** – Reduces each value to a single value per series. + **All values** – Displays every value from a single series. **Calculation** Select a calculation to reduce each series when **Calculate** has been selected. For information about available calculations, refer to [Calculation types](v12-panels-calculation-types.md). **Limit** When displaying every value from a single series, this limits the number of values displayed. **Fields** Select at least one field to display in the visualization. Each field name is available on the list, or you can select one of the following options: + **Numeric fields** – All fields with numerical values. + **All fields** – All fields that are not removed by transformations. + **Time** – All fields with time values. ## Pie chart options Use these options to refine how your visualization looks. **Pie chart type** Select the pie chart display style. Can be either: + **Pie** – A standard pie chart + **Donut** – A pie chart with a hole in the middle **Labels** Select labels to display on the pie chart. You can select more than one. + **Name** – The series or field name. + **Percent** – The percentage of the whole. + **Value** – The raw numerical value. Labels are displayed in white over the body of the chart by default. You can select darker chart colors to make them more visible. Long names or numbers might be clipped. **Tooltip mode** When you hover your cursor over the visualization, Grafana can display tooltips. Choose how tooltips behave. + **Single** – The hover tooltip shows only a single series, the one that you are hovering over on the visualization. + **All** – The hover tooltip shows all series in the visualization. Grafana highlights the series that you are hovering over in bold in the series list in the tooltip. + **Hidden** – Do not display the tooltip when you interact with the visualization. Use an override to hide individual series from the tooltip. ## Legend options Use these settings to define how the legend appears in your visualization. For more information about the legend, refer to [Configure a legend](v12-panels-configure-legend.md). **Legend visibility** Use the **Visibility** toggle to show or hide the legend. **Legend mode** Set the display mode of the legend. + **List** – Displays the legend as a list. This is the default display mode of the legend. + **Table** – Displays the legend as a table. **Legend placement** Choose where to display the legend. + **Bottom** – Below the graph. + **Right** – To the right of the graph. **Legend values** Select values to display in the legend. You can select more than one. + **Percent** – The percentage of the whole. + **Value** – The raw numerical value. For more information about the legend, refer to [Configure a legend](v12-panels-configure-legend.md). # Stat **** This documentation topic is designed for Grafana workspaces that support **Grafana version 12.x**. For Grafana workspaces that support Grafana version 10.x, see [Working in Grafana version 10](using-grafana-v10.md). For Grafana workspaces that support Grafana version 9.x, see [Working in Grafana version 9](using-grafana-v9.md). For Grafana workspaces that support Grafana version 8.x, see [Working in Grafana version 8](using-grafana-v8.md). Stats show one large stat value with an optional graph sparkline. You can control the background or value color using thresholds or overrides. Stat panels also display percent change with configurable color mode options, making it easier to see trends at a glance. ![\[An image showing an example of a stat visualization in Grafana.\]](http://docs.aws.amazon.com/grafana/latest/userguide/images/viz/stat_panel_example.png) By default, a Stat displays one of the following: + Just the value for a single series or field. + Both the value and name for multiple series or fields. You can use the **Text mode** to control whether the text is displayed or not. ## Automatic layout adjustment The panel automatically adjusts the layout depending on available width and height in the dashboard. It automatically hides the graph (sparkline) if the panel becomes too small. ## Value options Use the following options to refine how your visualization displays the value: **Show** Choose how Grafana displays your data. + **Calculate** Show a calculated value based on all rows. + **Calculation** – Select a reducer function that Grafana will use to reduce many fields to a single value. For a list of available calculations, see [standard calculations](v12-panels-calculation-types.md). + **Fields** – Select the fields display in the visualization. + **All values** Show a separate stat for every row. If you select this option, then you can also limit the number of rows to display. + **Limit** – The maximum number of rows to display. Default is 5,000. + **Fields** – Select the fields display in the visualization. ## Stat styles Style your visualization. **Orientation** Choose a stacking direction. + **Auto** – Grafana selects what it thinks is the best orientation. + **Horizontal** – Bars stretch horizontally, left to right. + **Vertical** – Bars stretch vertically, top to bottom. **Text mode** You can use the Text mode option to control what text the visualization renders. If the value is not important, only the name and color is, then change the **Text mode** to **Name**. The value will still be used to determine color and is displayed in a tooltip. + **Auto** – If the data contains multiple series or fields, show both name and value. + **Value** – Show only value, never name. Name is displayed in the hover tooltip instead. + **Value and name** – Always show value and name. + **Name** – Show name instead of value. Value is displayed in the hover tooltip. + **None** – Show nothing (empty). Name and value are displayed in the hover tooltip. **Wide layout** Set whether wide layout is enabled or not. Wide layout is enabled by default. + **On** – Wide layout is turned on. + **Off** – Wide layout is turned off. **Note** This option is only applicable when **Text mode** is set to **Value and name**. When wide layout is turned on, the value and name are displayed side-by-side with the value on the right, if the panel is wide enough. When wide layout is turned off, the value is always rendered underneath the name. **Color mode** Select a color mode. + **None** – No color is applied to the value. + **Value** – Applies colors to the value and graph area. + **Background Gradient** – Applies color to the value, graph area, and background, with a slight background gradient. + **Background Solid** – Applies color to the value, graph area, and background, with a solid background color. **Graph mode** Select a graph and sparkline mode. + **None** – Hides the graph and only shows the value. + **Area** – Shows the area graph below the value. This requires that your query returns a time column. **Text alignment** Choose an alignment mode. + **Auto** – If only a single value is shown (no repeat), then the value is centered. If multiple series or rows are shown, then the value is left-aligned. + **Center** – Stat value is centered. **Show percent change** Set whether percent change is displayed or not. By default it is not shown. **Note** This option is not applicable when the **Show** setting, under **Value options**, is set to **All values**. ## Text size Adjust the sizes of the gauge text. + **Title** – Enter a numeric value for the gauge title size. + **Value** – Enter a numeric value for the gauge value size. # State timeline **** This documentation topic is designed for Grafana workspaces that support **Grafana version 12.x**. For Grafana workspaces that support Grafana version 10.x, see [Working in Grafana version 10](using-grafana-v10.md). For Grafana workspaces that support Grafana version 9.x, see [Working in Grafana version 9](using-grafana-v9.md). For Grafana workspaces that support Grafana version 8.x, see [Working in Grafana version 8](using-grafana-v8.md). State timelines show discrete state changes over time. Each field or series is rendered as its unique horizontal band. State regions can either be rendered with or without values. This panel works well with string or boolean states but can also be used with time series. When used with time series, the thresholds are used to turn the numerical values into discrete state regions. State timeline visualizations support pagination, making it easier to navigate large datasets. ![\[An image showing an example of a state timeline visualizations in Grafana.\]](http://docs.aws.amazon.com/grafana/latest/userguide/images/viz/state_timeline_example.png) ## State timeline options Use these options to refine your visualizations: **Merge equal consecutive values** Controls whether Grafana merges identical values if they are next to each other. **Show values** Controls whether values are rendered inside the state regions. **Auto** will render values if there is sufficient space. **Align values** Controls value alignment inside state regions. **Row height** Controls space between rows. 1 = no space = 0.5 = 50% space. **Line width** Controls the line width of state regions. **Fill opacity** Controls the opacity of state regions. **Connect null values** Choose how null values, which are gaps in the data, appear on the graph. Null values can be connected to form a continuous line or set to a threshold above which gaps in the data are no longer connected. + **Never** – Time series data points with gaps in the data are never connected. + **Always** – Time series data points with gaps in the data are always connected. + **Threshold** – Specify a threshold above which gaps in the data are no longer connected. This can be useful when the connected gaps in the data are of a known size or within a known range, and gaps outside this range should no longer be connected. **Disconnect values** Choose whether to set a threshold above which values in the data should be disconnected. + **Never** – Time series data points in the data are never disconnected. + **Threshold** – Specify a threshold above which values in the data are disconnected. This can be useful when desired values in the data are of a known size or within a known range, and values outside this range should no longer be connected. ## Value mappings To assign colors to boolean or string values, use [Configure value mappings](v12-panels-configure-value-mappings.md). ## Time series data with thresholds The visualization can be used with time series data as well. In this case, the thresholds are used to turn the time series into discrete colored state regions. ## Legend options When the legend option is enabled, it can show either the value mappings or the threshold brackets. To show the value mappings in the legend, it’s important that the **Color scheme** option under Standard options is set to **Single color** or **Classic palette**. To see the threshold brackets in the legend, set the **Color scheme** to **From thresholds**. **Legend mode** Use these settings to define how the legend appears in your visualization. For more information about the legend, refer to [Configure a legend](v12-panels-configure-legend.md). + **List** – Displays the legend as a list. This is the default mode. + **Table** – Displays the legend as a table. + **Hidden** – Hides the legend. **Legend placement** Choose where to display the legend. + **Bottom** – Below the graph. + **Right** – To the right of the graph. **Legend values** Choose which of the [standard calculations](v12-panels-calculation-types.md) to show in the legend. You can have more than one. # Status history **** This documentation topic is designed for Grafana workspaces that support **Grafana version 12.x**. For Grafana workspaces that support Grafana version 10.x, see [Working in Grafana version 10](using-grafana-v10.md). For Grafana workspaces that support Grafana version 9.x, see [Working in Grafana version 9](using-grafana-v9.md). For Grafana workspaces that support Grafana version 8.x, see [Working in Grafana version 8](using-grafana-v8.md). Status histories show periodic states over time. Each field or series is rendered as a horizontal row. Boxes are rendered and centered around each value. ## Supported data A status history works with string, boolean, and numerical fields or time series. A time field is required. You can use value mappings to color strings or assign text values to numerical ranges. ## Display options Use these options to refine the visualization. **Show values** Controls whether values are rendered inside the value boxes. **Auto** will render values if there is sufficient space. **Column width** Controls the width of boxes. 1 = maximum space and 0 = minimum space. **Line width** Controls line width of state regions. **Fill opacity** Controls the fill opacity of state regions. ## Value mappings To assign colors to boolean or string values, use [Configure value mappings](v12-panels-configure-value-mappings.md). ## Time series data with thresholds The panel can be used with time series data as well. In this case, the thresholds are used to color the boxes. You can also use gradient color schemes to color values. ## Legend options When the legend option is enabled, it can show either the value mappings or the threshold brackets. To show the value mappings in the legend, it’s important that the **Color scheme** option under Standard options is set to **Single color** or **Classic palette**. To see the threshold brackets in the legend, set the **Color scheme** to **From thresholds**. **Legend mode** Use these settings to define how the legend appears in your visualization. For more information about the legend, refer to [Configure a legend](v12-panels-configure-legend.md). + **List** – Displays the legend as a list. This is the default mode. + **Table** – Displays the legend as a table. + **Hidden** – Hides the legend. **Legend placement** Choose where to display the legend. + **Bottom** – Below the graph. + **Right** – To the right of the graph. **Legend values** Choose which of the [standard calculations](v12-panels-calculation-types.md) to show in the legend. You can have more than one. # Table **** This documentation topic is designed for Grafana workspaces that support **Grafana version 12.x**. For Grafana workspaces that support Grafana version 10.x, see [Working in Grafana version 10](using-grafana-v10.md). For Grafana workspaces that support Grafana version 9.x, see [Working in Grafana version 9](using-grafana-v9.md). For Grafana workspaces that support Grafana version 8.x, see [Working in Grafana version 8](using-grafana-v8.md). Tables are very flexible, supporting multiple modes for time series and for tables, annotation, and raw JSON data. This visualization also provides date formatting, value formatting, and coloring options, including CSS cell styling, tooltip generation from table fields, a new Actions cell type for interactive buttons, auto-formatted cell values in Cell Inspect, and row-level conditional formatting for coloring entire rows based on data values. ![\[An image showing an example of a table visualization in Grafana.\]](http://docs.aws.amazon.com/grafana/latest/userguide/images/viz/table_example.png) **Note** Annotations and alerts are not supported in tables. ## Sort column Choose a column title to change the sort order from default to descending to ascending. Each time you select the column, the sort order changes to the next option in the cycle. You can sort on multiple columns by holding the `shift` key when selecting additional columns. ## Table options **Show header** Show or hide column names imported from your data source. ## Column width By default, Grafana automatically calculates the column width based on the table size and the minimum column width. This field option can override the setting and define the width for all columns in pixels. For example, if you enter `100`, all the columns will be set to 100 pixels wide (the change takes place when you exit the field). ## Minimum column width By default, the minimum width of the table column is 150 pixels. This field option can override that default and will define the new minimum column width for the table panel in pixels. For example, if you set the minimum to `75`, all the columns will scale to no smaller than 75 pixels wide. For small-screen devices, such as smartphones or tablets, you can reduce the default `150` pixel value to `50` to allow table based panels to render correctly in dashboards. ## Column alignment Choose how Grafana should align cell contents. + Auto (default) + Left + Center + Right ## Cell type By default, Grafana automatically chooses display settings. You can override the settings by choosing one of the following options to set the default for all fields. Additional configuration is available for some cell types. **Note** If you set these in the **Field** tab, then the type will apply to all fields, including the time field. You can set them in the **Override** tab to apply the change to one or more fields. **Color text** If thresholds are set, then the field text is displayed in the appropriate threshold color. **Color background (gradient or solid)** If thresholds are set, then the field background is displayed in the appropriate threshold color. **Gauge** Cells can be displayed as a graphical gauge, with several different presentation types. + *Basic* – The basic mode will show a simple gauge with the threshold levels defining the color of gauge. + *Gradient* – The threshold levels define a gradient. + *LCD* – The gauge is split up in small cells that are lit or unlit. Additionally, labels displayed alongside the gauges can be set to be colored by value, match the theme text color, or be hidden. + **Value color** + **Text color** + **Hidden** **JSON view** Shows value formatted as code. If a value is an object the JSON view allowing browsing the JSON object will appear on hover. **Sparkline** Shows values rendered as a sparkline. Requires [time series to table](v12-panels-xform-functions.md#v12-panels-xform-funcs-series) data transform. ## Cell value inspect Enables value inspection from table cell. The raw value is presented in a modal window. **Note** Cell value inspection is only available when cell display mode is set to Auto, Color text, Color background, or JSON View. ## Column filter You can temporarily change how column data is displayed. For example, you can order values from highest to lowest or hide specific values. For more information, see [Filter table columns](#v12-panels-table-filter). ## Pagination Use this option to enable or disable pagination. It is a front-end option that does not affect queries. When enabled, the page size automatically adjusts to the height of the table. ## Filter table columns If you turn on the **Column filter**, then you can filter table options. **To turn on column filtering** 1. In Grafana, navigate to the dashboard with the table with the columns that you want to filter. 1. On the table panel you want to filter, open the panel editor. 1. Choose the **Field** tab. 1. In **Table** options, turn on the **Column filter** option. A filter (funnel) icon appears next to each column title. **Filter column values** To filter column values, choose the filter (funnel) icon next to a column title. Grafana displays the filter options for that column. Choose the check box next to the values that you want to display. Enter text in the search field at the top to show those values in the display so that you can select them rather than scroll to find them. Select from several operators to display column values: + **Contains** – Matches a regex pattern (operator by default). + **Expression** – Evaluates a Boolean expression. The character `$` represents the column value in the expression (for example, `$ >= 10 ≈& $ <= 12`). + **Comparison operators** – You can use the typical comparison operators: `=`, `!=`, `<`, `<=`, `>`, `>=`. Choose the checkbox above the **Ok** and **Cancel** buttons to add or remove all displayed values from the filter. **Clear column filters** Columns with filters applied have a blue funnel displayed next to the title. To remove the filter, choose the blue funnel icon and then select **Clear filter**. ## Table footer You can use the table footer to show [calculations](v12-panels-calculation-types.md) on fields. After you enable the table footer, you can select the **Calculation**, and then the **Fields** that you want to calculate. The system applies the calculation to all numeric fields if you do not select a field. **Count rows** If you want to show the number of rows in the dataset instead of the number of values in the selected fields, select the **Count** calculation and enable **Count rows**. # Text **** This documentation topic is designed for Grafana workspaces that support **Grafana version 12.x**. For Grafana workspaces that support Grafana version 10.x, see [Working in Grafana version 10](using-grafana-v10.md). For Grafana workspaces that support Grafana version 9.x, see [Working in Grafana version 9](using-grafana-v9.md). For Grafana workspaces that support Grafana version 8.x, see [Working in Grafana version 8](using-grafana-v8.md). Text visualizations enable you to directly include text or HTML in your dashboards. This can be used to add contextual information and descriptions or embed complex HTML. **Mode** **Mode** determines how embedded content appears. It has the following options: + **Markdown** – This option formats the content as markdown. + **HTML** – This setting renders the content as sanitized HTML. + **Code** – This setting renders content inside a read-only code editor. Select an appropriate language to apply syntax highlighting to the embedded text. **Variables** Variables in the content will be expanded for display. # Time series **** This documentation topic is designed for Grafana workspaces that support **Grafana version 12.x**. For Grafana workspaces that support Grafana version 10.x, see [Working in Grafana version 10](using-grafana-v10.md). For Grafana workspaces that support Grafana version 9.x, see [Working in Grafana version 9](using-grafana-v9.md). For Grafana workspaces that support Grafana version 8.x, see [Working in Grafana version 8](using-grafana-v8.md). ![\[An image showing examples of times series visualizations in Grafana.\]](http://docs.aws.amazon.com/grafana/latest/userguide/images/viz/time_series_example.png) Time series visualizations are the default and primary way to visualize time series data as a graph. They can render series as lines, points, or bars. They're versatile enough to display almost any time-series data. **Note** You can migrate Graph panel visualizations to Time series visualizations. To migrate, on the **Panel** tab, choose **Time series visualization**. Grafana transfers all applicable settings. **Topics** + [Tooltip options](v12-time-series-panel-tooltip.md) + [Legend options](v12-time-series-panel-legend.md) + [Graph styles](v12-time-series-graph.md) + [Axis options](v12-time-series-axis.md) + [Color options](v12-time-series-color.md) # Tooltip options **** This documentation topic is designed for Grafana workspaces that support **Grafana version 12.x**. For Grafana workspaces that support Grafana version 10.x, see [Working in Grafana version 10](using-grafana-v10.md). For Grafana workspaces that support Grafana version 9.x, see [Working in Grafana version 9](using-grafana-v9.md). For Grafana workspaces that support Grafana version 8.x, see [Working in Grafana version 8](using-grafana-v8.md). Tooltip options control the information overlay that appears when you hover over data points in the graph. **Tooltip mode** + **Single** – The hover tooltip shows only a single series, the one that you are hovering over. + **All** – The hover tooltip shows all series in the visualization. Grafana highlights the series that you are hovering over in bold in the series list in the tooltip. + **Hidden** – Do not display the tooltip when you interact with the visualization. # Legend options **** This documentation topic is designed for Grafana workspaces that support **Grafana version 12.x**. For Grafana workspaces that support Grafana version 10.x, see [Working in Grafana version 10](using-grafana-v10.md). For Grafana workspaces that support Grafana version 9.x, see [Working in Grafana version 9](using-grafana-v9.md). For Grafana workspaces that support Grafana version 8.x, see [Working in Grafana version 8](using-grafana-v8.md). Legend options control the series names and statistics that appear under or to the right of the graph. **Legend mode** Use these settings to define how the legend appears in your visualization. For more information about the legend, see [Configure a legend](v12-panels-configure-legend.md). + **List** – Displays the legend as a list. This is the default display mode of a legend. + **Table** – Displays the legend as a table. + **Hidden** – Hides the legend. **Legend placement** Choose where to display the legend. + **Bottom** – Below the graph. + **Right** – To the right of the graph. **Legend values** Choose which of the [standards calculations](v12-panels-calculation-types.md) to show in the legend. You can have more than one. # Graph styles **** This documentation topic is designed for Grafana workspaces that support **Grafana version 12.x**. For Grafana workspaces that support Grafana version 10.x, see [Working in Grafana version 10](using-grafana-v10.md). For Grafana workspaces that support Grafana version 9.x, see [Working in Grafana version 9](using-grafana-v9.md). For Grafana workspaces that support Grafana version 8.x, see [Working in Grafana version 8](using-grafana-v8.md). Use this option to define how to display your time series data. You can use overrides to combine multiple styles in the same graph. + **Lines** – Display the time series as a line on a graph. + **Bars** – Display the time series as a series of bars on a graph, one for each data point. + **Points** – Display the time series as dots on a graph, one for each data point. ## Bar alignment Set the position of the bar relative to a data point.where the point would be drawn on the graph. Because a bar has a width, it can be placed before, after, or centered on the point. The choices for this option are: + ![\[An image showing a bar graph aligned before a point.\]](http://docs.aws.amazon.com/grafana/latest/userguide/images/viz/bar-alignment-before.png) **Before** – The bar is drawn before the point. The point is placed on the trailing corner of the bar. + ![\[An image showing a bar graph aligned around a point.\]](http://docs.aws.amazon.com/grafana/latest/userguide/images/viz/bar-alignment-center.png) **Center** – The bar is drawn around the point. The point is placed in the center of the bar. This is the default. + ![\[An image showing a bar graph aligned after a point.\]](http://docs.aws.amazon.com/grafana/latest/userguide/images/viz/bar-alignment-after.png) **After** – The bar is drawn after the point. the point is placed on the leading corner of the bar. ## Line width Line width is a slider that controls the thickness for series lines or the outline for bars. ## Fill opacity Sets the opacity of a fill color. Fills are used, for example, to show the area under the line in a line graph, or as the color of bars in a bar graph. ## Gradient mode Gradient mode specifies the gradient fill, which is based on the series color. To change the color, use the standard color scheme field option. For more information, see [Color scheme](v12-panels-configure-standard-options.md#v12-panels-standard-options-color-scheme). The gradient mode options are: + **None** – No gradient fill. This is the default setting. + **Opacity** – An opacity gradient where the opacity of the fill increases as the Y-axis values increase. + **Hue** – A subtle gradient that is based on the hue of the series color. + **Scheme** – A color gradient defined by your color scheme. This setting is used for the fill area and the line. For more information, see [Color options](v12-time-series-color.md). The gradient appearance is influenced by the **Fill opacity** setting. ## Show points You can configure your visualization to add points to line or bars, with the following options. + **Auto** – Grafana determines whether to show points based on the density of the data. Points are shown when the density is low. + **Always** – Points are shown, regardless of the data density. + **Never** – Do not show points. ## Point size Sets the size of the points, from 1 to 40 pixels in diameter. ## Line interpolation Choose how Grafana interpolates the series line. ![\[An image showing different ways of drawing lines between points in Grafana.\]](http://docs.aws.amazon.com/grafana/latest/userguide/images/viz/line-interpolation.png) The options are: + **Linear** – Points are joined by straight lines. + **Smooth** – Points are joined by curved lines that smooths transitions between points. + **Step before** – The line is displayed as steps between points. Points are rendered at the end of the step. + **Step after** – The line is displayed as steps between points. Points are rendered at the beginning of the step. ## Line style Set the style of the line. To change the color, use the standard color scheme field option. The choices for line style are: + **Solid** – Display a solid line. This is the default setting. + **Dash** – Display a dashed line. When you choose this option, a list appears for you to select the length and gap (length, gap) for the line dashes. Dash spacing is set to 10, 10 by default. + **Dots** – Display dotted lines. When you choose this option, a list appears for you to select the gap length for the dot spacing. Dot spacing is set to 10 by default. ## Connect null values Choose how null values, which are gaps in the data, appear on the graph. Null values can be connected to form a continuous line, or set to a threshold above which gaps in the data are no longer connected. The choices for how to connect null values are: + **Never** – Time series data points with gaps in the data are never connected. + **Always** – Time series data points with gaps in the data are always connected. + **Threshold** – Specify a threshold above which gaps in the data are no longer connected. This can be useful when the connected gaps in the data are of a known size or within a known range, and gaps outside the range should no longer be connected. ## Disconnect values Choose whether to add a gap between values in the data that have times between them above a specified threshold. The choices for disconnect values are are: + **Never** – Time series data points are never disconnected. + **Threshold** – Specify a threshold above which values in the data are disconnected. This can be useful when desired values in the data are of a known size or within a known range, and values outside this range should no longer be connected. ## Stack series *Stacking* allows Grafana to display series on top of each other. Be cautious when using stacking in the visualization as it can easily create misleading graphs. To read more about why stacking might not be the best approach, refer to [The Issue with Stacking](https://www.data-to-viz.com/caveat/stacking.html). The choices for stacking are: + **Off** – Turns off series stacking. + **Normal** – Stacks series on top of each other. + **100%** – Stack by percentage, where all series together add up to 100%. **Stacking series in groups** You can override the stacking behavior to stack series in groups. For more information about creating an override, see [Configure field overrides](v12-panels-configure-overrides.md). **To stack series in groups** 1. Edit the panel and choose **Overrides**. 1. Create a field override for the **Stack series** option. 1. In stacking mode, select **Normal**. 1. Name the stacking group in which you want the series to appear. The stacking group name option is only available when you create an override. ## Fill below to The **Fill below to** option fills the area between two series. This options is only available as a series or field override. Using this option you can fill the area between two series, rather than from the series line down to 0. For example, if you had two series called *Max* and *Min*, you could select the *Max* series and override it to **Fill below to** the *Min* series. This would fill only the area between the two series lines. # Axis options **** This documentation topic is designed for Grafana workspaces that support **Grafana version 12.x**. For Grafana workspaces that support Grafana version 10.x, see [Working in Grafana version 10](using-grafana-v10.md). For Grafana workspaces that support Grafana version 9.x, see [Working in Grafana version 9](using-grafana-v9.md). For Grafana workspaces that support Grafana version 8.x, see [Working in Grafana version 8](using-grafana-v8.md). Options under the axis category change how the x- and y-axes are rendered. Some options do not take effect until you click outside of the field option box you are editing. You can also press `Enter`. ## Time zone Set the desired time zones to display along the x-axis. ## Placement Select the placement of the Y-axis. The options are: + **Auto** – Automatically assigns the y-axis to the series. When there are two or more series with different units, Grafana assigns the left axis to the first unit, and the right axis to the units that follow. + **Left** – Display all y-axes on the left side. + **Right** – Display all y-axes on the right side. + **Hidden** – Hide all axes. To selectively hide axes, [add a field override](v12-panels-configure-overrides.md) that targets specific fields. ## Label Set a y-axis text label. If you have more than one y-axis, then you can assign different labels using an override. ## Width Set a fixed width of the axis. By default, Grafana dynamically calculates the width of an axis. By setting the width of the axis, data with different axes types can share the same display proportions. This setting makes it easier for you to compare more than one graph’s worth of data because the axes are not shifted or stretched within visual proximity to each other. ## Show grid lines Set the axis grid line visibility. + **Auto** – Automatically show grid lines based on the density of the data. + **On** – Always show grid lines. + **Off** – Never show grid lines. ## Color Set the color of the axis. + **Text** – Set the color based on theme text color. + **Series** – Set the color based on the series color. ## Show border Set the axis border visibility. ## Scale Set how the y-axis values scale. + **Linear** – Divides the scale into equal parts. + **Logarithmic** – Use a logarithmic scale. When you select this option, a list appears for you to choose a binary (base 2) or common (base 10) logarithmic scale. + **Symlog** – Use a symmetrical logarithmic scale. When you select this option, a list appears for you to choose a binary (base 2) or common (base 10) logarithmic scale. The linear threshold option allows you to set the threshold at which the scale changes from linear to logarithmic. ## Centered zero Sets the y-axis to be centered on zero. ## Soft min and soft max Set a **Soft min** or **soft max** option for better control of y-axis limits. By default, Grafana sets the range for the y-axis automatically based on the dataset. Soft min and soft max settings can prevent small variations in the data from being magnified when it's mostly flat. In contrast, hard min and max values help prevent obscuring useful detail in the data by clipping intermittent spikes past a specific point. To define hard limits of the y-axis, set standard min/max options. For more information, refer to [Configure standard options](v12-panels-configure-standard-options.md). ## Transform Use this option to transform the series values without affecting the values shown in the tooltip, context menus, or legend. You have two transform options: + **Negative Y transform** – Flip the results to negative values on the Y axis. + **Constant** – Show the first value as a constant line. **Note** The transform option is only available as an override. ## Display multiple y-axes There are some cases where you want to display multiple y-axes. For example, if you have a dataset showing both temperature and humidity over time, you could show two y-axes with different units for these two series. To display multiple y-axes, [add a field override](v12-panels-configure-overrides.md#v12-panels-overrides-add-a-field). Follow the steps as many times as required to add as many y-axes as you need. # Color options **** This documentation topic is designed for Grafana workspaces that support **Grafana version 12.x**. For Grafana workspaces that support Grafana version 10.x, see [Working in Grafana version 10](using-grafana-v10.md). For Grafana workspaces that support Grafana version 9.x, see [Working in Grafana version 9](using-grafana-v9.md). For Grafana workspaces that support Grafana version 8.x, see [Working in Grafana version 8](using-grafana-v8.md). By default, the graph uses the standard [Color scheme](v12-panels-configure-standard-options.md#v12-panels-standard-options-color-scheme) option to assign series colors. You can also use the legend to open the color picker by selecting the legend series color icon. Setting color this way automatically creates an override rule that set’s a specific color for a specific series. The following are additional options that you can use to override series color defaults. ## Classic palette The most common setup is to use the **Classic palette** for graphs. This scheme automatically assigns a color for each field or series based on its order. If the order of a field changes in your query, the color also changes. You can manually configure a color for a specific field using an override rule. ## Single color Use this mode to specify a color. You can also select the colored line icon next to each series in the Legend to open the color picker. This automatically creates a new override that sets the color scheme to single color and the selected color. ## By value color schemes If you select a by value color scheme like **From thresholds (by value)** or **Green-Yellow-Red (by value)**, the **Color series by** option appears. This option controls which value (Last, Min, Max) to use to assign the series its color. ## Scheme gradient mode The **Gradient mode** option located under the **Graph styles** has a mode named **Scheme**. When you enable **Scheme**, the line or bar receives a gradient color defined from the selected **Color scheme**. **From thresholds** If the **Color scheme** is set to **From thresholds (by value)** and **Gradient mode** is set to **Scheme**, then the line or bar color changes as they cross the defined thresholds. You will see only the exact colors chosen in the scheme. **Gradient color schemes** Using a gradient color scheme *without* setting the **Gradient mode** to **Scheme**, means that the colors chosen will form a gradient between the colors chosen, as the values in the series move between the thresholds set. # Traces **** This documentation topic is designed for Grafana workspaces that support **Grafana version 12.x**. For Grafana workspaces that support Grafana version 10.x, see [Working in Grafana version 10](using-grafana-v10.md). For Grafana workspaces that support Grafana version 9.x, see [Working in Grafana version 9](using-grafana-v9.md). For Grafana workspaces that support Grafana version 8.x, see [Working in Grafana version 8](using-grafana-v8.md). Traces visualizations let you follow a request as it traverses the services in your infrastructure. The traces visualization displays traces data in a diagram that allows you to easily interpret it. For more information about traces and how to use them, refer to the following documentation: + [Tracing in Explore](v12-explore-tracing.md) + [Tempo data source](tempo-data-source.md) + [Getting started with Tempo](https://grafana.com/docs/tempo/latest/getting-started/) in the *Grafana Labs Tempo Documentation*. ## Adding a panel with tracing visualizations Once you have tracing data available in your Grafana stack, you can add tracing panels to your Grafana dashboards. Using a dashboard variable, `traceID`, lets you create a query to show specific traces for a given trace ID. For more information about dashboard variables, refer to the [Variables documentation](v12-dash-variables.md). **Prerequisites** Before you begin, you need: + An Amazon Managed Grafana workspace. + A [Tempo data source](tempo-data-source.md) connected to your workspace. To view and analyze traces data in a dashboard, you need to add the traces visualization to your dashboard and define a query using the panel editor. The query determines the data that is displayed in the visualization. For more information on the panel editor, refer to the [Panel editor documentation](v12-panels-editor-overview.md). This procedure uses dashboard variables and templates to allow you to enter trace IDs which can then be visualized. You’ll use a variable called `traceId` and add it as a template query. **To add a traces visualization query** 1. In your workspace, create a new dashboard or go to an existing dashboard where you’d like to add traces visualizations. 1. Choose **Add visualization** from a new dashboard or choose **Add Panel** on an existing dashboard. 1. Select the appropriate tracing data source. 1. In the top-right of the panel editor, choose the **Visualizations** tab, and select **Traces**. 1. Under the **Panel options**, enter a **Title** for your trace panel. For more information on the panel editor, see [Configure panel options](v12-panels-configure-panel-options.md). 1. In the query editor, select the **TraceQL** query type tab. 1. Enter `${traceId}` in the TraceQL query field to create a dashboard variable. This variable is used as the template query. 1. Choose **Apply** in the panel editor to add the panel to the dashboard. 1. Go to the dashboard **Settings** and add a new variable called `traceId`, of variable type **Custom**, giving it a label, if required. Choose **Apply** to add the variable to the dashboard. 1. Verify that the panel works by using a valid trace ID for the data source used for the trace panel and editing the ID in the dashboard variable. ## Adding TraceQL with table visualizations While you can add a trace visualization to a dashboard, having to manually add trace IDs as a dashboard variable is cumbersome. It’s more useful to instead be able to use TraceQL queries to search for specific types of traces and then select appropriate traces from matching results. **Prerequisites** This procedure assumes you have completed the previous procedure. **To add TraceQL with table visualizations** 1. In the same dashboard where you added the trace visualization, choose **Add panel** to add a new visualization panel. 1. Select the same trace data source you used in the previous section. 1. In the top-right of the panel editor, select the **Visualizations** tab, then choose **Table**. 1. In the query editor, choose the **TraceQL** tab. 1. Under the **Panel options**, enter a **Title** for your trace panel. 1. Add an appropriate TraceQL query to search for traces that you would like to visualize in the dashboard. For example, here is a simple, static query from a server called *my-server*. ``` { .service.name = "my-server" && .http.status_code=500 } ``` You can write the TraceQL query as a template query to take advantage of other dashboard variables, if they exist. This lets you create dynamic queries based on these variables. When results are returned from a query, the results are rendered in the panel’s table. The results in the traces visualization include links to the **Explore** page that renders the trace. You can add other links to traces in the table that fill in the `traceId` dashboard variable when selected, so that the trace is visualized in the same dashboard. To create a set of data links in the panel, use the following procedure. **To use a variable to add other links to traces** 1. In the right-side menu, under **Data links**, choose **Add link**. 1. Add a **Title** for the data link. 1. Find the path to the dashboard by looking in your browser’s address bar when the full dashboard is being rendered. Because this is a link to a dashboard in the same Grafana stack, only the path of the dashboard is required. For example, if your path is: ``` https://g-example.grafana-workspace.us-east-1.amazonaws.com/d/1234abcd5/my-dashboard?orgId=1 ``` Then the path to the dashboard is: ``` /d/1234abcd5/my-dashboard?orgId=1 ``` 1. In the **URL** field, make a self-reference to the dashboard that contains both of the panels. This self-reference uses the value of the selected trace in the table to fill in the dashboard variable. Use the path for the dashboard from the previous step and then fill in the value of `traceId` using the selected results from the TraceQL table. The trace ID is exposed using the `traceID` data field in the returned results, so use that as the value for the dashboard variable. For example: ``` /d/1234abcd5/my-dashboard?orgId=1&var-traceId=${__data.fields["traceID"]} ``` 1. Choose **Save** to save the data link. 1. Choose **Apply** from the panel editor to apply the panel to the dashboard. 1. Save the dashboard. You should now see a list of matching traces in the table visualization. While selecting the **TraceID** or **SpanID** fields will give you the option to either open the **Explore** page to visualize the trace or following the data link, selecting any other field (such as `Start time`, `Name`, or `Duration`) automatically follows the data link, filling in the `traceId` dashboard variable, and then shows the relevant trace in the trace panel. # Trend **** This documentation topic is designed for Grafana workspaces that support **Grafana version 12.x**. For Grafana workspaces that support Grafana version 10.x, see [Working in Grafana version 10](using-grafana-v10.md). For Grafana workspaces that support Grafana version 9.x, see [Working in Grafana version 9](using-grafana-v9.md). For Grafana workspaces that support Grafana version 8.x, see [Working in Grafana version 8](using-grafana-v8.md). Trend visualizations should be used for datasets that have a sequential, numeric X that is not time. Some examples are function graphs, rpm/torque curves, supply/demand relationships, and elevation or heart rate plots along a race course (with x as distance or duration from start). Trend visualizations support all visual styles and options available in the [time series visualization](v12-panels-time-series.md) with the following exceptions: + No annotations or time regions + No shared cursor (or crosshair) + No multi-timezone x axis + No ability to change the dashboard time range via drag-selection **X Field selection** Use this option to select a field that contains increasing numeric values. For example, you could represent engine power and torque versus speed where speed is plotted on the x axis and power and torque are plotted on the y axes. # XY Chart XY charts provide a way to visualize arbitrary x and y values in a graph so that you can easily show the relationship between two variables. XY charts are typically used to create scatter plots. you can also use them to create bubble charts, where field values determine the size of each bubble. ![\[An image showing an example of an XY chart visualization in Grafana.\]](http://docs.aws.amazon.com/grafana/latest/userguide/images/viz/xy-chart-example.png) ## Supported data formats You can use any type of tabular data with at least two numeric fields in an XY chart. This type of visualization doesn't require time data. ## Panel options In the **Panel options** section of the panel editor pane, you set basic options like the panel title and description. You can also configure repeating panels in this section. For more information, see [Configure panel options](v12-panels-configure-panel-options.md). ## XY chart options **Series mapping** Set how series data is mapped in the chart. + **Auto** – Automatically generates series from all available data frames (or datasets). You can filter to select only one frame. + **Manual** – Explicitly define the series by selecting from available data frames. Depending on your series mapping selection, the **Frame**, **X-field**, and **Y-field** options differ. The Auto and Manual series mapping sections describe these different options. **Auto series mapping options** When you select **Auto** as your series mapping mode, the following options are preconfigured, but you can also define them yourself. + **Frame** – By default an XY chart displays all data frames. You can filter to select only one frame. + **X-field** – Select which field X represents. By default,t his is the first number field in each data frame. + **Y-field** – After the X-field is set, by default, all the remaining number fields in the data frame are designated as the Y-fields. You can use this option to explicitly choose which fields to use for Y. The series of the chart are generated from the Y-fields. To make changes to a series in an XY chart, make overrides to the Y-field. Any field you use in the Size field or Color field doesn't generate a series. You can also use overrides to exclude Y-fields individually. To do so, add an override with the following properties for each Y-field you want removed: + Override type: **Fields with name** + Override property: **Series > Hide in area** + Area: **Viz** **Manual series mapping options** When you select **Manual** as your series mode, you can add, edit, and delete series. To manage a series, select the **Series** field. To rename the series, select the series name. In **Manual** mode, you must set the following options: + **Frame** – Select your data frame or dataset. You can add as many frames as you want. + **X-field** – Select which field X represents. + **Y-field** – Select which field Y represents. **Size field** Use this option to set which field's values control the size of point in the chart. This value is relative to the min and max of all the values in the data frame. When you select this option, you can then set the min and max point size options. **Color field** Use this option to set which field's values control the color of the points in the chart. To use the color value options under the **Standard options**, you must set this field. Typically, this option is used when you only have one series displayed in the chart. **Show** Set how values are represented in the visualization. + **Points** – Display values as points. When you select this option, the point size option is also displayed. + **Lines** – Add a line between values. When you select this option, the line style and line width options are also displayed. + **Both** – Display both points and lines. **Point size** Sets the size of all point in the chart, from one to 100 pixels in diameter. The default size is five pixels. You can set an override to set the pixel size by series (Y-field). **Min/Max point size** Use these optinos to control the minimum or maximum point size when you've set the **Size field** option. You can override these options for specific series. **Line style** Set the style of the line. To change the color, use the standard color scheme field option. + **Solid** – Display a solid line. This is the default setting. + **Dash** – Display a dashed line. When you choose this option, a drop-down list is displayed where you can select the length and gap setting for the line dashes. By default, the length and gap are set to `10, 10`. + **Dots** – Display dotted lines. When you choose this option, a drop-down list is displayed where you can select dot spacing. By default, the dot spacing is set to `0, 10` (the first number represents dot length, and is always zero). **Line width** Sets the width of the lines, in pixels. ## Tooltip options Tooltip options control the information overlay that appears when you hover over data points in the graph. **Tooltip mode** + **Single** – The hover tooltip shows only a single series, the one that you are hovering over. + **Hidden** – Do not display the tooltip when you interact with the visualization. Use an override to hide individual series from the tooltip. **Max height** Set the maximum height of the tooltip box. The defautl is 600 pixels. ## Legend options Legend options control the series names and statistics that appear under or to the right of the graph. For more information about the legend, see [Configure a legend](v12-panels-configure-legend.md). **Visibility** Toggle the switch to turn the legend on or off. **Mode** Use these settings to define how the legend appears in your visualization. + **List** – Displays the legend as a list. This is the default display mode of a legend. + **Table** – Displays the legend as a table. **Placement** Choose where to display the legend. + **Bottom** – Below the graph. + **Right** – To the right of the graph. **Values** Choose which of the [standards calculations](v12-panels-calculation-types.md) to show in the legend. You can have more than one. **Width** Control how wide the legend is when place to the right side of the visualization. This option is only displayed if you set the legend placement to **Right**. ## Axis options **** This documentation topic is designed for Grafana workspaces that support **Grafana version 12.x**. For Grafana workspaces that support Grafana version 10.x, see [Working in Grafana version 10](using-grafana-v10.md). For Grafana workspaces that support Grafana version 9.x, see [Working in Grafana version 9](using-grafana-v9.md). For Grafana workspaces that support Grafana version 8.x, see [Working in Grafana version 8](using-grafana-v8.md). Options under the axis category change how the x- and y-axes are rendered. Some options don't take effect until you click outside of the field option box you are editing. You can also press `Enter`. **Placement (y-axis)** Select the placement of the Y-axis. The options are: + **Auto** – Automatically assigns the y-axis to the series. When there are two or more series with different units, Grafana assigns the left axis to the first unit, and the right axis to the units that follow. + **Left** – Display all y-axes on the left side. + **Right** – Display all y-axes on the right side. + **Hidden** – Hide all axes. To selectively hide axes, [add a field override](v12-panels-configure-overrides.md) that targets specific fields. **Label** Set a y-axis text label. If you have more than one y-axis, then you can assign different labels using an override. **Width** Set a fixed width of the axis. By default, Grafana dynamically calculates the width of an axis. By setting the width of the axis, data with different axes types can share the same display proportions. This setting makes it easier for you to compare more than one graph’s worth of data because the axes are not shifted or stretched within visual proximity to each other. **Show grid lines** Set the axis grid line visibility. + **Auto** – Automatically show grid lines based on the density of the data. + **On** – Always show grid lines. + **Off** – Never show grid lines. **Color** Set the color of the axis. + **Text** – Set the color based on theme text color. + **Series** – Set the color based on the series color. **Show border** Set the axis border visibility. **Scale** Set how the y-axis values scale. + **Linear** – Divides the scale into equal parts. + **Logarithmic** – Use a logarithmic scale. When you select this option, a list appears for you to choose a binary (base 2) or common (base 10) logarithmic scale. + **Symlog** – Use a symmetrical logarithmic scale. When you select this option, a list appears for you to choose a binary (base 2) or common (base 10) logarithmic scale. The linear threshold option allows you to set the threshold at which the scale changes from linear to logarithmic. *Centered zero* Sets the y-axis to be centered on zero. **Soft min and soft max** Set a **Soft min** or **soft max** option for better control of y-axis limits. By default, Grafana sets the range for the y-axis automatically based on the dataset. Soft min and soft max settings can prevent small variations in the data from being magnified when it's mostly flat. In contrast, hard min and max values help prevent obscuring useful detail in the data by clipping intermittent spikes past a specific point. To define hard limits of the y-axis, set standard min/max options. For more information, refer to [Configure standard options](v12-panels-configure-standard-options.md). **Transform** Use this option to transform the series values without affecting the values shown in the tooltip, context menus, or legend. You have two transform options: + **Negative Y transform** – Flip the results to negative values on the Y axis. + **Constant** – Show the first value as a constant line. **Note** The transform option is only available as an override. **Display multiple y-axes** There are some cases where you want to display multiple y-axes. For example, if you have a dataset showing both temperature and humidity over time, you could show two y-axes with different units for these two series. To display multiple y-axes, [add a field override](v12-panels-configure-overrides.md#v12-panels-overrides-add-a-field). Follow the steps as many times as required to add as many y-axes as you need. ## Standard options **Standard options** in the panel editor let you change how field data is displayed in your visualization. When you set a standard option, the change is applied to all fields or series. For more granular control over the display of fields, refer to [Configure field overrides](v12-panels-configure-overrides.md). You can cusotmize the following standard options: + **Field min/max** – Enable **Field min/max** to have Grafana calculate the min or max of each field individually, based on the minimum or maximum value of the field. + **Color scheme** – Set single or multiple colors for your entire visualization. For more information, see [Configure standard options](v12-panels-configure-standard-options.md). ## Data links Data links allow you to link to other panels, dashboards, and external resources while maintaining the context of the source panel. You can create links that include the series name or even the value under the cursor. For each data link, set the following options: + **Title** + **URL** + **Open in new tab** For more information, see [Configure data links](v12-panels-configure-data-links.md). ## Field overrides Overrides allow you to customize visualization settings for specific fields or series. When you add an override rule, you can target a particular set of fields and define multiple options for how those fields are displayed. Choose from one of the following override options: + **Fields with name** – Select a field from the list of all available fields. + **Fields with name matching regex** – Specify fields to override with a regular expression. + **Fields with type** – Select fields by type, such as string, numeric, or time. + **Fields returned by query** – Select all fields returned by a specific query. + **Fields with values** – Select all fields returned by your defined reducer condition, such as **Min**, **Max**, **Count**, or **Total**. For more information, see [Configure field overrides](v12-panels-configure-overrides.md).