Stop Rewriting Your Charts for Every Framework—Unovis Has You Covered

If you've ever built data visualizations for more than one frontend framework, you know the pain: you nail a gorgeous line chart in React, then your team asks for the same thing in Vue, and suddenly you're reimplementing everything from scratch. The APIs differ, the lifecycle hooks differ, and your carefully crafted chart logic doesn't port over cleanly. Wouldn't it be nice if you could write your visualization once and drop it into whatever framework you're using that week?

That's exactly the problem Unovis sets out to solve. It's a modular data visualization framework that ships first-class components for React, Angular, Svelte, Vue, Solid, and vanilla TypeScript or JavaScript—all backed by a single core package. One chart, six frameworks, zero rewrites.

What It Does

Unovis is structured as a core TypeScript library (@unovis/ts) with framework-specific wrapper packages (@unovis/react, @unovis/angular, @unovis/svelte, @unovis/vue, @unovis/solid). The core handles all the actual chart rendering and logic, while the wrappers provide idiomatic components for each framework. That means you get the same charts and the same behavior everywhere, but with the ergonomics you expect from your framework of choice.

The library covers more than just basic charts. You'll find line and area charts, maps, network graphs, and other visualization types. The components are tree-shakable, so you can import only what you need and keep your bundle size down. And if you want to tweak the look, Unovis supports CSS variables for styling, which is a refreshingly simple approach compared to fighting with theme objects or inline style props.

Here's what a basic line chart looks like with Unovis in 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>
  )
}

It's declarative, it's composable, and it feels natural. The same chart in Angular, Svelte, or Vue follows the same mental model, just with that framework's syntax.

Why It's Cool

The obvious selling point is the framework coverage—seriously, Solid is included, which almost nobody does. But there are a few design decisions that make Unovis genuinely pleasant to work with:

• Tree-shakable by design. You're not forced to pull in an entire charting monolith. Import just the components you need, and your bundler can drop the rest. For anyone who's shipped a dashboard to production, that's a real win.

• CSS variables for theming. Instead of digging through JavaScript objects to change a color or font size, you can use the styling tools you already know. This also makes it easier to integrate with your existing design system or support dark mode without a bunch of conditional logic.

• The core is framework-agnostic. Because the rendering logic lives in @unovis/ts, the framework packages are thin wrappers. That's good for maintenance, but it also means the vanilla TypeScript/JavaScript option is a first-class citizen, not an afterthought. If you're working on a project without a framework, you're not left out.

• A real gallery with copyable code. The project has a growing gallery of examples on their site, and you can grab the code and try it live on StackBlitz. That's the kind of thing that makes the difference between "this looks nice" and "I can actually ship this today."

How to Try It

Getting started is straightforward. Install the core package plus the wrapper for your framework:

npm install -P @unovis/ts @unovis/react

Swap react for angular, svelte, vue, or solid depending on your stack. If you're not using a framework, just grab @unovis/ts on its own.

From there, you can copy the line chart example above into a React component and you're off. For the other frameworks, the project's documentation has Quick Start pages with code snippets for each one.

You'll want to check out the gallery to see what's possible, and the documentation has detailed guides with examples for React, Angular, Svelte, and TypeScript. The repository itself is at github.com/f5/unovis, where you can browse the package structure and see how everything fits together.

Final Thoughts

Unovis is a solid choice if you work across multiple frontend frameworks or if you want a charting library that doesn't lock you into one ecosystem. It's especially appealing for teams that maintain the same product in different frameworks, or for library authors who want to provide visualizations without committing to a single stack. The tree-shaking and CSS-variable theming are thoughtful touches that show the developers care about real-world usage. It's not trying to be the flashiest charting library out there—it's trying to be the one you can actually use everywhere, and that's a trade-off worth making.

Follow @githubprojects for more developer tools and open source projects.