Skip to main content

    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

    NameTypeDefaultDescription
    start
    |
    		-

    Selected marker start

    end?
    |
    		-

    Selected marker end

    title?
    		-

    Selected marker title

    description?
    		-

    Selected marker description

    symbol?
    		-

    Selected marker symbol

    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?
    		false

    Specify whether a track should hide.

    AnnotationsChart.Marker​

    AnnotationsMarkerProps

    Signature:

    export declare type AnnotationsMarkerProps = & ( | );

    BaseMarkerProps

    NameTypeDefaultDescription
    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

    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?
    		false

    Defines 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

    TimestampXAxisProps

    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
    		-

    If the value is set to time, it enables data casting from timestamps to Date objects

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

    NameTypeDefaultDescription
    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

    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

    color
    		-

    The marker background color

    title?
    		-

    The maker title

    description?
    		-

    The marker description

    symbol?
    		-

    The marker symbol

    Still have questions?
    Find answers in the Dynatrace Community