Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/f5/unovis

Modular data visualization framework for React, Angular, Svelte, Vue, and vanilla TypeScript or JavaScript
https://github.com/f5/unovis

angular charts data-visualization graphs maps react svelte vue

Last synced: 2 days ago
JSON representation

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

Host: GitHub
URL: https://github.com/f5/unovis
Owner: f5
License: apache-2.0
Created: 2022-11-03T21:44:20.000Z (about 2 years ago)
Default Branch: main
Last Pushed: 2024-11-27T17:44:30.000Z (15 days ago)
Last Synced: 2024-12-01T04:10:41.260Z (11 days ago)
Topics: angular, charts, data-visualization, graphs, maps, react, svelte, vue
Language: TypeScript
Homepage: https://unovis.dev
Size: 27.5 MB
Stars: 2,286
Watchers: 15
Forks: 46
Open Issues: 56
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md

Awesome Lists containing this project

awesome-angular - unovis - Modular data visualization framework for React, Angular, Svelte, Vue, and vanilla TypeScript or JavaScript. (Table of contents / Third Party Components)
fucking-awesome-angular - unovis - Modular data visualization framework for React, Angular, Svelte, Vue, and vanilla TypeScript or JavaScript. (Table of contents / Third Party Components)
fucking-awesome-angular - unovis - Modular data visualization framework for React, Angular, Svelte, Vue, and vanilla TypeScript or JavaScript. (Table of contents / Third Party Components)
awesome - f5/unovis - Modular data visualization framework for React, Angular, Svelte, Vue, and vanilla TypeScript or JavaScript (TypeScript)
awesome - f5/unovis - Modular data visualization framework for React, Angular, Svelte, Vue, and vanilla TypeScript or JavaScript (TypeScript)

README

        https://user-images.githubusercontent.com/755708/205744216-5e9efd10-794b-4ce1-9aca-580c34fad193.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](https://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:

```bash

npm install -P @unovis/ts @unovis/

```

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

```tsx

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 (

    

      

        x={useCallback(d => d.x, [])}

        y={useCallback(d => d.y, [])}

      >

      

      

    

  )

}

```

Looking for Angular, Svelte, Vue, Solid or TypeScript examples? Check out the [Quick Start](https://unovis.dev/docs/quick-start) page on our website.

## Examples and Documentation

[![Unovis Examples](examples.png)](https://unovis.dev/gallery)

📖 _Unovis_ has an extensive [documentation](https://unovis.dev/docs/intro) with code snippets for React, Angular,

Svelte and TypeScript.

🖼 Also there's a growing [gallery](https://unovis.dev/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](CONTRIBUTING.md).

## Maintainers

[](https://github.com/rokotyan)

[](https://github.com/reb-dev)

[](https://github.com/lee00678)

## Contributors

[](https://github.com/stukova)

[](https://github.com/sumitkumar25)

[](https://github.com/gmfun)

[](https://github.com/beverlyckh)

[](https://github.com/DimamoN)

[](https://github.com/zernonia)

[](https://github.com/yanneves)

[](https://github.com/TasoOneAsia)

[](https://github.com/joshlarsen)

## License

_Unovis_ is licensed under Apache-2.0