🟨 Unovis is a modular data visualization framework for React, Angular, Svelte, and vanilla TypeScript or JavaScript.
@unovis/svelte
provides Svelte components for @unovis/ts
, which makes Unovis integration into a Svelte
app much easier.
Learn more about Unovis on our website unovis.dev
npm install -P @unovis/ts @unovis/svelte
<script lang="ts">
import { VisXYContainer, VisLine, VisAxis } from '@unovis/svelte'
type DataRecord = { x: number; y: number }
export let data = [
{ x: 0, y: 0 },
{ x: 1, y: 2 },
{ x: 2, y: 1 },
]
const x = (d: DataRecord) => d.x
const y = (d: DataRecord) => d.y
</script>
<VisXYContainer height={600}>
<VisLine {data} {x} {y}/>
<VisAxis type="x"/>
<VisAxis type="y"/>
</VisXYContainer>
<script>
import { VisXYContainer, VisLine, VisAxis } from '@unovis/svelte'
export let data = [
{ x: 0, y: 0 },
{ x: 1, y: 2 },
{ x: 2, y: 1 },
]
const x = d => d.x
const y = d => d.y
</script>
<VisXYContainer height={600}>
<VisLine {data} {x} {y}/>
<VisAxis type="x"/>
<VisAxis type="y"/>
</VisXYContainer>
Apache-2.0