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.

Import

import { XYChart } from '@dynatrace/strato-components-preview/charts';

Use cases

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. Presently, it supports the Heatmap chart type.

CodeSandbox

Data

The data provided to the XYChart component via the data property will be used in combination with the accessors of each series.

The series subcomponent has an optional data property that can be used to provide specific data for that series.

Truncation mode

The purpose of truncation is to gracefully handle extra long labels within data visualization components. By changing the value of the truncationMode property, you have control over where truncation is applied within charts. By default, the truncation is applied to the middle of labels with the use of an ellipsis. Truncation can, however, be changed to instead be applied at the start or end of data visualization component labels.

Coloring

The XYChart's colorPalette property supports predefined color palettes, custom color palettes, as well as custom color ranges. See coloring for more details.

CodeSandbox

Custom color palettes

The custom color palettes can be useful to apply to data of type string.

CodeSandbox

Custom color ranges

The custom color ranges can be useful to apply to data of type number.

CodeSandbox

Size

By default, the chart will use all the available space up to a maximum height of 300 pixels and a width of 100% of the container. This maximum height and width can be changed by providing a value in the height and width properties of the XYChart.

CodeSandbox

Axes

To display a series in the plot, it is necessary to include both XYChart.XAxis and XYChart.YAxis subcomponents, which will require an id property that matches the xAxisId and yAxisId used in a given series.

You will also need to define the type property, used to determine the axis scale type, which can be numerical, time or categorical, as well as the position to indicate where the axis should be placed, which can be bottom, left or right. You can add as many axes as needed to the chart but only the first axis of each position will be visually displayed.

Mirrored Y-axes

There is an additional position option for the XYChart.YAxis named both that when used will display a mirrored y-axis.

CodeSandbox

Axis label

The label property can be used to include a text label for a given axis.

CodeSandbox

Reversed Axis

The reversed property inverts the scale on the chosen axis.

CodeSandbox

Axis visibility

The hidden property can be used to visually hide the axis.

CodeSandbox

Axis layout and size

The tickLabelLayout property gives you the option to choose between a horizontal (default) or vertical layout for the axis tick values.

The tickLabelMaxSize TBD.

Axis min and max

The min and max properties define the axis boundaries. By default, the auto setting is applied to both min and max properties, which automatically calculates the axis scale's minimum and maximum values from the chart data, akin to data-min and data-max, and establishes the baseline of the Y-axis at zero. A custom number or date can also be provided to set custom axis boundaries.

CodeSandbox

Axis unit and formatter

With the unit property you can provide a unit that will be displayed along the data in the chart. The formatter will allow you to format data of type date or number.

CodeSandbox

Legend

The purpose of the legend is to provide additional identifying information for the chart, without needing to interact with the legend directly. If there are multiple series in the chart, only the first series will be reflected on the legend.

Visibility

The legend of the XYChart will be displayed by default, but can be optionally hidden by setting the hidden property to true on the XYChart.Legend subcomponent.

Position

By default, the position of the legend of the XYChart is set automatically to the right of the chart area. When the chart width is reduced, the legend is repositioned to the area beneath the chart. It is also possible to explicitly set the chart's legend position to right or bottom with the position prop.

CodeSandbox

Legend ratio

By default, the legend occupies 25% of the container width, in the case where the legend is positioned on the right and 25% of the container height if the legend position is on the bottom.

It is possible to override the default legend ratio by setting a custom percentage value for the ratio prop. The expected value is in the range of 5-80. Values out of expected ranges will roll back to the default legend ratio.

CodeSandbox

Empty state

The EmptyState subcomponent serves as a fallback when there is no data available to display in a chart. Its purpose is to provide a user-friendly way of informing the user about the current situation. When there is no data, a fallback UI is displayed occupying the full width and height of the chart, along with a default message.

CodeSandbox

Error state

The ErrorState subcomponent is responsible for handling errors in a graceful manner, ultimately improving the overall user experience. Its primary function is to catch any errors that may occur with the data and display a fallback UI instead of crashing the entire application. The fallback UI occupies the full width and height of the chart, ensuring that users are still provided with a meaningful interface even in the presence of errors.

CodeSandbox

Loading state

The loading property is a boolean value that can be passed to the XYChart component to control its loading state. When the loading prop is set to true, the loading indicator appears in the middle of the chart plot to inform the user that the component is currently fetching or processing data. When the loading prop is set to false, the component should display its regular content.

CodeSandbox

Download data as CSV

The XYChart component supports the download of data in CSV format via the downloadData function in the XYChartRef.

CodeSandbox

Styling

The XYChart also accepts custom styling, which can be set using the properties className and style as in a regular html element.

Still have questions?
Find answers in the Dynatrace Community