👋 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.
Unovis is available on NPM in several packages, each for the UI framework of your choice (React, Angular or Svelte).
The core package
@unovis/ts can be used without a UI framework, and if you use one you'll need to install
along with the framework specific package:
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
If you use TypeScript, you'll need to enable the
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!