Version 1.4.0 of Unovis is finally here! This update is packed full with enhancements including the new Annotations component, expanded Graph features, and a number of bug fixes to improve overall stability of the library.

Release Highlights​

📝 New component: Annotations​

Introducing Annotations, a versatile new component that enables you to overlay customized, stylized text on top of your visualizations. Whether you want to highlight points of interest, annotate trends, or simply add text labels to your charts or graphs, Annotations is designed to integrate smoothly with any Unovis component.

Check out Annotations's documentation and gallery example to learn how to use it.

🔗 Graph Link Curvature and SVG Icons​

A number of features were added to Graph in this PR, including link curvature configuration, the ability to use custom SVGs as node icons, and support for longer link labels. Check out the docs for a deep dive into the latest enhancements or to explore the breadth of features Graph has to offer.

🧩 Bullet Legend Shapes​

Bullet Legend now supports a variety of shapes on the component level and for individual legend items. Perfect for when you want to pair a legend with a combination chart or shaped scatter plot.

Other changes​

Enhancements​

• React: Exporting component selectors to allow for easier import #325
• Component | Crosshair | Configurable stroke and strokeWidth #353
• Vue | export selector, docs: update #358

Bug Fixes​

• Component | Donut | Fix: sortFunction type error #308
• XYContainer | Fix: Crosshair accessors #309
• Component | Timeline | Fix: Color rendering on enter #310
• Component | Chord Diagram | Fixes, enhancements, and refactoring #318
• Website | Releases: Fix url image preview #323
• Core Component and Tooltip event handling tweaks #330
• Svelte | Package: Add missing exports condition for Svelte #334
• Angular | Build: Removing shared from peer dependencies #349
• React | Fixing ref initialization #344
• XY Container | Fix: scaleByDomain produces inconsistent behavior among XY charts #348
• Component | XYLabels | Fix clustering config not taking effect #351
• Component | Crosshair | Fix: crosshair with multiple area issue #356

Unovis 1.3 introduces Vue support and a new pattern theme to further improve our support for accessibility features.

Release Highlights​

🎉 Vue 3 support​

Long-awaited support for Vue, the third most popular front-end UI framework. Kudos to our community member @zernonia for this amazing contribution!

👨‍🎨 Patterns​

A new theme with pattern fills that can be enabled by adding the theme-patterns class to the body element of your document. See the documentation and this pull request for more details.

Other changes​

Other changes were aimed at improving the overall stability of the library making the codebase more robust to future changes

• Refactoring: From Config Classes to Objects #279
• Refactoring: No Implicit Any #290
• Component | Tooltip | Fix: Prevent container overflow when viewport size is reduced #292
• Component | NestedDonut | Fix: TS errors #296
• Svelte: Fixing SingleContainer props and adding support for class property #294
• Theme | Patterns: Adjust injected SVG style #298

A new version of Unovis is waiting for you on NPM! This update introduces a new component: Nested Donut (aka Sunburst). It also adds better support for accessibility features, allows you to apply additional styles to axes, and much more.

Release Highlights​

🍩 New component: Nested Donut​

Nested Donut is a captivating graphical representation that displays hierarchical data in a circular format. Its nested design allows for multiple concentric rings, each representing a different level of data, enabling users to explore relationships and proportions effortlessly.

Check out Nested Donut's documentation and example to learn how to use it.

👓 Accessibility: Supporting ARIA tags​

You can now set the aria-label attribute for your visualization by providing the ariaLabel config property to the container you use. Unovis will automatically apply role="figure" attribute to the container element, making it accessible to assistive technologies.

🔠 New CSS variables for styling Axis​

If you want to customize the width of your tick and grid lines, you can do so using the new --vis-axis-tick-line-width and --vis-axis-grid-line-width variables.

The color of the domain line by default equals the tick color (that can be specified with --vis-axis-tick-color), but Unovis 1.2 allows you to explicitly set it via --vis-axis-domain-color.

Additionally you can apply custom cursor and text-decoration to your tick labels with --vis-axis-tick-label-cursor and --vis-axis-tick-label-text-decoration variables.

Other changes​

Enhancements​

• Component | LeafletMap: Adding getExpandedCluster public method #205
• Component | Line: Better enter transition for broken lines #227
• Component | Scatter: Fixing the missing points issue #227
• Component | Scatter: Stroke color and width support #232

Bug Fixes​

• Container | XY: Calling render right after initialization if there are axes or components with data #212
• @unovis/svelte: Updating component lifecycles to prevent DOM related errors with SvelteKt (SSR) #216

Other​

• Core: Using native ResizeObserver when available #209
• Dependencies: Updating Dagre packages to work with Angular 16 #210

We're excited to announce the release of Unovis 1.1.0! This update brings new features, enhancements, and bug fixes that improve the overall user experience and stability of the library.

Release Highlights​

🦌 ELK support for Graph​

We've added ELK integration to our Graph component. Now you can render complex hierarchical graphs ELK is famous for!

🥨 New component: Multi-Level Chord Diagram​

Multi-Level Chord Diagram can display hierarchical relationships and interactions between multiple entities, often used to visualize complex systems or networks. It showcases the flow of data or connections between different levels, allowing users to understand the intricacies of interconnected components and their relative importance within the system.

👋 Goodbye lodash​

Unovis doesn't have lodash as it's dependency anymore saving precious 90KB (unzipped) of your app bundle!

Changelog​

New Features​

• Component | Graph: ELK Support by @rokotyan #161
• Chord Diagram: Refactoring, Docs, Examples by @reb-dev #105

Enhancements​

• Goodbye lodash by @rokotyan #100
• Component | Timeline: Fixing odd rows fill color by @rokotyan #145
• Component | LeafletMap: Calling fitView and fitToPoints in the next frame by @rokotyan #148
• Code Quality: Enabling strictFunctionTypes by @rokotyan #158
• React | Tweaks: Supporting style and className; Removing @emotion/css dependency by @rokotyan #162
• Component | LeafletMap | Styles: Updating MapLibreArcticLight style by @rokotyan #165
• Component | LeafletMap: Configurable inner label color by @rokotyan #156
• Component | Chord Diagram: Better accessor support for non-leaf nodes by @reb-dev #160
• Website: Updating Docusaurus and fixing editUrl by @rokotyan #175
• Container | Core, Single: Setting SVG size in render() by @rokotyan #174

Bug Fixes​

• Component | Graph | Link fixes by @reb-dev #151
• React: Fixing double-render on component initialization by @rokotyan #154
• React: Fixing component initialization flow by @rokotyan #164
• Component | Chord Diagram: Fixing invisible nodes by @reb-dev #169

Other​

• Misc tweaks and fixes by @rokotyan #168

We’re excited to announce Unovis 1.0 - a modular data visualization framework for React, Angular, Svelte, and vanilla TypeScript or JavaScript!​

After more than 3 years in development, Unovis finally goes open source. Unovis can draw charts, maps and network graphs, no matter what UI framework you use. We’ve been using it extensively at F5 with Angular and React apps, and it now empowers user interfaces of F5 Distributed Cloud console and NGINX Controller.

Why Unovis?​

• 🏗 Integrates nicely with the UI framework of your choice, making it very easy to use;
• 🗺 Supports various charts, simple and detailed maps, network graphs and diagrams;
• 💇 Highly customizable, thanks to the extensive use of CSS variables;
• 📖 Extensive documentation and growing gallery of examples.

Want to give it try?​

Go to unovis.dev, check out the docs, explore the gallery, or jump right into development with our Quick Start guide.