AnnotationsChart

The AnnotationsChart is a visualization tool designed to highlight significant events or data points on a timeline or other graph types. It allows the user to annotate specific moments with labels or markers, providing additional context or insights directly within the chart. This chart can be used standalone or integrated with other chart types, such HistogramChart or TimeseriesChart, to enrich the data presentation by drawing attention to each event.

OverviewProperties

AnnotationsChartProps

Signature:

export declare type AnnotationsChartProps = & & (<> | );

AnnotationsActionsHandler

Signature:

export declare type AnnotationsActionsHandler = (data?: ) => | ;

AnnotationsActionsPayload

Name	Type	Default	Description
start	|	-	Selected marker start
end?	|	-	Selected marker end
title?		-	Selected marker title
description?		-	Selected marker description
symbol?		-	Selected marker symbol

AnnotationsChart.Track

AnnotationsTrackProps

Name	Type	Default	Description
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?		false	Specify whether a track should hide.

AnnotationsChart.Marker

AnnotationsMarkerProps

Signature:

export declare type AnnotationsMarkerProps = & ( | );

BaseMarkerProps

Name	Type	Default	Description
data?		-
title?		-	The marker title
symbol?		-	The marker symbol, which can be a letter, an emoji, an icon or a Unicode character
description?		-	The marker description
color?		Colors.Charts.Categorical.Color01.Default	The marker background, supporting any valid CSS color
priority?		0	The 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?		false	Specify whether a particular marker should hide.

TimeMarkerProps

Name	Type	Default	Description
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

Name	Type	Default	Description
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

Name	Type	Default	Description
children	.	-

AnnotationsChart.ErrorState

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

ErrorStateProps

Name	Type	Default	Description
children	. | ((errorMessage: ) => .)	-

AnnotationsChart.XAxis

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

XAxisProps

Signature:

export declare type XAxisProps = & ( | | );

BaseXAxisProps

Name	Type	Default	Description
label?		-	Defines x-axis label
hidden?		false	Defines whether x-axis is showed or not

TimeXAxisProps

Name	Type	Default	Description
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

TimestampXAxisProps

Name	Type	Default	Description
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		-	If the value is set to time, it enables data casting from timestamps to Date objects

NumericalXAxisProps

Name	Type	Default	Description
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. If the value is set to time, it enables data casting from timestamps to Date objects
formatter?	| <, >	-	Defines x-axis tick formatting
unit?		-	Defines x-axis unit

AnnotationsChart.Tooltip

AnnotationsChart.Tooltip provides a slot to configure the Tooltip of the chart.

AnnotationsTooltipProps

Name	Type	Default	Description
hidden?		false	Defines whether tooltip show be hidden or not
children?		-	The ChoroplethLayer tooltip handler template

AnnotationsTooltipHandler

Signature:

export declare type AnnotationsTooltipHandler = (hoveredMarkers: [], closeMarkers: [][]) => .;

AnnotationsTooltipItem

Name	Type	Default	Description
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
color		-	The marker background color
title?		-	The maker title
description?		-	The marker description
symbol?		-	The marker symbol