Skip to main content

A modular data visualization framework for React, Angular, Svelte, Vue and vanilla TypeScript or JavaScript

Get Started
Framework Independent

Framework Independent

Use with React, Angular, Svelte,
or without any UI framework.

Smooth

Smooth

We pay attention to how the library components look and how they react to data changes. Styles are customizable via CSS variables.

Built with Typescript

Built with Typescript

Unovis is built with Typescript and allows you to import individual component modules to reduce your app bundle size.

Unovis in action

See more examples in Gallery ->
import React, { useCallback } from 'react'
import { VisXYContainer, VisAxis, VisArea, VisXYLabels } from '@unovis/react'
import { data, formats, DataRecord, getLabels } from './data'


export default function StackedArea (): JSX.Element {
  const labels = getLabels(data)
  return (
    <>
      <VisXYContainer data={data} height={'50vh'}>
        <VisArea x={useCallback((d: DataRecord) => d.year, [])} y={formats.map(g => useCallback((d: DataRecord) => d[g], []))}/>
        <VisAxis type='x' label='Year' numTicks={10} gridLine={false} domainLine={false}/>
        <VisAxis type='y' label='Revenue (USD, billions)' numTicks={10}/>
        <VisXYLabels
          x={useCallback((d: DataRecord) => labels[d.year] ? d.year : undefined, [])}
          y={useCallback((d: DataRecord) => labels[d.year]?.value, [])}
          label={useCallback((d: DataRecord) => labels[d.year]?.label, [])}
          backgroundColor={useCallback((d: DataRecord) => labels[d.year]?.color ?? 'none', [])}
          clusterBackgroundColor="none"
          clusterLabel={() => ''}
        />
      </VisXYContainer>
    </>
  )
}

Companies using Unovis

F5 LogoF5 LogoNGIX LogoNGIX Logo