@unovis/ts

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

@unovis/ts is the main package of Unovis. It contains the actual source code of all the components and can be use in a pure TypeScript or JavaScript app.

Learn more about Unovis on our website unovis.dev

Installation

npm install -P @unovis/ts

Quick Start

TypeScript

import { Axis, Line, XYContainer } from '@unovis/ts'

type DataRecord = { x: number; y: number }

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

const line = new Line<DataRecord>({
  x: d => d.x,
  y: d => d.y,
})

const container = document.getElementById('vis-container')
const chart = new XYContainer(container, {
  components: [line],
  xAxis: new Axis(),
  yAxis: new Axis(),
}, data)

JavaScript

import { Axis, Line, XYContainer } from '@unovis/ts'

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

const line = new Line({
  x: d => d.x,
  y: d => d.y,
})

const container = document.getElementById('vis-container')
const chart = new XYContainer(container, {
  components: [line],
  xAxis: new Axis(),
  yAxis: new Axis(),
}, data)

Documentation

https://unovis.dev/docs/intro

Examples

https://unovis.dev/gallery

License

Apache-2.0