XYChart-LineSeries

A line series chart connects data points with a continuous line, making it easy to observe changes or trends over 2-variable paired data, helping to reveal dependencies or correlations (or both). The chart allows for assigning the variables to both X and Y-axis.

OverviewProperties

Import

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

Use cases

A Line Series Chart in an XY Chart is a tool used for visualizing trends, relationships, and patterns in data over a continuous range, such as time or numerical values.

Usage

To display a Line Series, add the XYChart.LineSeries subcomponent within the XYChart component.

This series requires five essential properties that will function as data accessors:

• x0Accessor: indicates what data should be used as the start point for the x-axis baseline.
• x1Accessor: indicates what data should be used as the end point for the x-axis baseline. It can be used for all types of axes, except for categorical ones.
• y0Accessor: indicates what data should be used as the start point for the y-axis baseline.
• y1Accessor: indicates what data should be used as the end point for the y-axis baseline. It can be used for all types of axes, except for categorical ones.
• seriesIdAccessor: specifies which data should be used as the unique identifier for each series. This identifier will be used to group data points belonging to the same series, allowing multiple series per slot.
• nameAccessor: indicates what data should be used as the name of the series.

These accessors will extract the specified data from the provided object array via the data property. It’s crucial to note that the accessors are used to position the data points in the 2-dimensional space; incorrect specification of any accessor will result in an inability to generate the LineSeries correctly.

Additionally, a XYChart.LineSeries will need to be assigned to at least one x-axis and one y-axis via valid xAxisId and yAxisId properties. For a more detailed explanation of the axis configuration, please refer to the XYChart docs.

CodeSandbox

The XYChart.LineSeries subcomponent includes some other optional properties: data, colorPalette, color, actions, pointsDisplay and curve.

The data, colorPalette and color properties can be used to overwrite the XYChart component for a specific series.

Data

The data provided to the LineSeries 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 LineSeries 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.LineSeries 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.

Color

The color property allows the user to set any desired color for the lines of a specific series.

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

Points Display

The pointsDisplay prop allows you to customize when data points are shown on the line: 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

Series curve

You can select the curve shape of the LineSeries 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