Skip to main content

    XYChart-RectSeries

    A RectSeries is a type of shape that provides a two-dimensional representation of data in which various values are represented by colors. This shape excels at allowing the user to compare values and observe patterns. One of the most popular uses this shape can be used for are HeatMaps.

    OverviewProperties

    Import​

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

    Use cases​

    A Rect series visualizes data as colored rectangles and is used to create charts like heatmaps, Gantt charts, or availability charts.

    Heatmap​

    CodeSandbox

    Gantt chart​

    CodeSandbox

    Availability chart​

    CodeSandbox

    Usage​

    To display a RectSeries, add the XYChart.RectSeries subcomponent within the XYChart component.

    This series requires five essential properties that will function as data accessors:

    • x0Accessor: indicates what data should be used as the start point for the x-axis baseline.
    • x1Accessor: indicates what data should be used as the end point for the x-axis baseline. Not required for categorical-type axes.
    • y0Accessor: indicates what data should be used as the start point for the y-axis baseline.
    • y1Accessor: indicates what data should be used as the end point for the y-axis baseline. Not required for categorical-type axes.
    • valueAccessor: indicates what data should be used as the tile value, which represents the intensity of the tile color.

    These accessors will extract the specified data from the provided object array via the data property. It’s crucial to note that the accessors are used to construct each cell’s dimensions; incorrect specification of any accessor will result in an inability to generate the correct rect series.

    Additionally, a XYChart.RectSeries will need to be assigned to at least one x-axis and one y-axis via valid xAxisId and yAxisId properties. For a more detailed explanation of the axis configuration, please refer to the XYChart docs.

    CodeSandbox

    The XYChart.RectSeries subcomponent includes some other optional properties: data, colorPalette, valueAccessorLabel, valueUnit, valueFormatter, valueMin, valueMax and actions.

    The data and colorPalette properties can be used to overwrite the XYChart component for a specific series.

    Data​

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

    Coloring​

    By using the colorPalette property in the RectSeries you can overwrite the coloring from the XYChart component. For more information about how to use coloring in the chart you can refer to the XYChart docs.

    Overlapping tiles​

    The sides of the tiles can be defined freely, in case of overlapping amongst two or more tiles, these will transparent through one another and show a mixed color.

    CodeSandbox

    Min and max values​

    By setting the valueMin and valueMax properties, you can establish boundaries for all values. Values outside these boundaries will display a default color. Note that string values are not affected by these boundaries and will display their original color.

    CodeSandbox

    Value Label​

    Given the valueAccessor depends on how the data is named and structured, the final result can be complicated to understand for the user. By using the property valueAccessorLabel any name can be set in order to identify the value.

    CodeSandbox

    Unit and formatter​

    You can apply a unit and formatter to the data extracted by the valueAccessor via valueUnit and valueFormatter as long as it is of type number. If the data is of type string then these properties will be disregarded.

    CodeSandbox
    CodeSandbox

    Series actions​

    A series action is a creator-defined interaction with a given data point in the chart. Basic interactions include copying a series name and inspecting the underlying data of a data point. Series actions support both synchronous and asynchronous callbacks. In order to enable chart interactions, the ChartSeriesAction subcomponent needs to be appended within the XYChart. More subcomponents can be added within this component, for instance ChartSeriesAction.Item, where you can provide a custom action that will appear in the legend menu. That action can execute any custom logic in its onSelect callback or get disabled via a disabled prop. Intents could be added as part of the series action as well with ChartSeriesAction.Intent.

    CodeSandbox
    CodeSandbox
    Still have questions?
    Find answers in the Dynatrace Community