Line
Basic Configuration
The Line component has been designed to work together with XY Container. The minimal Line configuration looks like:
- React
- Angular
- Svelte
- Vue
- TypeScript
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>
)
}
@Component({
templateUrl: 'template.html'
})
export class Component {
@Input data: DataRecord[];
x = (d: DataRecord) => d.x
y = (d: DataRecord) => d.y
}
<vis-xy-container [data]="data">
<vis-line [x]="x" [y]="y"></vis-line>
</vis-xy-container>
<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>
<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>
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)
Multiple Lines
Line can also accept an array of y
accessors to display multiple lines:
- React
- Angular
- Svelte
- Vue
- TypeScript
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}/>
)
}
@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
]
}
<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}/>
<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>
const line = new Line<DataRecord>({
x: (d: DataRecord) => d.x,
y: [
(d: DataRecord) => d.y,
(d: DataRecord) => d.y1,
(d: DataRecord) => d.y2
]
})
Line Appearance
Width
Specify the Line's width in pixels using the lineWidth
property:
- React
- Angular
- Svelte
- Vue
- TypeScript
<VisLine lineWidth={5} x={x} y={y}/>
<vis-line [lineWidth]="5" [x]="x" [y]="y"></vis-line>
<VisLine lineWidth={5} {x} {y}/>
<VisLine :lineWidth="5" :x="x" :y="y" />
const line = new Line<DataRecord>({ lineWidth: 5, x, y })
Curve Type
Using the curveType: CurveType
property you can set various curve type options. For example:
- React
- Angular
- Svelte
- Vue
- TypeScript
<VisLine curveType="basis" x={x} y={y}/>
<vis-line curveType="basis" [x]="x" [y]="y"></vis-line>
<VisLine curveType="basis" {x} {y}/>
<VisLine curveType="basis" :x="x" :y="y" />
const line = new Line<DataRecord>({ curveType: "basis", x, y })
Color
- React
- Angular
- Svelte
- Vue
- TypeScript
<VisLine color="#a611a5" x={x} y={y}/>
<vis-line color="#a611a5" [x]="x" [y]="y"></vis-line>
<VisLine color="#a611a5" {x} {y}/>
<VisLine color="#a611a5" :x="x" :y="y" />
const line = new Line<DataRecord>({ color: "#a611a5", x, y })
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
- Angular
- Svelte
- Vue
- TypeScript
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>
)
}
@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]
}
<vis-xy-container [data]="data">
<vis-line [x]="x" [y]="y" [color]="color"></vis-line>
</vis-xy-container>
<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>
<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>
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)
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
- Angular
- Svelte
- Vue
- TypeScript
<VisLine x={x} y={y} lineDashArray={[5]}/>
<vis-line [x]="x" [y]="y" [lineDashArray]="[5]"></vis-line>
<VisLine {x} {y} lineDashArray={[5]}/>
<VisLine :x="x" :y="y" :lineDashArray="[5]" />
const line = new Line<DataRecord>({ x, y, lineDashArray: [5] })
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 null
s,
the line won't be displayed.
Consider the following example, where the dataset contains undefined
values over in the following domain:
4 <= x <= 6
- React
- Angular
- Svelte
- Vue
- TypeScript
<VisLine fallbackValue={7} x={x} y={y}/>
<vis-line [fallbackValue]="7" [x]="x" [y]="y"></vis-line>
<VisLine fallbackValue={7} {x} {y}/>
<VisLine :fallbackValue="7" :x="x" :y="y" />
const line = new Line<DataRecord>({ fallbackValue: 7, x, y })
Events
import { Line } from '@unovis/ts`
...
const events = {
[Line.selectors.line]: {
mouseover: (data: DataRecord[]) => {},
mouseleave: (data: DataRecord[]) => {},
...
}
}
<VisLine x={x} y={y} events={events}/>
<vis-line [x]="x" [y]="y" [events]="events"></vis-line>
<VisLine {x} {y} {events}/>
<VisLine :x="x" :y="y" :events="events" />
const line = new Line<DataRecord>({ x, y, events })
CSS Variables
The Line component supports additional styling via CSS variables that you can define for your visualization container. For example:
.custom-line {
--vis-line-cursor: cell;
--vis-line-stroke-dasharray: 55 15;
--vis-line-stroke-dashoffset: 0;
}
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 |