DotSeries

The DotSeries is a type of shape that provides a two-dimensional representation of data in which pairs of values are shown. This shape turns out great for representing groups of values spread in classes. It can be an essential component when creating charts such as Scatter and Dot Plots.

OverviewProperties

Import

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

Use cases

To display a Dot Series, add the XYChart.DotSeries subcomponent within the XYChart component.

This series requires three essential properties that will function as data accessors and identifier of the series:

• x0Accessor: indicates the X value of the data point within the X-domain.
• y0Accessor: indicates the Y value of the data point within the Y-domain.
• name: indicates the name of the series.

These accessors support numerical, categorical and time data. When using the time data, a single accessor is enough for timestamps, but this series also supports timeframes. If using a timeframe, a second pair of accessors is needed in order to define the position of the point. In this case the series will position the data point in the average time of both end points of the timeframe.

• x1Accessor: indicates the X end point value for a data point timeframe.
• y1Accessor: indicates the Y end point value for a data point timeframe.

It's relevant to comment that these two accessors have no utility when using non-temporal data.

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 DotSeries correctly.

Additionally, a XYChart.DotSeries 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.DotSeries subcomponent includes some other optional properties: data, colorPalette, color and actions.

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

Data

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

Color

The color property allows the user to set any desired color as the color of the dots of a specific series.

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. In order to enable chart interactions, the ChartSeriesAction subcomponent needs to be included 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 tooltip menu. That action can execute any custom logic in its onSelect callback or get disabled via a disabled prop.

CodeSandbox