Skip to main content
Mapagam

Configuring Time Series Panels

1. Setting Graph Style

Property Values Description
graphMode "line", "bar", "area" Defines the visual representation of the time series data
fillOpacity 0 to 100 Controls the opacity of the area fill under the graph line
lineWidth 0 to 10 Thickness of the graph line in pixels
pointSize 0 to 20 Size of data point markers (if enabled)
showPoints true, false Whether to display data point markers on the graph

Example: Configuring Graph Style

{
  "graphMode": "area",
  "fillOpacity": 70,
  "lineWidth": 2,
  "pointSize": 5,
  "showPoints": true
}

2. Configuring X-Axis

Property Description Values Notes
axis.label Label for the X-axis string Display text for the axis
axis.show Toggle visibility of X-axis true | false Default: true
axis.scale Scale type for X-axis linear | logarithmic | time Default: linear
axis.min Minimum value for X-axis number Overrides auto-scaling
axis.max Maximum value for X-axis number Overrides auto-scaling
axis.tickInterval Interval between ticks on X-axis number Set in seconds for time series

Example: X-Axis Configuration

{
  "xaxis": {
    "label": "Time",
    "show": true,
    "scale": "time",
    "min": 0,
    "max": 100,
    "tickInterval": 30
  }
}

3. Configuring Y-Axis

Property Description Values Notes
format Unit format for Y-axis values short, bytes, bits, percent, ms, s, none Default is short
logBase Logarithmic base for Y-axis scale 1, 2, 10 Set to 0 for linear scale
min Minimum value for Y-axis number Can be set to null for auto-scale
max Maximum value for Y-axis number Can be set to null for auto-scale
show Whether to display Y-axis true, false Default is true
label Label text for Y-axis string Optional custom label

Example: Y-Axis Configuration

{
  "yaxis": {
    "format": "short",
    "logBase": 10,
    "min": 0,
    "max": 100,
    "show": true,
    "label": "CPU Usage (%)"
  }
}

4. Setting Legend Options

Option Values Description
legend.show true | false Controls whether the legend is displayed.
legend.position right | bottom | left | top Determines the position of the legend relative to the panel.
legend.calcs Array of strings Specifies which calculations to display in the legend (e.g., ["mean"], ["min", "max"]).
legend.values true | false Whether to show calculated values in the legend.
legend.width Number (pixels) Width of the legend when positioned on the right or left.
legend.height Number (pixels) Height of the legend when positioned on the top or bottom.

Example: Configuring Legend Position and Calculations

{
  "legend": {
    "show": true,
    "position": "right",
    "calcs": ["mean", "max"],
    "values": true
  }
}

5. Configuring Tooltip

Property Description Values Notes
tooltip.mode Defines how tooltip behaves single, multi, none Default: single
tooltip.sort Sorts series in tooltip none, asc, desc Default: none
tooltip.shared Enables shared tooltip across panels true, false Default: false

Example: Tooltip Configuration

{
  "tooltip": {
    "mode": "multi",
    "sort": "desc",
    "shared": true
  }
}
Note: The shared tooltip option requires panels to be in the same row or have matching time ranges.

6. Setting Color Schemes

Color Scheme Description Usage Notes
Color Palette Predefined set of colors for visualizing data series Applied to time series in panel settings Default is grafana palette
Color Mode How colors are assigned to data series Options: fixed, continuous, threshold Used for heatmaps and continuous data
Series Color Manual override for individual series color Set via Series overrides Overrides global color settings

Example: Applying Color Palette

{
  "color": {
    "mode": "continuous",
    "seriesBy": "last"
  },
  "thresholds": [
    {
      "value": 0,
      "color": "green"
    },
    {
      "value": 50,
      "color": "yellow"
    },
    {
      "value": 100,
      "color": "red"
    }
  ]
}
Note: Color schemes can be customized via Variables or Color palettes in the dashboard settings.
Warning: Ensure color contrast for accessibility when using custom color schemes.

7. Configuring Fill Opacity

Property Values Description
fillOpacity 0 to 100 Controls the opacity of the filled area under the time series line. Higher values mean more opaque.

Example: Setting Fill Opacity in a Panel

{
  "targets": [
    {
      "expr": "rate(http_requests_total[5m])",
      "legendFormat": "HTTP Requests"
    }
  ],
  "options": {
    "fillOpacity": 30
  }
}

8. Setting Line Width and Style

Property Values Description
seriesOverrides object Override settings for specific series in the panel
lineWidth number Width of the line in pixels (default: 1)
fillOpacity number Opacity of the area fill (0 to 100, default: 0)
lineInterpolation linear | smooth | stepBefore | stepAfter Interpolation method for line rendering

Example: Configuring Line Width and Style

{
  "seriesOverrides": [
    {
      "alias": "/.*CPU.*/",
      "lineWidth": 3,
      "fillOpacity": 20,
      "lineInterpolation": "smooth"
    }
  ]
}

9. Using Stacking Mode

Option Values Description
stacking.mode none, normal, percent Determines how series are stacked in the panel. none for no stacking, normal for absolute stacking, percent for percentage-based stacking.
stacking.threshold 0 to 100 Threshold for stacking in percentage mode. Values below this threshold are not stacked.

Example: Stacking Mode Configuration

{
  "stacking": {
    "mode": "normal",
    "threshold": 0
  }
}
Note: Stacking mode affects how multiple time series are rendered in the same panel. It is particularly useful for visualizing cumulative data or comparing relative contributions.

10. Configuring Null Value Handling

Option Values Description
nullPointMode connected, null, hidden Determines how null values are displayed in the time series panel. connected connects points across nulls, null renders a gap, hidden skips rendering nulls entirely.
fillOpacity 0 to 100 Controls the opacity of the area fill under the time series line. Default is 0 (no fill). Higher values increase visibility of the area.

Example: Setting nullPointMode to connected

{
  "nullPointMode": "connected",
  "fillOpacity": 20
}
Note: When nullPointMode is set to connected, Grafana interpolates between data points, which can lead to misleading visualizations if the actual data is sparse or irregular.

11. Using Overrides

Property Description Values Notes
matcher.id Identifier for the override matcher field, dashboard, series Used to define the scope of the override
matcher.options Options for the matcher Object with properties based on matcher type Required for each override rule
properties Properties to override Array of property objects Each object contains id and value

Example: Override Series Color

{
  "matcher": {
    "id": "series",
    "options": {
      "seriesName": "CPU Usage"
    }
  },
  "properties": [
    {
      "id": "color",
      "value": "#ff0000"
    }
  ]
}

Example: Apply to All Panels

{
  "matcher": {
    "id": "dashboard",
    "options": {}
  },
  "properties": [
    {
      "id": "legend",
      "value": "hide"
    }
  ]
}

12. Setting Thresholds

Threshold Value Color Description
threshold1 50 #808080 Base threshold for normal state
threshold2 80 #FF7E00 Warning state threshold
threshold3 95 #E02F49 Critical state threshold

Example: Threshold Configuration in JSON

{
  "thresholds": [
    {
      "value": 50,
      "color": "#808080"
    },
    {
      "value": 80,
      "color": "#FF7E00"
    },
    {
      "value": 95,
      "color": "#E02F49"
    }
  ]
}
Note: Thresholds can be adjusted dynamically in the panel editor to reflect current alerting needs.

Was this article helpful?

Related Cheat Sheets