Skip to main content

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.

XYChartProps

extends,
NameTypeDefaultDescription
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?: ; position: ; };

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

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

EmptyStateProp

NameTypeDefaultDescription
children
.
-

XYChart.ErrorState

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

ErrorStateProps

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

XYChart.HeatmapSeries

XYChart.HeatmapSeries provides a slot for defining a HeatmapSeries.

XYChartHeatmapSeriesProps

NameTypeDefaultDescription
data?
[]
-

Data object for the xy chart.

xAxisId
-

Unique Id required to attach the series to its x-axis.

yAxisId
-

Unique Id required to attach the series to its y-axis.

x0Accessor
-

Accessor function to retrieve the data for the x0.

x1Accessor?
-

Accessor function to retrieve the data for the x1.

y0Accessor
-

Accessor function to retrieve the data for the y0.

y1Accessor?
-

Accessor function to retrieve the data for the y1.

valueAccessor
-

Accessor function to retrieve the data for the value.

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

colorPalette?
'blue'

Color palette for the series.

actions?
(datapoint: ) =>
-

Custom actions to be shown in the tooltip

Still have questions?
Find answers in the Dynatrace Community