XYChart-BarSeries

The BarSeries renders rectangular bars to visualize values across categories, numbers or time. It supports simple, grouped (clustered), and stacked layouts, making it ideal for comparisons, totals, and distributions. The BarSeries works with numeric, time, and categorical axes, and handles a wide range of data types—perfect for Bar, Column, and Stacked charts.

OverviewProperties

Import

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

Overview

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

• Primary Accessor: Defines the bar's position along the main axis (e.g., x0Accessor for vertical bars).
• Growth Accessor: Defines the bar's length or height (e.g., y1Accessor for vertical bars).
• Primary Axis: The axis associated with the primary accessor.
• Growth Axis: The axis associated with the growth accessor.
• Base Bucket: A discrete slot or category on the primary axis where one or more bars are drawn. For a categorical axis, each category is a bucket.

A Bar series displays values as rectangular bars spreading from a configurable base X or Y axis. It supports three variants: single, stacked, and grouped, and works with categorical, numerical, time, and log axes.

• Single: one bar per base bucket, shown as a vertical or horizontal bar.
• Stacked: bars from multiple series accumulate along the growth axis. Supported only when the growth accessor is numerical, time, or log.
• Grouped: multiple series appear side-by-side within each base bucket for direct comparison. Supported only when the primary accessor is categorical.
• Range bars: a bar that spans between two values. Available in the grouped and single variants.
• Full rectangles: manual placement using four accessors (x0Accessor, x1Accessor, y0Accessor, y1Accessor) to draw arbitrary rectangles; useful for waterfall-like layouts (single variant only).

CodeSandbox

Usage

Add XYChart.BarSeries inside XYChart. Provide accessors to describe the bar’s position (primary accessor) and growth (growth accessor). Orientation is inferred from the accessor pattern, no orientation prop required.

Required accessors depend on the pattern:

• Vertical single bars: x0Accessor (position) + y1Accessor (height)
• Horizontal single bars: y0Accessor (position) + x1Accessor (width)
• Vertical floating bars: x0Accessor + y0Accessor + y1Accessor
• Horizontal floating bars: y0Accessor + x0Accessor + x1Accessor
• Vertical range bars: x0Accessor + x1Accessor + y1Accessor
• Horizontal range bars: y0Accessor + y1Accessor + x1Accessor
• Full rectangle (manual placement): x0Accessor + x1Accessor + y0Accessor + y1Accessor (single variant only)

Additionally:

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

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

Variants

Single

This type refers to independent bars, which support all valid accessor patterns. Specific details for the accessors structure can be found below:

• Automatic direction:
  • Vertical bars: x0Accessor + y1Accessor
  • Horizontal bars: y0Accessor + x1Accessor
• Waterfall-like rectangles:
  • Use variant="single" with x0Accessor + x1Accessor + y0Accessor + y1Accessor to manually position rectangles. Stacking and grouping are not supported for full rectangles.
• Note:
  • Multiple floating range bars per category can overlap in variant="single". Use variant="group" with x0Accessor + y0Accessor + y1Accessor to show them side-by-side.

Examples:

CodeSandbox

CodeSandbox

CodeSandbox

Stack

Data can be displayed stacked by setting the BarSeries variant to stack. Bars stack at the same primary accessor by using the seriesIdAccessor to group the data. Stack behaviour is supported for all axes except categorical-type if they belong to a growth axis.

These accessors patterns are valid for stacking:

• Vertical stacked bars: x0Accessor + y1Accessor
• Horizontal stacked bars: y0Accessor + x1Accessor
• Stacked bars with X-range span: x0Accessor + x1Accessor + y1Accessor (stacks vertically, grouped by the X range)
• Stacked bars with Y-range span: y0Accessor + y1Accessor + x1Accessor (stacks horizontally, grouped by the Y range)

The following accessor patterns are not supported for stacking:

• Floating range bars (Y-range only: y0Accessor + y1Accessor)
• Full rectangles (x0Accessor + x1Accessor + y0Accessor + y1Accessor)

Examples:

CodeSandbox

CodeSandbox

Group

Data can also be displayed grouped by setting the BarSeries variant to group, where the bars will be positioned side-by-side within the same bucket. In order to group, a categorical primary axis is required (the axis used for x0Accessor in vertical bars or y0Accessor in horizontal bars). If the primary axis is numerical, time, or log (i.e., not categorical), the series will fall back to variant="single".

These accessors patterns are valid for grouping:

• Vertical grouped bars: x0Accessor + y1Accessor
• Vertical grouped range bars: x0Accessor + y0Accessor + y1Accessor
• Horizontal grouped bars: y0Accessor + x1Accessor
• Horizontal grouped range bars: y0Accessor + x0Accessor + x1Accessor

The following accessor patterns are not supported for grouping:

• X-range with growth (x0Accessor + x1Accessor + y1Accessor)
• Y-range with growth (y0Accessor + y1Accessor + x1Accessor)
• Full rectangles (x0Accessor + x1Accessor + y0Accessor + y1Accessor)

Examples:

CodeSandbox

CodeSandbox

Axis compatibility

The rendering behavior of BarSeries variants is tightly coupled with the axis types they are assigned to. To ensure the chart renders as expected, please note the following requirements:

• Grouping requires a categorical primary axis (e.g., categorical X-axis for vertical bars).
• Stacking works with numerical, time, and log axes. A categorical growth axis cannot stack.
• Unsupported combinations automatically fall back to supported behavior, typically variant="single", and log a warning.

Data

The data provided to the BarSeries component via the data property will be used in combination with the accessors of each series.

Coloring

By using the color and colorPalette properties in the BarSeries you can overwrite the coloring from the XYChart component. These two properties are mutually exclusive. For more information about how to use coloring in the chart you can refer to the XYChart docs.

The XYChart.BarSeries subcomponent supports functions for the color and colorPalette props to customize coloring per series in case more than one series is presented in the same slot.

CodeSandbox

Color Rules

ColorRules are advanced coloring tools for the chart, allowing users to apply conditional coloring based on data values. See more details in the XYChart docs.

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.

CodeSandbox