Quick Start

Component import

Unovis is distributed in the format of ES modules. After the library is installed you can simply import Unovis components from @unovis/... packages:

React

import { VisXYContainer, VisLine, VisAxis } from '@unovis/react'

Angular

import { VisXYContainerModule, VisLineModule, VisAxisModule } from '@unovis/angular'

Svelte

import { VisXYContainer, VisLine, VisAxis } from '@unovis/svelte'

Vue

import { VisXYContainer, VisLine, VisAxis } from '@unovis/vue'

Solid

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

TypeScript

import { XYContainer, Line, Axis } from '@unovis/ts'

You can import components individually as well:

React

import { VisXYContainer } from '@unovis/react/containers/xy-container'
import { VisLine } from '@unovis/react/components/line'
import { VisAxis } from '@unovis/react/components/axis'

Angular

import { VisXYContainerModule } from '@unovis/angular/esm2015/containers/xy-container'
import { VisLineModule } from '@unovis/angular/esm2015/components/line'
import { VisAxisModule } from '@unovis/angular/esm2015/components/axis'

Svelte

import { VisXYContainer } from '@unovis/svelte/containers/xy-container'
import { VisLine } from '@unovis/svelte/components/line'
import { VisAxis } from '@unovis/svelte/components/axis'

Vue

import { VisXYContainer } from '@unovis/vue/containers/xy-container'
import { VisLine } from '@unovis/vue/components/line'
import { VisAxis } from '@unovis/vue/components/axis'

Solid

import { VisXYContainer } from '@unovis/solid/containers/xy-container'
import { VisLine } from '@unovis/solid/components/line'
import { VisAxis } from '@unovis/solid/components/axis'

TypeScript

import { XYContainer } from '@unovis/ts/containers/xy-container'
import { Line } from '@unovis/ts/components/line'
import { Axis } from '@unovis/ts/components/axis'

info

Unovis is tree-shakable! Based on our preliminary tests, regular package imports work as good as individual imports. Unused components won't be included into your app's bundle!

Furthermore, heavy parts of the library like Graph layouts or LeafletMap dependencies support dynamic imports and will be loaded on-the-fly after component initialization.

Line Chart with Axes

Loading...

React

info

We'll use the useCallback and useMemo hooks throughout the documentation and examples extensively because that improves the performance of the library by avoiding unnecessary rerenders.

import React, { useCallback } from 'react'
import { VisXYContainer, VisLine, VisAxis } from '@unovis/react'

type DataRecord = { x: number; y: number }
const data: DataRecord[] = [
  { x: 0, y: 0 },
  { x: 1, y: 2 },
  { x: 2, y: 1 },
]

export function BasicLineChart (): JSX.Element {
  return (
    <VisXYContainer data={data}>
      <VisLine<DataRecord>
        x={useCallback(d => d.x, [])}
        y={useCallback(d => d.y, [])}
      ></VisLine>
      <VisAxis type="x"></VisAxis>
      <VisAxis type="y"></VisAxis>
    </VisXYContainer>
  )
}

Angular

basic-line-chart.html

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

basic-line-chart.component.ts

import { Component } from '@angular/core'

type DataRecord = { x: number; y: number }

@Component({
  selector: 'basic-line-chart',
  templateUrl: './basic-line-chart.component.html'
})
export class BasicLineChartComponent {
  x = (d: DataRecord): number => d.x
  y = (d: DataRecord): number => d.y
  data: DataRecord[] = [
    { x: 0, y: 0 },
    { x: 1, y: 2 },
    { x: 2, y: 1 },
  ]
}

basic-line-chart.module.ts

import { NgModule } from '@angular/core'
import { VisXYContainerModule, VisLineModule, VisAxisModule } from '@unovis/angular'

import { BasicLineChartComponent } from './basic-line-chart.component'

@NgModule({
  imports: [VisXYContainerModule, VisLineModule, VisAxisModule],
  declarations: [BasicLineChartComponent],
  exports: [BasicLineChartComponent],
})
export class BasicLineChartModule { }

Svelte

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

  type DataRecord = { x: number, y: number }
  export let data: DataRecord[] = [
    { x: 0, y: 0 },
    { x: 1, y: 2 },
    { x: 2, y: 1 },
  ]
</script>

<VisXYContainer>
  <VisLine {data} x={d => d.x} y={d => d.y}/>
  <VisAxis type="x"/>
  <VisAxis type="y"/>
</VisXYContainer>

Vue

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

  type DataRecord = { x: number, y: number }
  const data = ref<DataRecord[]>([
    { x: 0, y: 0 },
    { x: 1, y: 2 },
    { x: 2, y: 1 },
  ])
</script>

<VisXYContainer>
  <VisLine :data="data" :x="d => d.x" :y="d => d.y" />
  <VisAxis type="x" />
  <VisAxis type="y" />
</VisXYContainer>

Solid

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

type DataRecord = { x: number; y: number }
const data: DataRecord[] = [
  { x: 0, y: 0 },
  { x: 1, y: 2 },
  { x: 2, y: 1 },
]

const BasicLineChart = () => {
  return (
    <VisXYContainer height='50dvh'>
      <VisLine data={data} x={(d) => d.x} y={(d) => d.y} />
      <VisAxis type='x' />
      <VisAxis type='y' />
    </VisXYContainer>
  )
}

export default BasicLineChart

TypeScript

import { Axis, Line, XYContainer } from '@unovis/ts'

type DataRecord = { x: number; y: number }

const data: DataRecord[] = [
  { x: 0, y: 0 },
  { x: 1, y: 2 },
  { x: 2, y: 1 },
]

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

const container = document.getElementById('vis-container')
const chart = new XYContainer(container, {
  components: [line],
  xAxis: new Axis(),
  yAxis: new Axis(),
}, data)