Skip to main content

AnnotationsChart

Import

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

Use cases

Size

By default, the chart will use all the available container size up to the maximum height required to show all the tracks. This maximum height can be changed by providing a value in the height prop of the AnnotationsChart. You can set any css value to the height and if a number is passed to this prop without any unit specified, it will be treated as px.

CodeSandbox

AnnotationsChart.Track

Tracks in the AnnotationsChart are horizontal bands that group related markers. Each track can have a label, which is displayed on the left side, and can represent a specific category of data.

The track is able to provide prop values for the markers inside of it, like color and symbol, which will be used as default values in case they are not provided on the marker level.

AnnotationsChart.Marker

Markers are the individual data points or events within a track, which can represent a single value or a range. Each marker can have a title, symbol, and description to provide more context.

When the symbol is provided, it will be shown as marker content. As a fallback, if no symbol is provided, the title will be chosen as content.

In the case no symbol or title are provided, no content will be shown.

Chart states

Error state

The ErrorState subcomponent is responsible for handling errors in a graceful manner, ultimately improving the overall user experience. Its primary function is to catch any errors that may occur with the data and display a fallback UI instead of crashing the entire application.

In case of an error thrown inside the chart, a predefined error message will be shown.

CodeSandbox

If you prefer to create your own error screen to preserve styles and information shown, you can create your own error state presenter.

CodeSandbox

EmptyState

The EmptyState subcomponent serves as a fallback when there is no data available to display in a chart. Its purpose is to provide a user-friendly way of informing the user about the current situation.

When no data is provided to the chart, a predefined empty state message will be displayed.

CodeSandbox

An empty state message can be customized using AnnotationsChart.ErrorState subcomponent.

CodeSandbox

Loading

The AnnotationsChart is able to show the default loading indicator by setting the loading prop to true.

CodeSandbox
CodeSandbox

X-axis

The AnnotationsChart component provides a AnnotationsChart.XAxis subcomponent to configure chart's X-Axis and scale. The X-Axis is visible by default. To hide it the hidden prop should be set to true.

CodeSandbox

To customize chart's min and max scale values, the min and max props can be used. By default, chart's scale min and max are calculated from the data. Be aware, that customizing the scale values may filter out some markers that are outside of custom scale range.

CodeSandbox

Numerical x-axis

The numerical x-axis has additional configuration options, like scale, formatter and unit.

CodeSandbox

The scale option can be used to choose between linear and logarithmic scale. Take into account that the logarithmic scale just supports positive numbers (excluding 0), so if negative or zero values are provided, the scale will fall back to linear.

CodeSandbox

The formatter or unit props can be used to customise the formatting of the x-axis ticks and the tooltip numerical data. If both properties are present, the formatter will take precedence over unit.

CodeSandbox

Props

AnnotationsChartProps

extends
NameTypeDefaultDescription
showLabels?
falseSpecify whether track labels should show
annotationsActions?
(annotation: & ) => . |
-Custom annotations actions on entry selection.
loading?
falseShow the loading indicator when truly.
height?
|
300pxThe height of the chart. If a number is passed, it will be treated as px.

AnnotationsChart.Track

AnnotationsTrackProps

NameTypeDefaultDescription
color?
-Defines the marker background for all the markers inside a track, supporting any valid CSS color. It will be overridden by any particular marker that has color prop defined.
label?
-The track label
symbol?
-Defines the marker symbol for all the markers inside a track, which can be a letter, an emoji, an icon or a Unicode character It will be overridden by any particular marker that has symbol prop defined.
hidden?
falseSpecify whether a track should hide.

AnnotationsChart.Marker

AnnotationsMarkerProps

Signature:

export declare type AnnotationsMarkerProps = & ( | );

BaseMarkerProps

NameTypeDefaultDescription
data
-The marker data, which will be used to show information in the marker and in the tooltip
color?
Colors.Charts.Categorical.Color01.DefaultThe marker background, supporting any valid CSS color
priority?
0The priority of the marker, which can be used to specify which marker will be rendered on top of the other, in case of overlapping, and also will specify the order of the tooltip items in case of having the same range/value.
hidden?
falseSpecify whether a particular marker should hide.

TimeMarkerProps

NameTypeDefaultDescription
start
-Starting point of the marker
end?
-Ending point of the marker. If not set, the marker will be a timestamp instead of a timeframe

NumericalMarkerProps

NameTypeDefaultDescription
start
-Starting point of the marker
end?
-Ending point of the marker. If not set, the marker will represent a value instead of a range

AnnotationsChart.EmptyState

AnnotationsChart.EmptyState provides a slot where the Empty state wrapper can be set.

EmptyStateProp

NameTypeDefaultDescription
children
.
-

AnnotationsChart.ErrorState

AnnotationsChart.ErrorState provides a slot where the Error state wrapper can be set.

ErrorStateProps

NameTypeDefaultDescription
children
. | ((errorMessage: ) => .)
-

AnnotationsChart.XAxis

AnnotationsChart.XAxis provides a slot to configure the X-Axis of the chart.

XAxisProps

Signature:

export declare type XAxisProps = & ( | );

BaseXAxisProps

NameTypeDefaultDescription
label?
-Defines x-axis label
hidden?
falseDefines whether x-axis is showed or not

TimeXAxisProps

NameTypeDefaultDescription
min?
-Defines minimum time x-axis domain. As a default, it takes the value from the data
max?
-Defines maximum time x-axis domain. As a default, it takes the value from the data

NumericalXAxisProps

NameTypeDefaultDescription
min?
-Defines minimum numerical x-axis domain. As a default, it takes the value from the data
max?
-Defines maximum numerical x-axis domain. As a default, it takes the value from the data
type?
|
'linear'Defines x-axis scale type
formatter?
| <, >
-Defines x-axis tick formatting
unit?
-Defines x-axis unit
Still have questions?
Find answers in the Dynatrace Community