@unovis/react
TypeScript icon, indicating that this package has built-in type declarations

1.4.5 • Public • Published

cover

🟨 Unovis is a modular data visualization framework for React, Angular, Svelte, and vanilla TypeScript or JavaScript.

@unovis/react provides React components for @unovis/ts, which makes Unovis integration into a React app much easier.

Learn more about Unovis on our website unovis.dev

Installation

npm install -P @unovis/ts @unovis/react

Quick Start

TypeScript

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

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

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

JavaScript

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

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

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

Documentation

https://unovis.dev/docs

Examples

https://unovis.dev/gallery

License

Apache-2.0

Package Sidebar

Install

npm i @unovis/react

Homepage

unovis.dev

Weekly Downloads

2,556

Version

1.4.5

License

Apache-2.0

Unpacked Size

173 kB

Total Files

92

Last publish

Collaborators

  • rokotyan
  • nikita-rokotyan-f5
  • rmauer
  • caabernathy
  • curran
  • lee00678
  • rebeccabol