Skip to main content

Single Container

Basic configuration​

Single Container is a basic container for a Unovis component. It is designed to hold one visualization component and an (optional) Tooltip. Just wrap the component of your choice in Single Container to render it.

note

For XY Components, instead use the XY Container, which designed to handle 2D data with X and Y coordinates.

Width and Height​

By default, Single Container will try to fit within the bounds of its parent HTML element. If the parent height isn't defined, the default height of 300px will be applied. You can also explicitly define the container's size with the width and height properties, which accepts numeric values.

const width = 200;
const height = 100;

Margin​

You can set Single Container's margin to control the spacing between the container and adjacent elements. The margin property accepts a value of type Sizing, where each value represents the corresponding margin size in pixels.

Sizing​

type Sizing = {
  top: number;
  bottom: number;
  left: number;
  right: number;
}

Note that the chart's size is affected by this property. Notice how the following chart is affected after setting the margin accordingly.

const margin = { left: 100, right: 100 }

Before:​

Loading...

After:​

Loading...

Sizing​

The sizing property determines whether components should fit into the container or the container should expand to fit to the component's size. Currently, only Sankey supports the sizing option. By default, all components will fit to the size of Single Container.

SVG Defs​

You can use the svgDefs property to define custom fill patterns for your components. See our Tips and Tricks for details.

Component Props​

NameTypeDescription
* required property