Line

Basic Configuration

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

React

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>
  )
}

Angular

component.ts

@Component({
  templateUrl: 'template.html'
})
export class Component {
  @Input data: DataRecord[];
  x = (d: DataRecord) =>  d.x
  y = (d: DataRecord) =>  d.y
}

template.html

<vis-xy-container [data]="data">
  <vis-line [x]="x" [y]="y"></vis-line>
</vis-xy-container>

Svelte

component.svelte

<script lang='ts'>
  import { VisXYContainer, VisLine } from '@unovis/svelte'

  export let data: DataRecord[]
  const x = (d: DataRecord) =>  d.x
  const y = (d: DataRecord) =>  d.y
</script>

<VisXYContainer {data}>
  <VisLine {x} {y}/>
</VisXYContainer>

Vue

component.vue

<script setup lang="ts">
import { VisXYContainer, VisLine } from '@unovis/vue'

const props = defineProps<{ data: DataRecord[] }>()
const x = (d: DataRecord) =>  d.x
const y = (d: DataRecord) =>  d.y
</script>

<template>
  <VisXYContainer :data="data">
    <VisLine :x="x" :y="y" />
  </VisXYContainer>
</template>

Solid

component.tsx

import { VisXYContainer, VisLine } from '@unovis/solid'

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>
  )
}

TypeScript

component.ts

import { XYContainer, Line } from '@unovis/ts'
import { data, DataRecord } from './data'

const container = new XYContainer<DataRecord>(node, {
  components: [
    new Line<DataRecord>({
    x: (d: DataRecord) =>  d.x, 
    y: (d: DataRecord) =>  d.y
  })
  ]
}, data)

Loading...

Multiple Lines

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

React

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}/>
  )
}

Angular

component.ts

@Component({
  template: '<vis-line [x]="x" [y]="y"></vis-line>'
})
export class Component {
  @Input data: DataRecord[];
  x = (d: DataRecord) =>  d.x
  y = [
    (d: DataRecord) =>  d.y,
    (d: DataRecord) =>  d.y1,
    (d: DataRecord) =>  d.y2
  ]
}

Svelte

component.svelte

<script lang='ts'>
  import { VisXYContainer, VisLine } from '@unovis/svelte'

  export let data: DataRecord[]
  const x = (d: DataRecord) =>  d.x
  const y = [
    (d: DataRecord) =>  d.y,
    (d: DataRecord) =>  d.y1,
    (d: DataRecord) =>  d.y2
  ]
</script>

<VisLine {x} {y}/>

Vue

component.vue

<script setup lang="ts">
import { VisXYContainer, VisLine } from '@unovis/vue'

const props = defineProps<{ data: DataRecord[] }>()
const x = (d: DataRecord) =>  d.x
const y = [
    (d: DataRecord) =>  d.y,
    (d: DataRecord) =>  d.y1,
    (d: DataRecord) =>  d.y2
  ]
</script>

<template>
  <VisLine :x="x" :y="y" />
</template>

Solid

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}/>
  )
}

TypeScript

component.ts

const line = new Line<DataRecord>({
  x: (d: DataRecord) =>  d.x, 
  y: [
    (d: DataRecord) =>  d.y,
    (d: DataRecord) =>  d.y1,
    (d: DataRecord) =>  d.y2
  ]
})

Loading...

Line Appearance

Width

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

lineWidth:

React

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

Angular

<vis-line [lineWidth]="5" [x]="x" [y]="y"></vis-line>

Svelte

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

Vue

<VisLine :lineWidth="5" :x="x" :y="y" />

Solid

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

TypeScript

const line = new Line<DataRecord>({ lineWidth: 5, x, y })

Loading...

Curve Type

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

curveType: basislinearstep

React

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

Angular

<vis-line curveType="basis" [x]="x" [y]="y"></vis-line>

Svelte

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

Vue

<VisLine curveType="basis" :x="x" :y="y" />

Solid

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

TypeScript

const line = new Line<DataRecord>({ curveType: "basis", x, y })

Loading...

Color

color:

React

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

Angular

<vis-line color="#a611a5" [x]="x" [y]="y"></vis-line>

Svelte

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

Vue

<VisLine color="#a611a5" :x="x" :y="y" />

Solid

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

TypeScript

const line = new Line<DataRecord>({ color: "#a611a5", x, 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:

React

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>
  )
}

Angular

component.ts

@Component({
  templateUrl: 'template.html'
})
export class Component {
  @Input data: DataRecord[];
  x = (d: DataRecord) =>  d.x
  y = [
    (d: DataRecord) =>  d.y,
    (d: DataRecord) =>  d.y1,
    (d: DataRecord) =>  d.y2
  ]
  color = (d: DataRecord, i: number) =>  ['red', 'green', 'blue'][i]
}

template.html

<vis-xy-container [data]="data">
  <vis-line [x]="x" [y]="y" [color]="color"></vis-line>
</vis-xy-container>

Svelte

component.svelte

<script lang='ts'>
  import { VisXYContainer, VisLine } from '@unovis/svelte'

  export let data: DataRecord[]
  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]
</script>

<VisXYContainer {data}>
  <VisLine {x} {y} {color}/>
</VisXYContainer>

Vue

component.vue

<script setup lang="ts">
import { VisXYContainer, VisLine } from '@unovis/vue'

const props = defineProps<{ data: DataRecord[] }>()
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]
</script>

<template>
  <VisXYContainer :data="data">
    <VisLine :x="x" :y="y" :color="color" />
  </VisXYContainer>
</template>

Solid

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>
  )
}

TypeScript

component.ts

const line = new Line<DataRecord>({
  x: (d: DataRecord) =>  d.x, 
  y: [
    (d: DataRecord) =>  d.y,
    (d: DataRecord) =>  d.y1,
    (d: DataRecord) =>  d.y2
  ], 
  color: (d: DataRecord, i: number) =>  ['red', 'green', 'blue'][i]
})
const container = new XYContainer<DataRecord>(node, { components: [line] }, data)

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.

React

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

Angular

<vis-line [x]="x" [y]="y" [lineDashArray]="[5]"></vis-line>

Svelte

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

Vue

<VisLine :x="x" :y="y" :lineDashArray="[5]" />

Solid

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

TypeScript

const line = new Line<DataRecord>({ x, 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

Fallback Value

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

fallbackValue:

React

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

Angular

<vis-line [fallbackValue]="7" [x]="x" [y]="y"></vis-line>

Svelte

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

Vue

<VisLine :fallbackValue="7" :x="x" :y="y" />

Solid

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

TypeScript

const line = new Line<DataRecord>({ fallbackValue: 7, x, y })

Loading...

Line Interpolation

Alternatively, you can set the interpolateMissingData property to true to fill in the data gaps with a dashed line. If fallbackValue is set, those values will be plotted on the inteprolated line. Otherwise, it will be a smooth curve between defined points, like below:

React

<VisLine x={x} y={y} interpolateMissingData={true}/>

Angular

<vis-line [x]="x" [y]="y" [interpolateMissingData]="true"></vis-line>

Svelte

<VisLine {x} {y} interpolateMissingData={true}/>

Vue

<VisLine :x="x" :y="y" :interpolateMissingData="true" />

Solid

<VisLine x={x} y={y} interpolateMissingData={true}/>

TypeScript

const line = new Line<DataRecord>({ x, y, interpolateMissingData: true })

Loading...

You can customize the appearance of of the interpolated line with the following CSS varibles:

--vis-line-gapfill-stroke-dasharray: 2 3;
--vis-line-gapfill-stroke-opacity: 0.8;
--vis-line-gapfill-stroke-dashoffset: 0;

Events

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

React

<VisLine x={x} y={y} events={events}/>

Angular

<vis-line [x]="x" [y]="y" [events]="events"></vis-line>

Svelte

<VisLine {x} {y} {events}/>

Vue

<VisLine :x="x" :y="y" :events="events" />

Solid

<VisLine x={x} y={y} events={events}/>

TypeScript

const line = new Line<DataRecord>({ x, y, 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

Name	Type	Description
* required property