XYChart-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.
Import
import { XYChart } from '@dynatrace/strato-components-preview/charts';
Use cases
A Dot series visualizes data as individual dots and is used to create charts like scatter plots, strip plots, opposite diagrams, or dot charts.
Scatter plot
Strip plot
Opposite diagram
Usage
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.
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.
Shapes
The shape property on DotSeries allows you to display different geometric
shapes for each data point in the series. In addition to the default circle,
you can now choose between square, diamond, and triangle shapes.
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.