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. When a number is specified, it's treated as pixels, otherwise a valid width string is expected.
`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.
`__downloadDataCallback?`	() =>		Callback invoked when a download is triggered. Receives the CSV string so the caller can drive the actual download (e.g. for migration purposes). When provided, the default browser download is skipped.

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: , series?: ) =>	Custom actions to be shown in the tooltip and legend. For tooltip, information about the selected datapoint is displayed. For legend, the first parameter returns the first datapoint of the series and the second parameter returns the series object.

XYChart.DotSeries

XYChart.DotSeries provides a slot for defining a DotSeries.

XYChartDotSeriesProps

Signature:

export declare type Props =  &  & {
    /**
     * 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 and legend.
     * For tooltip, information about the selected datapoint is displayed.
     * For legend, the first parameter returns the first datapoint of the series and the second parameter returns the series object.
     */
    actions?: (datapoint: , series?: ) => ;
    /**
     * 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 Props = <, > &  & {
    /**
     * 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 and legend.
     * For tooltip, information about the selected datapoint is displayed.
     * For legend, the first parameter returns the first datapoint of the series and the second parameter returns the series object.
     */
    actions?: (datapoint: , series?: ) => ;
    /**
     * 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.Tooltip

XYChart.Tooltip provides a slot for defining a custom tooltip in your chart.

XYChartTooltipProps

Signature:

export declare type XYChartTooltipProps = {
    /** Hides the tooltip entirely without requiring a render function. */
    hidden?: ;
    /**
     * Render function receiving the tooltip payload. Return JSX to render a custom tooltip,
     * `` to hide the tooltip, or `` to fall back to the default tooltip.
     */
    children?: (tooltipPayload: ) => ;
    /**
     * Controls whether the tooltip displays a single datapoint or groups all bar datapoints
     * at the same x-axis position.
     * @defaultValue 
     * @internal
     */
    _variant?: ;
    /**
     * The tooltip items display mode.
     *
     * If this prop is ``, XYChart renders series names in single-line mode by default.
     * Set this prop to `` to render array-based series names on separate lines.
     * @defaultValue 
     */
    _seriesDisplayMode?: ;
};

Name	Type	Default	Description
`hidden?`			Hides the tooltip entirely without requiring a render function.
`children?`	(tooltipPayload: ) =>		Render function receiving the tooltip payload. Return JSX to render a custom tooltip, `null` to hide the tooltip, or `undefined` to fall back to the default tooltip.
`_variant?`		`'single'`	Controls whether the tooltip displays a single datapoint or groups all bar datapoints at the same x-axis position.
`_seriesDisplayMode?`		`'single-line'`	The tooltip items display mode. If this prop is `undefined`, XYChart renders series names in single-line mode by default. Set this prop to `'multi-line'` to render array-based series names on separate lines.

XYChart.Annotations

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

XYChartAnnotationsProps

extends

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.
`textOverflow?`		`'expand'`	Controls whether annotation text may expand beyond its track boundary or is truncated.

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
`symbolColorAccessor?`			Indicates what data field from the data object should be used as the symbol 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

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

XYChartTooltipProps

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

XYChart.Annotations

XYChartAnnotations.Track

XYChartAnnotations.Marker

XYChartAnnotations.Tooltip