Introduction

👋 Welcome to Unovis

This documentation will help you to get comfortable with Unovis — a modular and framework-independent library for charts, maps and network graphs.

🏗 Install

Unovis is available on NPM in several packages, each for the UI framework of your choice (React, Angular, Svelte or Vue). The core package @unovis/ts can be used without a UI framework, and if you use one you'll need to install @unovis/ts along with the framework specific package:

React

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

Angular

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

Svelte

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

Vue

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

Solid

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

TypeScript

npm install -P @unovis/ts

info

If you use TypeScript, you'll need to enable the allowSyntheticDefaultImports option in the compilerOptions section of your tsconfig.json, because some of Unovis's dependencies need it.

Also if you have types specified in tsconfig.json explicitly, you might need to add "topojson-client" to the list. Otherwise, the TypeScript compiler won't find the required TopoJSON types.

🧑‍💻 Create your first chart

Most of Unovis components require a Container to get rendered. There are two types of containers available:

• XY Container. Designed to manage multiple XY Components (e.g. Line, GroupedBar, Scatter, ...), along with optional Axes, Tooltip and Crosshair;

• Single Container. Works only with a single components, like Graph, Sankey, or TopoJSONMap. It also supports Tooltip.

Some of the components are stand-alone and don't need a container: LeafletMap, LeafletFlowMap and legends.

Go to the 👟 Quick Start section to learn how to quickly build a simple Line Chart.

🔭 Explore the docs

Pick a component from the sidebar to learn how to configure it. Start with 📈 Line or 📊 Bar if you want something simple. Don't forget to check out our 🖼 Gallery to see what the library is capable of!