# Unovis: The Ultimate Lightweight Data Visualization Library

Unlocking the Power of Data Visualization with Unovis

Data visualization is a crucial aspect of modern applications, enabling users to gain insights and make informed decisions. With numerous libraries available, choosing the right one can be daunting. In this article, we’ll explore Unovis, a lightweight, framework-independent data visualization library that’s changing the game.

What sets Unovis apart?

1. Tiny size: With a mere 25kb footprint, Unovis is an attractive choice for applications where size matters.
2. Universal usage: Unovis supports multiple frameworks, including React, Angular, Svelte, and plain TypeScript, making it a versatile option for developers.
3. Minimal approach: Unovis focuses on essential charts, avoiding unnecessary features that can clutter your application.
4. Map and graph support: Unovis offers comprehensive and easy-to-use integrations with graph and map charts, setting it apart from other libraries.

Building a Unovis project

To demonstrate the capabilities of Unovis, we’ll build a simple project showcasing various chart types. We’ll use a template React.js application and initialize it with Vite.

Containers in Unovis

Unovis uses containers to hold components, creating a flexible and modular architecture. There are two types of containers:

1. VisSingleContainer: For single charts, such as donut or graph charts.
2. VisXYContainer: For charts with multiple components, like bar or line charts.

Creating charts with Unovis

We’ll explore the process of creating different chart types, including:

1. Donut chart: Using VisSingleContainer and customizing the chart with various properties.
2. Bar chart: Utilizing VisXYContainer and adding axis labels for better readability.
3. Grouped bar chart: Representing groups of data using a bar chart.
4. Stacked chart: Stacking bars on top of each other for a unique visualization.
5. Line chart: Creating a line chart with multiple trend lines.
6. Area chart: Filling the area between the line and x-axis for a distinctive look.

Customizing charts

Unovis offers a range of customization options, including:

1. Tooltips: Adding context to charts with hover-over text.
2. Colors: Changing the color scheme of charts to match your application’s style.
3. Shapes: Modifying the shape of chart elements, such as nodes or points.

Graph charts

Unovis provides a powerful graph chart component, allowing you to create complex networks with ease. We’ll explore how to customize nodes and links, and add labels for better understanding.

Map charts

With Unovis, you can create interactive map charts using the VisLeafletMap component. We’ll demonstrate how to customize map points, shapes, and clusters, and add API keys for seamless integration.

Conclusion

Unovis is a robust and lightweight data visualization library that offers a wide range of chart types and customization options. Its tiny size, universal usage, and minimal approach make it an attractive choice for modern applications. Whether you’re building a new feature or improving performance, Unovis is definitely worth considering.