XYChart

The XYChart encompasses various types of charts that utilize both x-axis and y-axis for data representation, designed to visually display and analyze data that involve two numerical variables.

Overview Properties

XYChartProps

extends,

Name	Type	Default	Description
`data`	[]		Data object for the xy chart.
`height?`	\|	`300px`	Chart height. When a number is specified, it's treated as pixels, otherwise a valid height string is expected.
`width?`		`100%`	Chart width. A number in pixels is expected. Otherwise, it will take the full width of the container
`colorPalette?`		`'blue'`	Color palette for the xy chart.
`loading?`		`false`	Show the loading indicator when truthy.
`truncationMode?`		`'middle'`	Truncation mode to be used as start, middle or end, and applied to all the parts that truncate text.

XYChart.XAxis

To configure the x-axis, add XYChart.XAxis to the xy chart.

XYChartXAxisProps

Signature:

export declare type XYChartXAxisProps =  & {
    /**
     * Whether the tick labels are displayed in a  or  layout.
     * @defaultValue 
     */
    tickLabelLayout?: ;
    /** The position for the xy chart x-axis */
    position: ;
    /** If true, the zoom interaction will be disabled
     * @defaultValue false
     */
    disableZoom?: ;
    /** If true, the pan interaction will be disabled
     * @defaultValue false
     */
    disablePan?: ;
    /** Sets the new zoom and pan domain boundaries, overwriting the ones that come from the data */
    initialZoom?: [, ] | [, ];
    /** Sets the domain of the axis to start at the specified values */
    currentZoom?: [, ] | [, ];
    /** If true, the chart will be able to zoom and pan outside the set boundaries
     * @defaultValue false
     */
    infiniteZoom?: ;
    /** Handler triggered when there is a change on the time domain caused by a zoom action */
    onZoomChange?: ;
};

XYChart.YAxis

To configure the y-axis, add XYChart.YAxis to the xy chart.

XYChartYAxisProps

Signature:

export declare type XYChartYAxisProps =  & {
    position: ;
};

XYChart.Legend

To configure the legend, add XYChart.Legend to the xy chart.

XYChartChartLegendProps

Signature:

export declare type XYChartChart = ;

XYChart.Toolbar

To customise the toolbar, add XYChart.Toolbar to the xy chart.

XYChartToolbarProps

Signature:

export declare type XYChartToolbarProps = <, > & {
    /** Decides if the toolbar is visible or hidden
     * @defaultValue false
     */
    hidden?: ;
};

XYChart.EmptyState

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

EmptyStateProp

Name	Type	Default	Description
`children`

XYChart.ErrorState

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

ErrorStateProps

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

XYChart.RectSeries

XYChart.RectSeries provides a slot for defining a RectSeries.

XYChartRectSeriesProps

extends

Name	Type	Description
`x1Accessor?`		Accessor function to retrieve the data for the x1.
`y1Accessor?`		Accessor function to retrieve the data for the y1.
`valueAccessor`		Accessor function to retrieve the data for the value.
`valueAccessorLabel?`		A custom label to overwrite the valueAccessor when naming the value
`valueMin?`		If specified, all values coming from the valueAccessor that are under this number will display a default color. Doesn't apply for category values.
`valueMax?`		If specified, all values coming from the valueAccessor that are above this number will display a default color. Doesn't apply for category values.
`valueFormatter?`	\| <, >	If specified, the value coming from the valueAccessor will be formatted with given formatter options. Doesn't apply for string values.
`valueUnit?`		A custom unit to be displayed in the Legend for number values
`actions?`	(datapoint: ) =>	Custom actions to be shown in the tooltip

XYChart.DotSeries

XYChart.DotSeries provides a slot for defining a DotSeries.

XYChartDotSeriesProps

Signature:

export declare type XYChartDotSeriesProps =  &  & {
    /**
     * Series name.
     * @deprecated - Use nameAccessor instead. This key will be removed in a future release.
     */
    name?: ;
    /**
     * Accessor function to retrieve the data for the x1.
     */
    x1Accessor?: ;
    /**
     * Accessor function to retrieve the data for the y1.
     */
    y1Accessor?: ;
    /**
     * Series ID accessor.
     */
    seriesIdAccessor?: ;
    /**
     * Series name accessor.
     */
    nameAccessor?: ;
    /**
     * Custom actions to be shown in the tooltip
     */
    actions?: (datapoint: ) => ;
    /**
     * Determines the visual appearance of the dot, such as , , , or .
     * @defaultValue 
     */
    shape?: ;
};

XYChart.LineSeries

XYChart.LineSeries provides a slot for defining a LineSeries.

XYChartLineSeriesProps

Signature:

export declare type XYChartLineSeriesProps = <, > &  & {
    /**
     * Accessor function to retrieve the data for the x1.
     */
    x1Accessor?: ;
    /**
     * Accessor function to retrieve the data for the y1.
     */
    y1Accessor?: ;
    /**
     * Series ID accessor.
     */
    seriesIdAccessor: ;
    /**
     * Series name accessor.
     */
    nameAccessor: ;
    /**
     * Custom actions to be shown in the tooltip
     */
    actions?: (datapoint: ) => ;
    /**
     * Show the datapoints always,  or auto based on a threshold amount.
     * @defaultValue 
     */
    pointsDisplay?: ;
    /**
     * Line interpolation curve type
     */
    curve?: ;
};

XYChart.ThresholdIndicator

XYChart.ThresholdIndicator provides a slot for defining thresholds

XYChartThresholdIndicatorProps

Signature:

export declare type XYChartThresholdIndicatorProps = | ;

XYChart.Select

XYChart.Select provides a slot that enables functionality for selecting a specific area in the chart.

SelectProps

Name	Type	Default	Description
`actions?`	(selectedSeries: [], selectionDomain: [, ]) => \| <>		Custom actions handler

XYChart.Intent

XYChart.Intent provides a slot to set intents that will appear in the toolbar.

IntentProps

Signature:

export declare type IntentProps = | ;

XYChart.ColorRule

XYChart.ColorRule provides a slot to apply conditional coloring to your chart series based on their values or names.

ColorRuleProps

Signature:

export declare type ColorRuleProps = {
    valueAccessor?: ;
    comparator: ;
    matchValue: ;
} & ;

XYChart.Annotations

XYChart.Annotations provides a slot for defining annotations in the chart.

XYChartAnnotationsProps

Name	Type	Default	Description
`data`	[]		Data object for the xy chart.
`xAxisId`			Unique Id required to attach the annotations to its x-axis.
`showLabels?`		`false`	Flag for showing/hiding track labels
`fixedTracks?`		`3`	Amount of tracks visible without scrolling.
`annotationsActions?`			Custom annotations actions on entry selection.

XYChartAnnotations.Track

XYChartAnnotations.Track provides a slot for defining a track in the XYChart.Annotations.

XYChartAnnotationsMarkerProps

Name	Type	Default	Description
`startAccessor`			Indicates what data field from the data object should be used as the start point for the markers
`endAccessor`			Indicates what data field from the data object should be used as the end point of the markers
`trackByAccessor`			Indicates what data field from the data object should be used to link this marker to a track. It must contain the unique id of a track.
`descriptionAccessor?`			Indicates what data field from the data object should be used as the description of each marker
`colorAccessor?`		`Colors.Charts.Categorical.Color01.Default`	Indicates what data field from the data object should be used as the color of each marker
`titleAccessor?`			Indicates what data field from the data object should be used as the title of each marker
`symbol?`	\| ((t: ) => )		letter/emoji/icon/glyph or Unicode character
`indicatorsDisplay?`	\| ((t: ) => )		Defines the display behaviour of marker's indicators of a particular track
`hidden?`	\| ((t: ) => )		Flag to hide a marker
`priority?`	\| ((t: ) => )		Priority of annotation in case of overlapping. The higher the number, the higher priority

XYChartAnnotations.Marker

XYChartAnnotations.Marker provides a slot for defining a marker in the XYChart.Annotations.

XYChartAnnotationsTrackProps

Name	Type	Description
`trackIdAccessor`		track Unique ID
`labelAccessor?`		Indicates what data field from the data object should be used as the label for each track
`colorAccessor?`		Indicates what data field from the data object should be used as the color of each track
`symbol?`	\| ((t: ) => )	letter/emoji/icon/glyph or Unicode character
`indicatorsDisplay?`	\| ((t: ) => )	Defines the display behaviour of marker's indicators of the entire track
`hidden?`	\| ((t: ) => )	Flag to hide a track

XYChartAnnotations.Tooltip

XYChartAnnotations.Tooltip provides a slot for defining a custom tooltip for the annotations.

AnnotationsTooltipProps

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

Still have questions?

Find answers in the Dynatrace Community

XYChart

XYChartProps

XYChart.XAxis​

XYChartXAxisProps

Signature:

XYChart.YAxis​

XYChartYAxisProps

Signature:

XYChart.Legend​

XYChartChartLegendProps

Signature:

XYChart.Toolbar​

XYChartToolbarProps

Signature:

XYChart.EmptyState​

EmptyStateProp

XYChart.ErrorState​

ErrorStateProps

XYChart.RectSeries​

XYChartRectSeriesProps

XYChart.DotSeries​

XYChartDotSeriesProps

Signature:

XYChart.LineSeries​

XYChartLineSeriesProps

Signature:

XYChart.ThresholdIndicator​

XYChartThresholdIndicatorProps

Signature:

XYChart.Select​

SelectProps

XYChart.Intent​

IntentProps

Signature:

XYChart.ColorRule​

ColorRuleProps

Signature:

XYChart.Annotations​

XYChartAnnotationsProps

XYChartAnnotations.Track​

XYChartAnnotationsMarkerProps

XYChartAnnotations.Marker​

XYChartAnnotationsTrackProps

XYChartAnnotations.Tooltip​

AnnotationsTooltipProps

XYChart.XAxis

XYChart.YAxis

XYChart.Legend

XYChart.Toolbar

XYChart.EmptyState

XYChart.ErrorState

XYChart.RectSeries

XYChart.DotSeries

XYChart.LineSeries

XYChart.ThresholdIndicator

XYChart.Select

XYChart.Intent

XYChart.ColorRule

XYChart.Annotations

XYChartAnnotations.Track

XYChartAnnotations.Marker

XYChartAnnotations.Tooltip