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.

Sizing

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 and Padding

You can supply Single Container's margin and padding properties with values of the following type:

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

Where each number represents the number of pixels for the corresponding property.

Note: Size Conflicts

Setting margin will affect the chart's size. Notice how Sankey's width decreases when setting the horizontal margin, despite having the same configured width:

{ left: 100, right: 100 }

Before:

Loading...

After:

Loading...

sizing Property

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.

Color

Each component in a Single Container is colored through its own color accessor. By default, segments and elements cycle through the shared Unovis palette (--vis-color0, --vis-color1, …); pass a color accessor — a constant, an array of colors, or a function of the datum — to override it. For example, a Donut colored from a custom palette by segment:

To change the default palette or keep colors consistent across charts, see Color Palette and Synchronizing Colors Across Charts in the Theming guide — re-ranging UnovisColorScale there recolors these components' default palette too.

note

Unlike XY Container, the container-level colorFunction is consumed by XY components. Single-component visualizations such as Donut, Sankey, and ChordDiagram take their color from the component's own color accessor.

Tooltip

Pair the container with a Tooltip to show details on hover. Provide a triggers map that pairs a component's selector with a template function — as in the Basic Configuration example above:

import { Donut } from '@unovis/ts'

const triggers = { [Donut.selectors.segment]: d => `Value: ${d.data}` }

See the Tooltip docs for positioning, show/hide delays, and custom rendering.

Annotations

Use Annotations to overlay text labels and callouts — it works in a Single Container too. Pass an items array positioned with data coordinates or '%' strings:

Loading...

See the Annotations docs for the full set of AnnotationItem options.

Accessibility

Pass a descriptive ariaLabel to set an aria-label on the chart's container div, giving screen-reader users a text summary of the visualization:

<VisSingleContainer data={data} ariaLabel="Sales distribution by product category">
  {/* … */}
</VisSingleContainer>

SVG Defs

You can use the svgDefs property to inject custom SVG definitions — gradients, patterns, clip paths, and filters — that your component can reference by id. See our Theming guide, or the Gradient Fills and SVG Filters sections of the Theming guide, for details.

tip

For ready-made stripe, dot, and hatch fills you don't need custom defs — Donut, NestedDonut, Sankey, and ChordDiagram all accept a pattern accessor, and the theme-patterns class applies a default pattern set automatically. See Patterns in the Theming guide.

Component Props

Name	Type	Description
* required property