Skip to main content

Area

Basic Configuration

component.tsx
import { VisXYContainer, VisArea } from '@unovis/react'

function Component(props) {
const data: DataRecord[] = props.data
const x = (d: DataRecord) => d.x
const y = (d: DataRecord) => d.y

return (
<VisXYContainer data={data}>
<VisArea x={x} y={y}/>
</VisXYContainer>
)
}
Loading...

Curve Types

Using the curveType: CurveType property you can set various curve type options. For example:

<VisArea curveType="basis" x={x} y={y}/>
Loading...

Learn more about configurable curves from D3's documentation

Color

Setting color for a single Area component is simple, you can achieve that just by setting the color property of the component to a hex string.

<VisArea color="#19cb9a" x={x} y={y}/>
Loading...

Stacked Areas

Y Accessors

Area can accept an array of y accessors to display stacked areas from your provided data.

Note: It is important that an array of accessors or provided, not a single accessor which returns an array. For example, if you wanted to generate a chart with three areas of random data:

Loading...
/* ✅ Do this */
const y = [
() => Math.random(),
() => Math.random(),
() => Math.random(),
]

/* ⛔ Not this */
const y = d => [Math.random(), Math.random(), Math.random()]

Multiple Colors

If you want to configure multiple colors for your Area component, you'll have to supply a single accessor. A common configuration is to utilize the data's index:

component.tsx
import { VisXYContainer, VisArea } from '@unovis/react'

function Component(props) {
const data: DataRecord[] = props.data
const x = (d: DataRecord) => d.x
const y = [
(d: DataRecord) => d.y,
(d: DataRecord) => d.y1,
(d: DataRecord) => d.y2
]
const color = (d: DataRecord, i: number) => ['red','green','blue'][i]

return (
<VisXYContainer data={data}>
<VisArea x={x} y={y} color={color}/>
</VisXYContainer>
)
}
Loading...

Dealing with small values

If your data has small or zero values leading to some parts of the area to become invisible, you can force those area segments to have 1px height despite their actual value by setting minHeight1Px to true. This can be useful if you want to visually emphasize that the data behind the chart is defined but just very small.

<VisArea minHeight1Px={true} x={x} y={y}/>
Loading...

Events

The Area component supports the following events:

import { Area } from '@unovis/ts'

events = [Area.selectors.area]: {
click: (data: DataRecord[]) => {},
mouseover: (data: DataRecord[]) => {},
mouseleave: (data: DataRecord[]) => {}
}
<VisArea x={x} y={y} events={events}/>

CSS Variables

The Area component supports additional styling via CSS variables that you can define for your visualization container. For example:

styles.css
.custom-area {
--vis-area-fill-opacity: 0.5;
--vis-area-hover-fill-opacity: 1;
--vis-area-stroke-width: 1px;
Loading...
Supported CSS variables and their default values
--vis-area-cursor: default;
--vis-area-fill-opacity: 1;
--vis-area-stroke-color: none;
--vis-area-stroke-width: 0px;
--vis-area-stroke-dasharray: none;
--vis-area-stroke-opacity: 1;
--vis-area-hover-fill-opacity: none;
--vis-area-hover-stroke-width: none;
 
/* Dark Theme */
--vis-dark-area-stroke-color: none;

Component Props

NameTypeDescription
* required property