Skip to main content

Line

Basic Configuration

The Line component has been designed to work together with XY Container. The minimal Line configuration looks like:

component.tsx
import { VisXYContainer, VisLine } 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}>
<VisLine x={x} y={y}/>
</VisXYContainer>
)
}
Loading...

Multiple Lines

Line can also accept an array of y accessors to display multiple lines:

component.tsx
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
]

return (
<VisLine x={x} y={y}/>
)
}
Loading...

Line Appearance

Width

Specify the Line's width in pixels using the lineWidth property:

<VisLine lineWidth={5} x={x} y={y}/>
Loading...

Curve Type

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

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

Color

<VisLine color="#a611a5" x={x} y={y}/>
Loading...

For multiple lines:

If you want to set color for multiple lines at once, you'll have to define a colors array in your component and reference colors by index in the accessor function:

component.tsx
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}>
<VisLine x={x} y={y} color={color}/>
</VisXYContainer>
)
}
Loading...

Dashes

You can configure a dashed line with the lineDashArray property and a dash array. See SVG stroke-dasharray to learn more about this attribute.

<VisLine x={x} y={y} lineDashArray={[5]}/>
Loading...

For multiple lines:

Similar to mutlti-color configuration, you can provide an accessor function to customize each line.

Dealing with missing data

In the case of missing data (when the data values are undefined, NaN, '', etc ...), you can assign a fallback value for Line using the fallbackValue config property. The default value is undefined, which means that the line will break in the areas of no data and continue when the data appears again. If you set fallbackValue to null, the values will be treated as numerical 0 values and the line won't break; however if the whole dataset consists of only nulls, the line won't be displayed.

Consider the following example, where the dataset contains undefined values over in the following domain: 4 <= x <= 6

<VisLine fallbackValue={7} x={x} y={y}/>
Loading...

Events

import { Line } from '@unovis/ts`
...
const events = {
[Line.selectors.line]: {
mouseover: (data: DataRecord[]) => {},
mouseleave: (data: DataRecord[]) => {},
...
}
}
<VisLine x={x} y={y} events={events}/>
Loading...

CSS Variables

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

styles.css
.custom-line {
--vis-line-cursor: cell;
--vis-line-stroke-dasharray: 55 15;
--vis-line-stroke-dashoffset: 0;
}
Loading...
Supported CSS variables and their default values
--vis-line-cursor: default;
--vis-line-stroke-dasharray: none;
--vis-line-stroke-dashoffset: 0;

Component Props

NameTypeDescription
* required property