• Links between nodes in a single-level sequential layout are now always drawn correctly.

Features

• Create beautiful and coherent nodes with our new image labels. You can now use an image as a label, or use ReGraph's expanded advanced node styling to render images alongside text and font icon labels. See the Advanced Node Gallery story.
• The Getting Started guide to Create New ReGraph App now uses Vite as a build tool to benefit from the package manager's quick setup and modern development features.

Enhancements

• The number of images and font icons that ReGraph supports is now limited only by the user's hardware. ReGraph will performantly display up to 900 distinct images and font icons. Using more than this is not recommended as it may affect chart rendering performance.

Bugs Fixed

• Open combos now resize correctly if their child nodes are resized to an undefined size (which defaults to 1).
• Nodes with dimensions set to 'auto', containing multiple positioned labels, are now sized correctly around these labels.
• Styling aggregate links with onItemInteraction no longer incorrectly shows a fade-related warning in the console.

We've added a new Try KronoGraph page to help you learn more about KronoGraph, our timeline visualization product. The page features an intro to KronoGraph and access to a number of demos integrating KronoGraph with ReGraph:

• Phone Call Analysis (formerly Timeline Analysis showcase on our site),
• Network Traffic Analysis
• Anti-money Laundering

Visit this page any time by clicking the banner on the main page.

Bugs Fixed

• Aggregate links between combos now always use the correct combo ids.
• Calling the fit instance method without changing the view no longer fires an onChange event after interacting with the chart.
• The TypeScript definition of the onLinkAggregation's setStyle function no longer contains an incorrect id property and the documentation no longer incorrectly states that you can set a custom aggregate link id.

Enhancements

• To answer a popular request, we've added a new TypeScript version of the Annotation story.
• We've made improvements to the packing algorithm which means that using 'circle' packing may now be up to 40% faster for large datasets.
• ReGraph now fully supports Leaflet versions 1.9.x.

Bugs Fixed

• A single onViewChange event is now invoked when the chart is first loaded.
• Moving combo contents out of a combo now resets offsets of any links to its children.
• Opening and closing combos with large numbers of children is now more performant.
• Changing a child link's aggregateBy value to undefined now removes the link from the aggregate.
• Nodes with dimensions set to 'auto' are now sized correctly when they contain labels with textWrap set to 'normal'.
• An aggregate link is no longer created if its id is already in use by a non-aggregate link, and a warning is shown.
• If a component is unmounted when rendering data, any unreturned promises are now caught and not reported as errors.
• We've fixed some issues where child items or their decorations were not always fully contained within the parent combo's boundaries.

• Resizing a window on MacOS machines with a specific hardware setup no longer draws temporary artefacts on the chart.

• Our recommended version of PDFKit for PDF export is now v0.14.0. If you are using the previous recommended version 0.12.1, we encourage you to update to v0.14.0 as it addresses a vulnerability in a dependency of PDFKit.

Features

• Discover the power of sequential in open combos with the new sequential arrangement. Set in the arrange property in the combo setStyle function, the sequential arrangement can help you drill down into sub- hierarchies and explore and interpret tiered data more easily. See more in our new Sequential Arrange story or in the updated Cloud Security showcase.
• We've made sequential significantly more adaptive when handling data changes and small layout changes such as adding or deleting items. As a result, sequential now makes only necessary movements that preserve positions of existing items in the component as much as possible. Explore the improved behavior in the Adaptive Layouts story.
• When using sequential layout or arrangement, the new stretchType property controls how individual levels are distributed when they contain items with varying sizes.
• We've added an improved API for setting link paths, which was previously only possible at the layout level. There is now a new linkShape property for setting link paths for the layout, and a separate linkShape property for setting this for combos, so that you can fine-tune the appearance of your chart more effectively.

Enhancements

• We've added a new page on Accessibility with useful information about the Web Content Accessibility Guidelines ( WCAG 2.1) and ReGraph.
• The getItemAtViewCoordinates, getItemInfo and getViewCoordinatesOfItem instance methods are now in beta. You can still share any feedback by contacting us.
• PDF export is now more robust as it no longer requires using blob-stream as a dependency, and it is easier to use especially when passing a custom PDFDocument. See it in the updated PDF Report story.

Bugs Fixed

• Updating a node font icon now works as expected.
• ReGraph now meets strict CSP directive for style-src.
• Using combos with very large datasets is now more performant.
• Fixed an issue with styling aggregate links using onItemInteraction.
• Some dependencies that were previously incorrectly marked as required are now listed as optional.
• Styling charts with very large datasets using onItemInteraction no longer causes a performance issue.
• Using getViewCoordinatesOfItem to get information about glyphs on open combos now works as expected.
• Using getViewCoordinatesOfItem to get information about labels on nodes styled with an array of label objects now works as expected.

Deprecated APIs

• We've deprecated curvedLinks. We recommend using linkShape instead.

• Aggregate link selection is now correctly reported in the onChange event.
• Deleting a node at an end of an aggregate link always fires an onLinkAggregation event.
• Aggregate links between nodes that are combined or uncombined are now always displayed correctly.
• Interaction styling for combos is now applied/removed only after the open/close animation has finished.
• Using the getViewCoordinatesOfItem method to get coordinates of nodes with a shape property now returns correct results.

Styling for open combos

Open combos now support styling features from our 4.0 Node Styling release! Organize data in your open combos in line with your application's look and feel by using features such as multiple labels, custom label styling or pixel-perfect label positioning.

For rectangular nodes and combos, you can now set a label to minWidth: 'stretch' or minHeight: 'stretch' to get a bar label that fills the whole height or width of its parent and adjusts to any parent size, which makes it great to use as a header. In open combos, bar labels also don't get overlapped by the combo content.

In addition, open combos now support border radius to help you achieve consistent corner styling across labels, nodes, and open and closed combos alike.

And last but not least, you can now add glyphs to open combos and style and position them in the same way as glyphs on closed combos. If you style nodes or combos with both glyphs and labels, labels are drawn over glyphs by default. To reverse the order, set the new legacyGlyphAndLabelOrdering option to false.

See the new features come together in our new Network Alerts and Cloud Security showcases, or head to the Styling docs to see a new section on open combo styling.

Uncluttered view with link aggregation

Summarize links between the same pairs of nodes or combos with our new link aggregation feature.

Aggregate links represent their child links and visually reduce the number of connections in the chart, but still preserve all the data about the underlying links. To turn on link aggregation in your chart, set the aggregateLinks prop to true.

If you have different types of links in your chart, you can use the aggregateBy property to create more granular aggregation rules, and also set the aggregateByDirection property to take link directions into account.

Aggregate links can also be styled, for example to provide information about the underlying links using a summary glyph or to match your existing chart styling. To do this, pass the styling in the setStyle function of the new onLinkAggregation event.

To get started with link aggregation, head to the Basic Link Aggregation story or read more in our Aggregating Links docs.

• All features in this release are in beta. You can share any feedback by contacting us.
• We have changed the default alignment of label borders which is in beta from 4.0. The inside of the label border is aligned with the inside of the parent node/combo border. Previously, the outside of the label border was aligned. To get the previous label position, add a label margin that equals to the label's border width. For more details or help, please contact us.

Enhancements

• We've added a new Save and Load story to show you how to capture and reload chart states in ReGraph.
• Styling charts with very large datasets with onItemInteraction is now significantly faster.

Bugs Fixed

• Link offsets between combos and other items are no longer drawn incorrectly due to hidden summary links.
• Using onItemInteraction to add hover styling on open combos now works as expected.

• Fixed various issues with watermarks.
• Updating label properties in a node label object now works as expected.
• The worldCoordinates instance method now correctly rounds outputs.
• Loading a chart with a set view prop fires a single onViewChange event.
• Passing a layout in the layout prop and undefined in the positions prop on the same render always runs a layout.
• Changing the tightness inside a combo with a concentric arrangement no longer causes unexpected movement of child items.
• The 'sans-serif' font is always used by default when a custom font is set incorrectly or doesn't exist and fails to load into the chart.

Enhancements

• We've addressed an issue caused by a change to our existing external source of default map tiles. As a result, ReGraph now uses OpenStreetMap, licensed under the ODbL License, as the default map tile provider. We recommend that you set your own provider in the tiles property or check that your use is in accordance with the Tile Usage Policy before you deploy your charts with map mode to production.

Bugs Fixed

• Panning and zooming a chart containing a large number of open combos is now more performant.
• Exporting charts with curved links and color gradients no longer causes an error.
• Using the sequential layout with a tightness value of 4 or less now produces the expected amount of space between items.
• Adding datasets with a very large number of links into the chart is now more performant.

Features

• After a period of improving, testing and implementing your feedback, rectangular combos are now officially out of beta!
• In this release, we made combos even more customizable with the new tightness option. Available for both circular and rectangular combos, tightness lets you control how tight or spread out the items are when they're arranged inside the open combo. You can set it in the arrange property passed to the setStyle function of the onCombineNodes event. Try it out in different combinations in the Grid Arrange story, and head to the Combo Tightness story for an example on a realistic dataset.

Enhancements

• We've added a new documentation section About ReGraph that contains useful information about our development process.
• The tightness property for the structural layout now affects the spacing between leaf nodes as well.
• Similarly, the tightness property for the sequential layout, with the stacking option set to 'grid', now affects the spacing between the stacked nodes.

Bugs Fixed

• A playing time bar no longer pauses unexpectedly.
• Adding a large number of items to a combo no longer causes a performance issue.
• Zooming with very small bordered labels now produces consistent results at all levels.
• A state change animation of a node's size using the shape property now works as expected.
• Using onItemInteraction to style items with images no longer causes a brief opaque flicker.
• Using onItemInteraction to style charts with many items containing sub-items no longer causes a performance issue.

• Using onItemInteraction to style and unstyle a combo which was implicitly faded by setting fade: false on another item no longer produces an error.

Features

• You can now set fade: false in the setStyle function passed to the onItemInteraction event handler to specify which items are foregrounded during an interaction. This new approach is both easier to use and 400% faster in terms of performance. See how it works in the Neighbors story.
• We've added a new Geospatial Combos story that shows how you can simplify geospatial networks by grouping items into combos.
• The orderBy property for sequential layout now accepts a sortBy option to specify whether the order should be ascending or descending. Try it out in the Hierarchies story.
• The sequential layout is now 2x - 5x faster when running on a dataset with no set levels where the positions are calculated automatically.
• The improved site-wide search now simultaneously displays search results from the ReGraph SDK site, relevant Cambridge Intelligence blog posts and webinars.

Bugs Fixed

• Interaction styling on nodes is now always correctly replaced by the node's styling when the interaction is over.
• Adding nodes that have labels with a borderRadius to some existing charts no longer makes the chart unresponsive.
• Creating combos with custom IDs no longer causes an issue in ReGraph.
• Setting the view to a fixed position by setting the view prop now works correctly even when animate is set to false.

• Adding new items with invalid or partial styling simultaneously into new and existing combos no longer makes the chart unresponsive.

A new era of node styling!

ReGraph 4.0 features major improvements to the customizability of nodes and node label styling.

It introduces custom-size rectangular nodes which offer even more space for information and look especially sleek in grids, with rectangular combos and with our sequential layout. You can also style them with rounded corners.

In another important enhancement, ReGraph lets you add multiple labels on a node to create information-rich and styling-rich nodes. Labels can truly take your node design to the next level - especially when you also use the new label styling API that lets you fine-tune the look of your labels, use them as node styling tools or turn them into UI elements.

Custom-size rectangular nodes

Our improved rectangular nodes retain the same adaptive behavior and abilities as the default circle nodes. To create them, pass an object with width and height dimensions in the shape property. You can also give them rounded corners using the node border's radius. Get inspired in our new Cyber showcase and in the new Detail on Zoom and Advanced Node Gallery stories.

Multiple label API

To add multiple labels on a node, pass the labels as an array of objects in the label property. Each object is a label that can have a text or a fontIcon property, and that can also contain other styling options from the label styling API. See how it works in the Advanced Node Gallery or in the updated Node Gallery story.

Advanced label styling

With the new node label styling API, you can do things like:

• Place your labels anywhere inside or outside nodes using the position property.
• Customize the spacing inside or outside labels with margin and padding properties.
• Format long content inside labels with textWrap property.
• Optimize font size for any node size or zoom level with fontSize set to 'auto'.
• Set the minHeight, maxHeight, minWidth and maxWidth of labels.

See also the Node Gallery story, Node Label API and the Advanced Node Styling docs.

Custom interactions with labels

With an unlimited number of labels come unlimited possibilities. As well as a source of information, here are some other examples of use:

• Multicolor node styling (empty labels with set backgroundColor used as color blocks)
• UI elements (e.g. progress bars sized by values in the nodes' data properties)
• Buttons with interaction styling (using the onClick and onItemInteraction events)

Get started with the new APIs

Multiple labels and label styling are straightforward to use whether you're starting from scratch or updating existing code. To enable unlock the new APIs, place your existing label or font icon inside a label property array of objects, for example:

label: [
  { text: 'label' },
  { fontIcon: { text: '☺︎' } }
]

Enhancements

• To improve memory usage and performance, the value of data is no longer deep cloned when the property is imported to the chart model or retrieved from it.
• Added a number of Playground improvements such as an option to format code in the Code and Data tabs using Prettier.
• ReGraph now uses Leaflet v1.9.1.

Bugs Fixed

• Removing a donut border on a closed combo by setting the border's width property to 0 no longer removes the border of the open combo.

Breaking Changes

• Calling a chart instance method before the chart has finished mounting or after it has unmounted now correctly raises an error.
• Babel's modular runtime helpers @babel/runtime-corejs3@^7.20 are now a dependency of ReGraph. See our Dependencies docs for details.
• ReGraph no longer deep clones the data property object every time the property is imported to the chart model or retrieved from it. This affects all functions that accept or retrieve the property. To restore the previous behaviour, deep clone the data property object before passing it to ReGraph.
• We've made some breaking changes to the TS definitions. See TypeScript Changes.

TypeScript Changes

• Passing a list of Items in the View chart prop now correctly raises a TypeScript error.
• Improved return type definitions for image, export, viewCoordinates and worldCoordinates chart instance methods.

Deprecated APIs

• We've deprecated standard layout. We recommend using organic instead.
• We've deprecated the center option. Use the position option instead.

End of Support

• Support for Internet Explorer 11 has now ended.
• Support for legacy onChart- and onTimeBar- events has now ended.
• Support for LTA versions 1.11.0 and 2.4.0 has ended and the versions have been removed.