f5 / unovis
- пятница, 16 декабря 2022 г. в 00:36:26
Modular data visualization framework for React, Angular, Svelte, and vanilla TypeScript or JavaScript
Learn more about Unovis on unovis.dev
You can install the core of the library @unovis/ts
and framework-specific packages (if you use React, Angular, or Svelte) from NPM:
npm install -P @unovis/ts @unovis/<react|angular|svelte>
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, or TypeScript examples? Check out the Quick Start page on our website.
packages/ts
Core TypeScript packagepackages/angular
Angular componentspackages/react
React componentspackages/svelte
Svelte componentspackages/website
Website, docs and examplesPull 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.
Unovis is licensed under Apache-2.0