AG Studio: Build dashboards using native components in web apps. Join us for a webinar on 28th July at 2pm UTC+1 Register

series[type=' range-area']

type required 'range-area'
Configuration for the Range Area Series.
xKey required DatumKey
The key to use to retrieve x-values from the data.
yLowKey required DatumKey
The key to use to retrieve y-low-values from the data.
yHighKey required DatumKey
The key to use to retrieve y-high-values from the data.
id string default: auto-generated value
Primary identifier for the series. This is provided as `seriesId` in user callbacks to differentiate multiple series. Auto-generated ids are subject to future change without warning, if your callbacks need to vary behaviour by series please supply your own unique `id` value.
context ContextDefault
Context object to use in callbacks.
data DatumDefault[]
The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.
visible boolean
Whether to display the series.
cursor string
The cursor to use for hovered markers. This config is identical to the CSS `cursor` property.
selection AgSelectionOptions
Configuration for data selection.
nodeClickRange InteractionRange
Range from a node that a click triggers the listener.
showInLegend boolean
Whether to include the series in the legend.
listeners AgSeriesListeners
A map of event names to event listeners.
xKeyAxis string default: 'x'
The key of the x-axis to which this series is bound.
yKeyAxis string default: 'y'
The key of the y-axis to which this series is bound.
xName string
A human-readable description of the x-values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
yLowName string
A human-readable description of the y-low-values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
yHighName string
A human-readable description of the y-high-values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
yName string
A human-readable description of the y-values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
legendItemName string
Human-readable description of the y-values. If supplied, matching items with the same value will be toggled together.
marker AgRangeAreaMarker
Configuration for the markers used in the series.
stroke AgCssColorOrRef
The colour for the stroke. A colour string, or a theme-colour reference object.
strokeWidth PixelSize
The width of the stroke in pixels.
strokeOpacity Opacity
The opacity of the stroke colour.
lineDash PixelSize[]
An array specifying the length in pixels of alternating dashes and gaps for the stroke.
lineDashOffset PixelSize
The initial offset of the dashed line in pixels.
item AgRangeAreaSeriesItemThemeableOptions
Configuration used for distinct styling of the low and high lines.
interpolation AgInterpolationType
Configuration for the line used in the series.
label AgRangeAreaSeriesLabelOptions
Configuration for the labels shown on top of data points.
shadow AgDropShadowOptions
Configuration for the shadow used behind the series items.
tooltip AgSeriesTooltip
Series-specific tooltip configuration.
connectMissingData boolean
Set to `true` to connect across missing data points.
styler Styler
Function used to return formatting for entire series, based on the given parameters.
highlight AgMultiSeriesHighlightOptions
Configuration for highlighting when a series or legend item is hovered over.
segmentation AgSeriesSegmentation
Configuration for styling series as separate segments.
invertedStyle AgRangeAreaSeriesInvertedStyle
Style options for the fill of areas where the `yHigh` line is below the `yLow` line.
fill AgColorType
The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill.
fillOpacity Opacity
The opacity of the fill colour.
showInMiniChart boolean
Whether to include the series in the Mini Chart.