# 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.