Time series on Grafana Labs

Annotate time series

Fri, 03 Apr 2026 20:44:05 +0000

Annotate time series

This section explains how to create annotations in the Time series panel. To read more about annotations support in Grafana please refer to Annotations.

Add annotation

In the dashboard click on the Time series panel. A context menu will appear.
In the context menu click on Add annotation.
Add an annotation description and tags(optional).
Click save.

Alternatively, to add an annotation, Ctrl/Cmd+Click on the Time series panel and the Add annotation popover will appear

Add region annotation

In the dashboard Ctrl/Cmd+click and drag on the Time series panel.
Add an annotation description and tags(optional).
Click save.

Edit annotation

In the dashboard hover over an annotation indicator on the Time series panel.
Click on the pencil icon in the annotation tooltip.
Modify the description and/or tags.
Click save.

Delete annotation

In the dashboard hover over an annotation indicator on the Time series panel.
Click on the trash icon in the annotation tooltip.

Graph time series as bars

Fri, 03 Apr 2026 20:44:05 +0000

Graph time series as bars

This section explains how to use Time series field options to visualize time series data as bars and illustrates what the options do.

Create the panel

Add a panel. Select the Time series visualization.
In the Panel editor side pane, click Graph styles to expand it.
In Style, click Bars.

Style the bars

Use the following field settings to refine your visualization.

Some field options will not affect the visualization until you click outside of the field option box you are editing or press Enter.

Bar alignment

Set the position of the bar relative to a data point. In the examples below, Show points is set to Always to make it easier to see the difference this setting makes. The points do not change; the bars change in relationship to the points.

Before

The bar is drawn before the point. The point is placed on the trailing corner of the bar.

Center

The bar is drawn around the point. The point is placed in the center of the bar. This is the default.

After

The bar is drawn after the point. The point is placed on the leading corner of the bar.

Line width

Set the thickness of the lines bar outlines, from 0 to 10 pixels. Fill opacity is set to 10 in the examples below.

Line thickness set to 1:

Line thickness set to 7:

Fill opacity

Set the opacity of the bar fill, from 0 to 100 percent. In the examples below, the Line width is set to 1.

Fill opacity set to 20:

Fill opacity set to 95:

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. In the screenshots below, Fill opacity is set to 50.

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.

Scheme

In this mode the whole bar will use a color gradient defined by your Color scheme option. There is more information on this option in Graph and color scheme.

Show points

Choose when the points should be shown on the graph

Auto

Grafana automatically decides whether or not to show the points depending on the density of the data. If the density is low, then points are shown.

Always

Show the points no matter how dense the data set is. This example uses a Line width of 1. If the line width is thicker than the point size, then the line obscures the points.

Point size

Set the size of the points, from 1 to 40 pixels in diameter.

Point size set to 6:

Point size set to 20:

Never

Never show the points.

Stack series

For full instructions, refer to Graph stacked time series.

Axis

For full instructions, refer to Change axis display.

Bar graph examples

Below are some bar graph examples to give you ideas.

Hue gradient

Graph time series as lines

Fri, 03 Apr 2026 20:44:05 +0000

Graph time series as lines

This section explains how to use Time series field options to visualize time series data as lines and illustrates what the options do.

Create the panel

Add a panel. Select the Time series visualization.
In the Panel editor side pane, click Graph styles to expand it.
In Style, click Lines.

Style the lines

Use the following field settings to refine your visualization.

Some field options will not affect the visualization until you click outside of the field option box you are editing or press Enter.

Line interpolation

Choose how Grafana interpolates the series line. The screenshots below show the same data displayed with different line interpolations.

Linear

Points are joined by straight lines.

Smooth

Points are joined by curved lines resulting in smooth transitions between points.

Step before

The line is displayed as steps between points. Points are rendered at the end of the step.

Step after

Line is displayed as steps between points. Points are rendered at the beginning of the step.

Line width

Set the thickness of the series line, from 0 to 10 pixels.

Line thickness set to 1:

Line thickness set to 7:

Fill opacity

Set the opacity of the series fill, from 0 to 100 percent.

Fill opacity set to 20:

Fill opacity set to 95:

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. In the screenshots below, Fill opacity is set to 50.

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.

Scheme

In this mode the whole line will use a color gradient defined by your Color scheme option. There is more information on this option in Graph and color scheme.

Line style

Set the style of the line. To change the color, use the standard color scheme field option.

Line style appearance is influenced by the Line width and Fill opacity settings. In the screenshots below, Line width is set to 3 and Fill opacity is set to 20.

Solid

Display solid line. This is the default setting.

Dash

Display a dashed line. When you choose this option, a list appears so that you can select the length and gap (length, gap) for the line dashes.

Dash spacing set to 10, 10 (default):

Dash spacing set to 10, 30:

Dash spacing set to 40, 10:

Dots

Display dotted lines. When you choose this option, a list appears so that you can select the gap (length = 0, gap) for the dot spacing.

Dot spacing set to 0, 10 (default):

Dot spacing set to 0, 30:

Connect null values

Choose how null values (gaps in the data) are displayed on the graph. Null values can be connected to form a continuous line or, optionally, set a threshold above which gaps in the data should no longer be connected.

Never

Time series data points with gaps in the the data are never connected.

Always

Time series data points with gaps in the the data are always connected.

Threshold

A threshold can be set above which gaps in the data should no longer be connected. This can be useful when the connected gaps in the data are of a known size and/or within a known range and gaps outside this range should no longer be connected.

Show points

Choose when the points should be shown on the graph.

Auto

Grafana automatically decides whether or not to show the points depending on the density of the data. If the density is low, then points are shown.

Always

Show the points no matter how dense the data set is. This example uses a Line width of 1 and 50 data points. If the line width is thicker than the point size, then the line obscures the points.

Point size

Set the size of the points, from 1 to 40 pixels in diameter.

Point size set to 4:

Point size set to 10:

Never

Never show the points.

Stack series

For full instructions, refer to Graph stacked time series.

Axis

For full instructions, refer to Change axis display.

Fill below to

This option is only available as in the Overrides tab.

Fill the area between two series. On the Overrides tab:

Select the fields to fill below.
In Add override property, select Fill below to.
Select the series that you want the fill to stop at.

A-series filled below to B-series:

Line graph examples

Below are some line graph examples to give you ideas.

Various line styles

This is a graph with different line styles and colors applied to each series and zero fill.

Interpolation modes examples

Fill below example

This graph shows three series: Min, Max, and Value. The Min and Max series have Line width set to 0. Max has a Fill below to override set to Min, which fills the area between Max and Min with the Max line color.

Graph time series as points

Fri, 03 Apr 2026 20:44:05 +0000

Graph time series as points

This section explains how to use Time series field options to visualize time series data as points and illustrates what the options do.

Create the panel

Add a panel. Select the Time series visualization.
In the Panel editor side pane, click Graph styles to expand it.
In Style, click Points.

Style the points

Use the following field settings to refine your visualization.

Some field options will not affect the visualization until you click outside of the field option box you are editing or press Enter.

Point size

Set the size of the points, from 1 to 40 pixels in diameter.

Point size set to 6:

Point size set to 20:

Point size set to 35:

Stack series

For full instructions, refer to Graph stacked time series.

Axis

For full instructions, refer to Change axis display.

Change axis display

Fri, 03 Apr 2026 20:44:05 +0000

Change axis display

Note: This is a beta feature. Time series panel is going to replace the Graph panel in the future releases.

This section explains how to use Time series field options to control the display of axes in the visualization and illustrates what the axis options do.

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

Select 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 the Y-axes.

Label

Set a Y-axis text label.

If you have more than one Y-axis, then you can give assign different labels in the Override tab.

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 whose axes types are different 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, refer to Standard field options.

Scale

Set the scale to use for the Y-axis values.

Linear

Use scale divided into equal parts.

Logarithmic

Use a logarithmic scale. When this option is chosen, a list appears where you can choose binary (base 2) or common (base 10) logarithmic scale.

Axis examples

For examples, refer to the Grafana Play dashboard New Features in v7.4.

Graph and color schemes

Fri, 03 Apr 2026 20:44:05 +0000

Graph and color schemes

Under Standard options you find the Color scheme option. This option controls series are assigned their color.

Classic palette

The most common setup is to use the Classic palette for graphs. This scheme will automatically assign a color for each field or series based on it’s order. So if the order of a field change in your query the color will also change. You can manually configure a color for a specific field using an override rule.

Single color

Use this mode to set a specific color. You can also click the colored line icon next to each series in the Legend to open the color picker. This will automatically create new override that sets the color scheme to single color and the selected color.

By value color schemes

Note: Starting in v8.1 the Time series panel now supports by value color schemes like From thresholds of the gradient color schemes.

If you select a by value color scheme like From thresholds (by value) or Green-Yellow-Red (by value) another option named Color series by will show up. This option control what 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 this mode is enabled the whole line or bar gets 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 will change as they cross the thresholds defined.

If you have enabled bars mode it would look like this:

Gradient color schemes

If you have a selected a Color scheme like Green-Yellow-Red (by value) then it would look like this:

If you have enabled bars mode it would look like this:

Graph stacked time series

Fri, 03 Apr 2026 20:44:05 +0000

Graph stacked time series

This section explains how to use Time series panel field options to control the stacking of the series and illustrates what the stacking options do.

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. You can read more on why stacking may be not the best approach here: Stacked Area Graphs Are Not Your Friend.

Use the following field settings to configure your series stacking.

Some field options will not affect the visualization until you click outside of the field option box you are editing or press Enter.

Stack series

Turn series stacking on or off.

Off

Turn off series stacking. A series will share the same space in the visualization.

Normal

Enable stacking series on top of each other.

Stack series in groups

The stacking group option is only available as an override.

For more information about creating field overrides, refer to Field overrides.

Stack series in the same group. In the Overrides section:

Create a field override for Stack series option.
Click on Normal stacking mode.
Name the stacking group you want the series to appear in. The stacking group name option is only available when creating an override.

A-series and B-series stacked in group A, C-series, and D-series stacked in group B: