Skip to main content

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:

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

You can import components individually as well:

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

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


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}>
x={useCallback(d => d.x, [])}
y={useCallback(d => d.y, [])}
<VisAxis type="x"></VisAxis>
<VisAxis type="y"></VisAxis>