Chart

Beautiful charts. Built using Vis/Unovis.

Examples

Default

<script setup>
import { VisXYContainer, VisLine, VisAxis } from '@unovis/vue'

const data = [
  { x: 1, y: 1 },
  { x: 2, y: 3 },
  { x: 3, y: 2 }
]
</script>

<template>
  <ClientOnly>
    <VisXYContainer :data="data">
      <VisLine :x="d => d.x" :y="d => d.y" />
      <VisAxis type="x" />
      <VisAxis type="y" />
    </VisXYContainer>
  </ClientOnly>
</template>

Installation

pnpm

pnpm add @unovis/vue @unovis/ts

npm

npm install @unovis/vue @unovis/ts

yarn

yarn add @unovis/vue @unovis/ts

bun

bun add @unovis/vue @unovis/ts

Props

VisXYContainer

Prop	Type	Default	Description
data	DataRecord[]	-	The data to render
height	number	-	The height of the container
width	number	-	The width of the container
margin	Margin	-	The margin of the container

VisLine

Prop	Type	Default	Description
x	NumericAccessor	-	The x-axis accessor
y	NumericAccessor	-	The y-axis accessor
color	ColorAccessor	-	The color accessor

Slots

VisXYContainer

Slot	Description
default	The chart components