Unovis - NFHN Reader

Framework Independent

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

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

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

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

Framework Independent

Smooth

Built with Typescript

Companies using Unovis