Skip to main content

JavaScript Usage

Even though our library is built with TypeScript, you can still use Unovis with plain JavaScript by dropping the corresponding syntax related to types in your code. See the example code below to compare between TypeScript and JavaScript syntax.

Using with TypeScript

component.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 (
<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>
)
}

Using with JavaScript

component.tsx
import React, { useCallback } from 'react'
import { VisXYContainer, VisLine, VisAxis } from '@unovis/react'

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

export function BasicLineChart (){
return (
<VisXYContainer data={data}>
<VisLine
x={useCallback(d => d.x, [])}
y={useCallback(d => d.y, [])}
></VisLine>
<VisAxis type="x"></VisAxis>
<VisAxis type="y"></VisAxis>
</VisXYContainer>
)
}