Version 1.7 of Unovis is here! This is our biggest release to date. It brings three new components — Boxplot, Radial Bar and Heatmap; takes Unovis beyond the browser with server-side rendering and an MCP server that lets AI agents build charts; adds chart-wide color synchronization and pattern fills; and comes with smarter axes, a better crosshair, waterfall charts, Content Security Policy support, and a long list of performance improvements and bug fixes.

We're excited to welcome our new first-time contributors to the Unovis community: @Vincentdevreede and @kristof-mattei. Huge thanks as well to @devgru and @50rayn for their continued contributions! 🎉

Release Highlights​

📊 New Components: Boxplot, Radial Bar & Heatmap​

Introducing three new components:

Boxplot - Box-and-whisker plots for XY Container:

• Three grouped accessors — median, quartiles ([q1, q3]) and whiskers ([min, max]) — so a box can never render half-drawn
• Use a subset of the accessors for quartiles-only or median-only plots
• Configurable barWidth, barMaxWidth, barPadding, roundedCorners and dataStep for missing data
• Works with Axis, Crosshair, Tooltip, Brush and the other XY components

Radial Bar - Stacked-ring charts for Single Container:

• One circular track per data record, filled proportionally to its value
• Configurable angleRange for partial and reversed rings, stacking order and sorting
• barMinAngle keeps tiny values visible, and 0 is now distinguished from missing data (docs)
• Labels, background tracks, corner radius and a full set of --vis-radial-bar-* CSS variables

Heatmap - A grid of colored cells driven by a flat data array, like the GitHub contributions calendar:

• Control the grid with numRows / numColumns, layout (column or row) and offset
• Built-in quantized color scale, overridable with colorRange + colorDomain or a per-cell color accessor; empty cells get a dedicated fill
• cellSize, cellPadding, cellCornerRadius, and intrinsic sizing with Sizing.Extend
• Native rowLabel / columnLabel accessors with automatic overlap hiding

Check out Boxplot's documentation, Radial Bar's documentation, and Heatmap's documentation, or explore the new gallery examples: Basic Boxplot, Radial Bar Chart and GitHub-Style Heatmap.

🤖 MCP Server: Charts from an AI Agent​

Unovis can now be driven by an AI agent. The new @unovis/mcp package is an MCP server that turns data into Unovis charts and hands back an SVG, a PNG, a live HTML file, or ready-to-paste component source — all rendered locally in Node, with no browser, no remote rendering service, and no data leaving the machine.

claude mcp add unovis -- npx -y @unovis/mcp

• Fifteen chart tools — line, area, bar, scatter, timeline, boxplot, donut, nested donut, radial bar, sankey, treemap, chord diagram, network graph, heatmap and choropleth map — plus get_unovis_info for capability discovery
• Accessors by field name instead of functions (x: "month", y: ["sales", "cost"]), validated against the data, so a typo comes back as a helpful error instead of an empty chart
• Six output types, one spec — svg, png, html (a self-contained interactive chart with tooltips, crosshair and legend), interactive (rendered inline by hosts supporting the MCP Apps extension), config (the chart spec as JSON) and code (TypeScript, React, Svelte, Vue, Angular or Solid source)
• Shared across the tools: light and dark themes, titles, axis labels, legends, custom palettes, locale-aware formatting, reference lines, reference bands and annotations
• Works with Claude Code, Claude Desktop, Cursor, Codex, VS Code and any other MCP client — stdio by default, streamable HTTP behind --transport http

Check out the MCP Server documentation to get started, and the pull request for the full story.

🖥️ Server-Side Rendering with @unovis/ssr​

Headless rendering ships as its own package, @unovis/ssr: a jsdom-based environment with real canvas text metrics, geometry polyfills and a flushable animation frame queue, plus a post-processing pass that turns the output into a standalone SVG — no CSS classes, no custom properties, no external references. renderToSvg takes any hand-built Unovis chart, and svgToPng rasterizes it:

import { renderToSvg } from '@unovis/ssr'

const { svg } = await renderToSvg({ width: 800, height: 400, theme: 'dark' }, ctx => {
  const line = new ctx.unovis.Line({ x: d => d.x, y: d => d.y })
  const container = new ctx.unovis.XYContainer(ctx.container, {
    components: [line], width: ctx.width, height: ctx.height,
    duration: 0, onRenderComplete: ctx.onRenderComplete,
  }, data)
  return { root: container.svg.node(), destroy: () => container.destroy() }
})

Charts in CI, in emails, in PDFs and on server-rendered pages all work from this one function. Along the way, a handful of fixes landed in @unovis/ts itself to make it friendlier to non-browser environments: containers fall back to their configured size when the element has no layout, getPixelsPerInch no longer recurses endlessly without layout, root index.js / maps.js entries resolve under a strict Node loader, and a malformed :not() selector in Graph was fixed. Requires Node.js 20 or newer.

🎨 Color Synchronization & Patterns​

Color synchronization keeps the same category the same color across every chart, legend and tooltip on a dashboard, regardless of series order (docs):

• colorFunction — a chart-wide (key) => color function on XY Container, Single Container and Bullet Legend
• colorKeys — a per-component array of stable keys aligned with the y accessors; Bullet Legend items accept a colorKey
• UnovisColorScale — the default D3 ordinal scale backed by the --vis-color* variables, exported so it can be re-ranged globally

const color = Scale.scaleOrdinal().range(['#4d8cfd', '#ff6b7e', '#00c19a'])
const keys = ['aws', 'azure', 'github']

<VisBulletLegend items={keys.map(name => ({ name, colorKey: name }))} colorFunction={color} />
<VisXYContainer data={data} colorFunction={color}>
  <VisGroupedBar x={d => d.x} y={keys.map(k => d => d[k])} colorKeys={keys} />
</VisXYContainer>

Patterns add stripes, dots, hatches and line markers as a second visual channel on top of color — for color-blind-safe palettes, grayscale printing and dense charts (docs):

• A pattern accessor on Area, Line, Scatter, GroupedBar, StackedBar, Timeline, Donut, NestedDonut, Sankey and ChordDiagram, with FillPatternType and LinePatternType enums for the built-in patterns
• The theme-patterns class now runs on the same infrastructure, and its automatic palette is customizable via the --vis-pattern-fill{i}, --vis-pattern-marker{i} and --vis-pattern-dasharray{i} CSS variables
• Bullet Legend bullets render the matching pattern

🎯 Crosshair: XY Snapping and Horizontal Line​

• snapMode: CrosshairSnapMode.XY snaps to the datum closest to the pointer in both X and Y, which makes Crosshair work great with Scatter (docs)
• showHorizontalLine renders a horizontal line through the snapped point (docs)

📏 Axis: Adaptive Tick Sets​

• tickTextAdaptiveSets picks the largest "nice" tick set whose labels fit and degrades to sparser sets on narrower charts, so labels never overlap while unlabeled ticks still render as tick marks (docs). Thanks to @devgru for this contribution!
• tickSpacing controls the default tick density of the X axis (docs)
• labelTextSeparator configures where the axis label can be trimmed (docs)

📊 Bar Charts: Baseline, Waterfall Charts and Per-Bar Styles​

• Stacked Bar has a new baseline accessor for floating bars — the primitive needed to build waterfall charts (docs, gallery example)
• A new barStyle accessor on Stacked Bar and Grouped Bar applies custom inline styles per bar, e.g. dashed "projected value" bars (docs)
• Entering bars now grow from the baseline, and interrupted exit transitions no longer leave ghost bars behind or remove live ones on rapid data updates

🧭 XY Container: Bleed Control​

The new bleed config option accepts a Spacing object or a function receiving the container's components, and overrides the automatically calculated bleed. Combined with the bleed reported by onRenderComplete, it lets you synchronize the scale ranges of multiple charts placed next to each other. Read the new Bleed guide to learn more.

🍩 Donut: Minimum Segment Angle​

minSegmentAngle guarantees a minimum angular sweep for every non-zero segment, so tiny values no longer disappear behind padAngle, while events, tooltips and legends keep reporting the raw values (docs).

🔗 Graph: Node Label Wrapping​

Node labels and sub-labels can now wrap instead of being trimmed: set nodeLabelFitMode / nodeSubLabelFitMode to FitMode.Wrap and fine-tune with nodeLabelWidth, nodeLabelSeparator and nodeLabelForceWordBreak (plus their sub-label counterparts) (docs).

🌊 Sankey: Adaptive Node Padding​

With many nodes, rigid vertical padding used to squash node heights down to a single pixel. Enable nodeAdaptivePadding to compress the padding instead, so node bodies keep their height (docs). Thanks to @devgru!

📍 Plotline & Plotband: Labels That Always Fit​

• Both components now report bleed, so the container reserves room for labels placed at the edge of the domain; when that isn't enough, the label shifts into the chart area instead of getting clipped
• labelText accepts UnovisText | UnovisText[] for styled multi-line labels, and plain strings support \n line breaks

🔒 Content Security Policy Support​

Unovis now works with strict style-src policies. Set window.UNOVIS_NONCE before the library is imported and every injected <style> tag carries your nonce:

<script nonce="<SERVER_NONCE>">window.UNOVIS_NONCE = "<SERVER_NONCE>"</script>

The new CSP guide covers the recommended header and per-framework integration snippets.

⚡ Performance and Core Improvements​

• Text is measured with a canvas and cached, and labels trim at precise positions instead of using an equal-width approximation; UnovisText builds SVG elements directly instead of re-parsing strings #817
• config.events callbacks are resolved when the event fires, so handlers never run with stale state after setConfig #874
• GraphDataModel indexes nodes and links with maps instead of quadratic scans, Tooltip no longer re-queries the DOM on every event, and components get an _onDestroy teardown hook that fixes resource leaks #883
• The pattern defs SVG is injected at zero size, fixing the Cumulative Layout Shift inflation on every page importing Unovis #848

🧩 Framework Updates​

• Angular — as announced, @unovis/angular now supports Angular versions in Long-Term Support: 20 – 22 (previously 12 – 22), and requires RxJS 7.5+. The package entry paths were also fixed for the ng-packagr 20 output #704 #895
• Svelte — @unovis/svelte moves to Svelte 4 (^4.0.0); Svelte 3 is no longer supported. Charts now re-render when a child component's data or config changes #887
• React — component-level config changes reaching a component through context or parent state now trigger a container render #875
• Vue — the data prop of Crosshair, Timeline and Boxplot works again (it was silently dropped since 1.6.5) #857
• All packages are now built with Vite instead of Rollup, and the published code is no longer minified for easier debugging #869

Other Changes​

Enhancements​

• Component | RadialBar: barMinAngle config property and 0 vs missing data handling #863
• Component | LeafletMap: preserveDrawingBuffer option so the map canvas can be exported with toDataURL() #894
• Component | Axis: Invalidate cached tick text style on tickTextFontSize change #870
• Core | Utils: UnovisText blocks accept className and per-block wrapping overrides #879
• Core | Utils: Export the StyleDeclaration type and the applyInlineStyles helper #896
• Container | XY: Warn when updateComponents receives a mismatched number of configs #883
• Container: Unified tooltip hide behavior between XY and Single containers #883
• Website | Docs: New Bleed and Content Security Policy guides, and more detailed container docs covering color, tooltip, crosshair, annotations, animation and accessibility #829 #861 #893
• Website | Sidebar: Flattened navigation with all components under a single section, plus redirects for legacy URLs #892
• Dev | Gallery: Angular panel in the multi-framework playground, and framework logos in the panel headers #850 #849
• Shared | Examples: Add a data-reactivity example to the multi-framework gallery playground #903
• Misc: AI contributor guide (AGENTS.md) and skills for Claude Code, Codex and Cursor; PR template; commit message validation in CI #837
• Misc: npm version and downloads badges in the README files #867

Bug Fixes​

• Component | Tooltip: Fix fade-in animation and follow-cursor freeze over trigger gaps #859
• Component | Tooltip: Prevent event handling from the tooltip itself when allowHover is enabled #859
• Component | Donut: Fix jump before animation when switching between full and half donuts #858
• Component | Sankey: Fix label overlap caused by labels stuck in the hovered state #853
• Component | Sankey: Properly measure labels #877
• Component | Controls: Fix dark theme button border color variable reference #871
• Component | StackedBar: Don't remove re-adopted bars when an exit transition is interrupted #896
• Component | GroupedBar: Remove exiting groups from the DOM when their transition is interrupted #899
• Component | Graph: Fix missing label background when only a sub-label is used #879
• Component | All: Fix shared default config aliasing when constructed without a config #881
• Container | XY: Fix data change detection in setData #883
• Container | XY, Single: Reconcile SVG children on updateContainer instead of a full teardown and re-append, so CSS transitions and per-element state survive config updates #903
• Core | Utils: Fix isEqual false positive on repeated references #875
• Core | Utils: Fix merge() class instance handling and clone-on-empty aliasing #881
• Core | Utils: Fix line spacing across differently sized text blocks #897
• Core | Utils | Color: getColor keeps accepting the legacy boolean fourth argument #856
• Dev | Examples: Clean up issues in the dev examples and the dev gallery #851 #852 #854

Quality of Life Improvements​

• Misc | Dependency: Replace Rollup with Vite #869
• Misc | Vitest: Set up Vitest with SSR support and add it to the CI pipeline #886
• Core | Test: Introduce Playwright for browser-based E2E and visual testing in the dev app #906
• Misc | Build: Clear vite-plugin-dts type errors and fail the build on missing entry declarations #891
• Core | Dev: Migrate to the @/* path alias #799
• Container: Consolidate component size, margin, and color propagation into a single helper #903
• Misc: Vulnerability fixes #864 #880
• Misc: Version script and cmds-report updates #844, Percy test update #847

Overview​

Effective with the next major release (1.7) of Unovis, we will only support Angular versions that are currently in Long-Term Support (LTS) as defined by Angular's version support policy.

What This Means​

Angular follows a predictable release cycle where each major version receives:

• 6 months of active support (regular updates and patches)
• 12 months of long-term support (critical fixes and security patches)
• After 18 months, versions reach end-of-life

Unovis will support all Angular versions currently in their LTS window. As Angular versions reach end-of-life, Unovis will drop support for those versions in our next minor release.

Current Status​

Currently, Unovis supports Angular versions 12 through 22 ("@angular/common": "12 - 22" in our peer dependencies). Moving forward, we will only support Angular versions that are in active support or LTS.

Why This Change?​

1. Security: Unsupported Angular versions no longer receive security updates, which can pose risks to applications
2. Modern Features: Allows us to leverage newer Angular features and APIs (standalone components, signals, improved TypeScript support, etc.)
3. Maintenance Efficiency: Reduces the testing matrix and allows our team to focus on supporting current Angular versions with better quality
4. Industry Standard: This aligns with how other major Angular libraries (Angular Material, NgRx, etc.) manage version support

Timeline​

• Effective Date: Next major version release of Unovis
• Transition Period: Current versions of Unovis will continue to support the existing range until the next major release

What You Should Do​

1. Check Your Angular Version: Run ng version to see which Angular version you're using
2. Plan Your Upgrade: If you're using an Angular version that's approaching end-of-life, plan to upgrade
3. Stay Informed: Follow Angular's release schedule to know when versions enter and exit LTS

References​

• Angular Version Support Policy
• Angular Material Version Support
• Unovis Documentation

Feedback​

We value your input! If you have concerns or questions about this policy change, please:

• Open an issue on GitHub
• Join the discussion in our community channels
• Reach out to the maintainers

The Unovis Team

Version 1.6 of Unovis is here! This is one of our most feature-packed releases yet, bringing exciting new components, enhanced graph functionality, improved axis customization, and numerous quality of life improvements.

We're excited to welcome our new first-time contributors to the Unovis community: @dennisadriaans, @curran, @50rayn, and @devgru. Thank you for your valuable contributions! 🎉

Release Highlights​

📊 New Components: Treemap, Plotline, Plotband & Rolling Pin Legend​

Introducing four new components:

Treemap

• Hierarchical data visualization with customizable layers
• Rich styling options including tileColor, tilePadding, tileBorderRadius and lightnessVariationAmount
• Interactive features with hover states: --vis-treemap-tile-hover-stroke-color, --vis-treemap-tile-hover-stroke-opacity

Plotline - Draw precise reference lines across your charts:

• Support for both X and Y axis orientation
• Customizable line styles (solid, dashed, dotted)
• Configurable colors, widths, and positioning
• Works with all XY components

Plotband - Highlight ranges and areas in your visualizations:

• Create horizontal or vertical bands across chart areas
• Customizable colors with transparency support
• Flexible labeling with multiple positioning options

Rolling Pin Legend - Compact legend for displaying color scales:

• Displays color gradients in a horizontal rolling pin format
• Left and right label support for scale endpoints
• Customizable font sizes and styling

Check out Plotline's documentation, Plotband's documentation, Treemap's documentation, and Rolling Pin Legend's documentation with examples to learn how to use them.

🎯 Enhanced Crosshair Component​

Allow enforcement of crosshair display at certain position, this can be used to enable synchronized crosshair display

📈 Line Chart Interpolation​

New interpolation feature for handling missing data in line charts:

• interpolateMissingData property fills data gaps with dashed lines
• Customizable appearance with CSS variables

    --vis-line-gapfill-stroke-dasharray: 2 3;
    --vis-line-gapfill-stroke-opacity: 0.8;
    --vis-line-gapfill-stroke-dashoffset: 0;

• Works seamlessly with fallback values for better data visualization

🔘 Bullet Legend Enhancements​

Bullet Legend now supports multiple colors per item, enabling more sophisticated legend designs:

• Multiple color arrays for complex legend items

📏 Axis Customization​

New CSS variables for greater axis styling control:

• --vis-axis-line-stroke-color: Customize axis line color
• --vis-axis-line-stroke-width: Control axis line thickness
• Better separation between domain line and tick styling
• Label Trim and Wrap: Add trim and wrap functionality to axis labels for better text handling

⏱️ Timeline Component Enhancements​

Major updates to the Timeline component with new features and improved functionality:

• Row Icons: Support for enhanced visual categorization with icons alongside row labels
• Line Icons: Add start and end icons to timeline lines with configurable positioning
• Arrow Support: Connect related timeline entries with customizable arrows allowing user to create Gantt Charts
• Hover Styles: Better visual feedback with configurable hover states
• Animation Control: Configurable animation positions for line enter/exit transitions
• Label Positioning: Improved label positioning and clipping behavior with dedicated clipPath
• labelTextAlign: Adds labelTextAlign config option to Timeline component to control label alignment

🔗 Graph Component Updates​

Continued improvements to the Graph component:

• Enhanced panel documentation and examples
• Configurable node and group spacing in Parallel layouts (doc)

Other Changes​

Enhancements​

• Component | Graph: Enhanced panel documentation and examples #616
• Container | XY: Handle edge cases when scaleByDomain is true #588
• Website | Gallery: New custom nodes graph with tooltips example #603
• Website | Gallery: New patchy line chart gallery example #558
• Website | Gallery: New stacked area chart with attributes example #597
• Website | Docs: Enhanced documentation for multiple components

Bug Fixes​

• Component | Tooltip: Fix dynamic config retrieval for mousemove handler #606
• Component | Graph: Fix link flow group dot issue #575
• Component | Graph: Fix link flow animation update #577
• Component | Timeline: Fix icon data binding, ordinal scale domain, and arrow exit transition #536
• Solid | Bug: Component destroy method #602
• Core | Types: Making fontSize optional in UnovisText #585

Quality of Life Improvements​

• TS: Replace deprecated JSX.Element with React.ReactNode #545
• Testing: Continued improvements to visual testing infrastructure

Version 1.5 of Unovis has arrived! This release is packed with enhancements, including full support for Solid; compatibility with React 19 and Angular 19; many Graph component tweaks; exciting new features; and numerous bug fixes.

Release Highlights​

🎉 Solid Support​

Unovis now works with Solid — one of the most performant JSX frameworks. Thanks to @hngngn for this amazing contribution!

🎊 React 19 and Angular 19​

Unovis now also support Angular 19 and React 19.
Calling for Svelte 5 support contribution (discussion)! Huge thanks to @pingu-codes for your incredible help with Svelte support! 🚀.

🔗 Graph​

A ton of new features were added to Graph:

• Provide your own functions to render nodes allowing you to highly customize how the graph looks (docs).

• Post-Layout (docs) and Post-Render Customization (docs) allowing you to modify the layout of the graph on the fly and render additional layers with D3.

• Provide custom SVG icon to link labels (docs).

• Zoom start/end and node dragging callbacks (docs).

• Fit view to specific nodes by providing an array of node ids.

• Multiple node selection (docs).

• Enable Graph nodes to accept precalculated layout data (docs).

🪧 Tooltip​

Tooltip now can be anchored to the target element, can be hovered over, and supports dynamic content (updates if the content changes) (docs).

📏 Axis​

Axis now automatically hides overlapping labels (docs) and supports label rotation (docs).

🔵 Bullet Legend​

You can set the orientation of Bullet Legend to 'vertical' (docs).

💬 Discord​

Unovis now has a Discord channel! Join us to say hi, ask questions, and stay updated with the latest news.

Other changes​

Enhancements​

• Testing | Add Cypress and Percy for visual testing #419
• Component | Brush: Additional styling options via CSS variables #392
• Website | Upgrade to Docusaurus V3 #486
• Website | Gallery: Range plot #390
• Website | Gallery: Scatter Plot with Varied Shape #370
• Website | Gallery: Donut Example #367
• Website | Add new composite chart section and dual axis chart #383

Bug Fixes​

• Component | Scatter: MakesizeScale immutable to prevent sizeRange collisions #411
• Component | Scatter: Label rendering fixes #413
• Component | TopoJSON Map: Various fixes #425
• Core | Bug: XY-container size rendering fix #431

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.