Timeseries

Timeseries panel - line/bar charts over time.

The primary visualization for time-based metrics.

Usage

<Timeseries
  title="Request Rate"
  unit="reqps"
  stack="normal"
  legend={{ placement: 'right', calcs: ['mean', 'max'] }}
>
  sum(rate(http_requests_total[$__rate_interval]))
</Timeseries>

Example 2

// With axis and tooltip configuration
<Timeseries
  title="Latency"
  unit="ms"
  axisPlacement="left"
  axisLabel="Response Time"
  tooltip={{ mode: 'multi', sort: 'desc' }}
  showPoints="always"
  pointSize={4}
>
  histogram_quantile(0.99, rate(http_duration_bucket[$__rate_interval]))
</Timeseries>

Props

Prop	Type	Default	Description
`unit`	`Unit`	-	Display unit
`decimals`	`number`	-	Decimal places
`min`	`number`	-	Minimum axis value
`max`	`number`	-	Maximum axis value
`softMin`	`number`	-	Soft minimum (can be exceeded by data)
`softMax`	`number`	-	Soft maximum (can be exceeded by data)
`thresholds`	`ThresholdSpec`	-	Threshold configuration
`baseColor`	`'green' \| 'transparent' \| 'text' \| string`	green	Base threshold color
`thresholdStyle`	`ThresholdStyle`	-	Threshold display style
`stack`	`'normal' \| 'percent' \| boolean`	-	Stacking mode
`fill`	`number`	-	Fill opacity (0-100)
`gradientMode`	`GraphGradientMode`	-	Gradient mode for fill area
`lineWidth`	`number`	-	Line width
`drawStyle`	`'line' \| 'bars' \| 'points'`	-	Drawing style
`lineInterpolation`	`LineInterpolation`	-	Line interpolation mode
`centerZero`	`boolean`	-	Center axis at zero
`legend`	`LegendConfig \| LegendPlacement`	-	Legend configuration
`colorMode`	`ColorMode`	-	Color mode
`overrides`	`OverrideConfig[]`	-	Field overrides for query-specific styling
`transformations`	`Transformation[]`	-	Data transformations
`tooltip`	`VizTooltipOptions \| TooltipDisplayMode`	-	Tooltip configuration
`showPoints`	`VisibilityMode`	-	Show points on lines
`pointSize`	`number`	-	Point size in pixels
`barAlignment`	`BarAlignment`	-	Bar alignment relative to time point (when drawStyle is ‘bars’)
`barMaxWidth`	`number`	-	Maximum bar width in pixels
`lineStyle`	`LineStyleFill \| LineStyleConfig`	-	Line style (solid, dash, dot, or custom config)
`spanNulls`	`boolean \| number`	-	Connect null values (true, false, or threshold in ms)
`axisPlacement`	`AxisPlacement`	-	Axis placement
`axisLabel`	`string`	-	Axis label text
`axisWidth`	`number`	-	Axis width in pixels
`axisGridShow`	`boolean`	-	Show axis grid lines
`axisBorderShow`	`boolean`	-	Show axis border
`axisColorMode`	`AxisColorMode`	-	Axis color mode
`scaleDistribution`	`ScaleDistributionConfig`	-	Scale distribution configuration

Inherits from BasePanelProps