Skip to main content

HoneycombChart

The HoneycombChart is used to display data in a grid using various shapes for data points.A honeycomb chart organizes and presents data in a visually structured way, making it easier for viewers to analyze and interpret information.

Import

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

Use cases

The HoneycombChart can compare the values of its nodes based in a string (category) or in a number. For category-based hive a data should be provided as a string, array of strings or objects that contain value prop as a string. For numeric hives a data prop expects either a number, an array of numbers or objects with numeric value prop.

CodeSandbox

Shapes

The nodes in the honeycomb can be set in 3 different shapes: 'circle', 'square' and 'hexagon'. ('hexagon' being the default one).

CodeSandbox

Chart Size

By default, the chart will use all the available container size up to a maximum height of 300 pixels. The height of the chart can be changed by providing a numeric value to the height prop which will be treated as amount of pixels.

CodeSandbox

Loading

The loading prop is a boolean value that can be passed to the HoneycombChart 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

Legend

The purpose of the legend is to provide additional identifying information for the chart, without the need to interact with it.

Position

By default, the position of the legend of the HoneycombChart is set automatically. This option prioritizes the legend placement 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 using legend's position prop.

CodeSandbox

Toolbar

Download data as CSV

The HoneycombChart component supports downloading data in CSV format using a toolbar button. To enable this feature, a ChartToolbar subcomponent with ChartToolbar.DownloadData inside of it must be provided to the HoneycombChart component. On click of the download button, raw data will be downloaded as a CSV file.

CodeSandbox

Placement

The placement prop can be used to set the initial placement of the toolbar within the chart. Available options are: 'top-right', 'top-left', 'bottom-right', 'bottom-left'. Being 'top-right' the default value.

CodeSandbox

Colors

The HoneycombChart provides a set of predefined color palettes that can be used out of the box to provide more appealing visualisations. See Charts Colors for more info.

Coloring a numerical dataset with predefined color scheme

The HoneycombChart is able to assign colors to the nodes based on the value distribution of each node compared to the total. Domain will be divided in an amount of 'groups' equal to the quantity of colors in the palette. Each node will receive the color of the group that fits its value.

CodeSandbox

Coloring a numerical dataset using custom ranges

To define custom ranges and colors an array of objects of ColoredRange type should be passed to the colorScheme prop.

CodeSandbox

Coloring a categorical dataset with predefined color scheme

If a categorical dataset is used, then the value of each node should be a string. A predefined color palette can be used to map the categories in the value of the node to the specific predefined color.

CodeSandbox

Coloring a categorical dataset using custom categories and color scheme

If none of the predefined color palettes fit your case, the HoneycombChart is able to process a key-value object as colorScheme taking each key as the category label and the value as its assigned color.

CodeSandbox

States

If the app experiences any issue like an error or an empty dataset, two mechanisms exist to deal with those situations in a graceful way.

Error state

Default

In case of an error thrown inside the chart, a predefined error message will be shown.

CodeSandbox
Custom

If you prefer to create your own error screen to preserve styles and information shown, you can create your own error state presenter.

CodeSandbox

Empty State

Default

When no data is provided to the chart, a predefined empty state message will be displayed.

CodeSandbox
Custom

An error message can be customized using HoneycombChart.ErrorState subcomponent.

CodeSandbox

User actions

A user action is a creator-defined interaction with a given node in the hive. Basic interactions include copying the node name and inspecting the underlying data of it. In order to enable user actions, the ChartSeriesAction subcomponent needs to be appended within the HoneycombChart. More subcomponents can be added within this component, for instance the ChartSeriesAction.Item, where custom logic can be applied.

CodeSandbox

Formatter and Unit

The HoneycombChart provides a way to format the values of the chart nodes. The formatter prop at the root component can be used to format the values shown in the tooltip on node hover. The unit prop can be used to add a unit to the values of the nodes. When both props are specified the formatter will be applied with the provided unit (formatting options objects are an exception). When no formatter is provided a default formatter with value abbreviation will be used.

Note that the formatter and the unit props will be applied only to numeric data.

CodeSandbox

Legend formatter

It's possible to format the ticks of the range legend items independently of the tooltip value. For that the formatter prop on the HoneycombChart.Legend subcomponent can be used. When no legend formatter is provided, the root component's formatter will be applied.

CodeSandbox

Props

HoneycombChartProps

Signature:

export declare type HoneycombChartProps = | ;

HoneycombChart.Legend

To configure the legend, add HoneycombChart.Legend to the honeycomb chart.

HoneycombLegendProps

NameTypeDefaultDescription
position?
'auto'The legend position relative to the chart
formatter?
| <, >
-Custom formatter for the range legend ticks

HoneycombChart.EmptyState

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

EmptyStateProp

NameTypeDefaultDescription
children
.
-

HoneycombChart.ErrorState

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

ErrorStateProps

NameTypeDefaultDescription
children
. | ((errorMessage: ) => .)
-
Still have questions?
Find answers in the Dynatrace Community