Unovis

Modular data visualization framework for React, Angular, Svelte, Vue, and vanilla TypeScript or JavaScript
GitHub
2.32k
Created 2 years ago, last commit 4 days ago
13 contributors
560 commits
Stars added on GitHub, month by month
12
1
2
3
4
5
6
7
8
9
10
11
2023
2024
Stars added on GitHub, per day, on average
Yesterday
+1
Last week
+1.1
/day
Last month
+1.4
/day
Last 12 months
+2.1
/day
npmPackage on NPM
Monthly downloads on NPM
12
1
2
3
4
5
6
7
8
9
10
11
2023
2024
README
Unovis.mp4

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

  • πŸ“ˆ πŸ—Ί It has charts, maps, network graphs, and more!
  • 🌳 Tree-shakable and supports individual component imports to reduce your bundle size;
  • 🎨 Highly customizable, thanks to the CSS-variables support.

Learn more about Unovis on unovis.dev

Quick Start

You can install the core of the library @unovis/ts and framework-specific packages (if you use React, Angular, Svelte, Vue or Solid) from NPM:

npm install -P @unovis/ts @unovis/<react|angular|svelte|vue|solid>

Now you can import components and create your first chart! Here's how to build a simple line chart uising Unovis and React:

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

Looking for Angular, Svelte, Vue, Solid or TypeScript examples? Check out the Quick Start page on our website.

Examples and Documentation

Unovis Examples

πŸ“– Unovis has an extensive documentation with code snippets for React, Angular, Svelte and TypeScript.

πŸ–Ό Also there's a growing gallery of examples, from where you can copy the code over to your project or try it live on StackBlitz.

Repository structure

  • packages/ts Core TypeScript package
  • packages/angular Angular components
  • packages/react React components
  • packages/svelte Svelte components
  • packages/vue Vue components
  • packages/solid Solid components
  • packages/website Website, docs and examples

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. For more information, please read CONTRIBUTING.

Maintainers

Nikita Rokotyan Rebecca Bol Qian Liu

Contributors

Olga Stukova Sumit Kumar Gaurav Mukherjee Beverly Ackah Dmitriy Gutman zernonia Yann むーベス Eves Michael Josh Larsen

License

Unovis is licensed under Apache-2.0