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
- Angular
- Svelte
- Vue
- TypeScript
npm install -P @unovis/ts @unovis/react
npm install -P @unovis/ts @unovis/angular
npm install -P @unovis/ts @unovis/svelte
npm install -P @unovis/ts @unovis/vue
npm install -P @unovis/ts
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!