XYChart-AreaSeries

An area series chart fills the region between data points and a baseline, making it effective for visualizing magnitudes, trends, and cumulative values over a continuous range. It combines line-based trend visibility with filled regions to emphasize volume, helping to reveal patterns and comparisons across series.

OverviewProperties

Import

import { XYChart } from '@dynatrace/strato-components/charts';

Overview

To better understand the accessor patterns, here are some common terms used in this documentation:

• Primary Accessor: Defines the area's position along the main axis (e.g., x0Accessor for vertical areas).
• Growth Accessor: Defines the area's upper boundary (e.g., y1Accessor for vertical areas).
• Baseline Accessor: Defines the area's lower boundary (e.g., y0Accessor for vertical bands). When omitted, the area fills from the growth value down to the axis.
• Primary Axis: The axis associated with the primary accessor.
• Growth Axis: The axis associated with the growth accessor.

CodeSandbox

Area vs Band

The AreaSeries can render in two visual modes depending on the accessor pattern:

• Area: When only a growth accessor is provided (no baseline accessor), the filled region extends from the data line down to the axis origin. This is the standard area chart.
• Band: When both a growth accessor and a baseline accessor are provided (e.g., y0Accessor and y1Accessor), the filled region spans between the two values. This is useful for confidence intervals, min-max ranges, or tolerance bands.

The following example shows the same data rendered as an area (no baseline) and as a band (with a baseline). When y0Accessor is omitted the filled region extends to the axis; when it is provided the fill spans between y0 and y1.

CodeSandbox

Usage

Add XYChart.AreaSeries inside XYChart. Provide accessors to describe the area's position (primary accessor) and upper boundary (growth accessor). Orientation is inferred from the accessor pattern.

Required accessors depend on the pattern:

• Vertical area: x0Accessor (position) + y1Accessor (height)
• Horizontal area: y0Accessor (position) + x1Accessor (width)
• Vertical band: x0Accessor + y0Accessor + y1Accessor
• Horizontal band: y0Accessor + x0Accessor + x1Accessor
• Vertical area with x-range (timeframe): x0Accessor + x1Accessor + y1Accessor
• Horizontal area with y-range (timeframe): y0Accessor + y1Accessor + x1Accessor

Additionally:

• seriesIdAccessor: groups datapoints into series (enables multiple series in one AreaSeries slot)
• nameAccessor: series label for legends and tooltips

The XYChart.AreaSeries subcomponent also includes the optional properties: data, color, actions, pointsDisplay and curve.

Assign the series to axes via xAxisId and yAxisId. See XYChart docs for axis configuration.

Stacking

When multiple series share the same growth axis (numerical, time, or log), the AreaSeries automatically stacks them. Each area's filled region starts where the previous one ends.

CodeSandbox

Data

The data property can be used to overwrite the XYChart component for a specific series.

Custom Tooltip

The XYChart component supports custom tooltips via the XYChart.CustomTooltip subcomponent. This allows you to fully control the content and layout of tooltips for different series types.

Wrap your custom rendering logic in XYChart.CustomTooltip and use the provided payload to determine which series is being hovered. You can return any JSX, or null to hide the tooltip for a specific series. If you return undefined, the default tooltip will be used.

CodeSandbox

Points Display

The pointsDisplay prop allows you to customize when data points are shown on the area: never hides all points, always displays all points, and auto (default) shows points based on a ratio between density of points for the current series and the chart's width.

CodeSandbox

Value representation

Relative values indicate the proportion that a given dimension contributes to the total. The valueRepresentation prop on the axis can be used to switch between absolute and relative display.

• For single areas and band configurations, the relative value is based on the maximum absolute value within the series.

CodeSandbox

CodeSandbox

• For stacked areas, each area will scale relative to the total stack height at each point, so the full height represents 100%. In case of having positive and negative values, they are scaled together where 100% is the highest absolute value amongst the two parts.

CodeSandbox

Series curve

You can select the curve shape of the AreaSeries via the curve prop. The available options are linear where line joins will be straight (default option) or smooth for a more fluid curve.

CodeSandbox

Gap policy

The AreaSeries respects the gapPolicy set on a numerical or time axis. For time axes, gap policy defaults to gap. Three options are available:

• connect: interpolates across the gap, connecting consecutive data points regardless of the distance between them. This is the default behavior for numerical axes.
• gap: leaves the gap visible as a break in the area. This option is only available for time axes, where it is the default behavior.
• threshold: defines a maximum distance between consecutive data points. When the distance is within the threshold, data points are connected; otherwise, a gap is displayed. For time axes, the threshold is specified as a duration string (e.g., '3h', '1d'). For numerical axes, the threshold is a number representing the maximum allowed distance between consecutive values.

CodeSandbox

For numerical axes, gapPolicy defaults to connect. Use the threshold option to introduce gaps when the distance between data points exceeds a specified value.

CodeSandbox

Series actions

A series action is a creator-defined interaction with a given data point in the chart. Basic interactions include copying a series name and inspecting the underlying data of a data point. Series actions support both synchronous and asynchronous callbacks. In order to enable chart interactions, the ChartSeriesAction subcomponent needs to be appended within the XYChart. More subcomponents can be added within this component, for instance ChartSeriesAction.Item, where you can provide a custom action that will appear in the legend menu. That action can execute any custom logic in its onSelect callback or get disabled via a disabled prop. Intents could be added as part of the series action as well with ChartSeriesAction.Intent.

If the datapoint belongs to a stack that has a categorical primary axis, the datapoint together with the other stacked datapoints in the same category will be returned.

CodeSandbox