To use KeyLines in your project, download it and install it as a local package.
Before you upgrade, read our Upgrading documentation and check if any breaking changes or deprecations will affect your code.
Can't upgrade right now? You can find older versions of KeyLines here.
Overlap improvements for charts with large labels
Our organic and lens layouts (and the lens arrangement for combos) are now even better at reducing node label overlaps and creating a more readable chart.
When the tightness option is set to values between 1 and 5, nodes with large labels are spread out more accurately to create fewer label overlaps without obstructions to the view.
Explore the improved behaviour in our Insurance Fraud Analysis demo.
Bug Fixes
drag-end event handler now works as expected.Font icons ready in 1,2,3
Custom fonts and font icons are an effective way to improve both usability and aesthetics of your charts and bring their design closer to the rest of your application.
In this release, we've made icon font libraries even easier to integrate. As a result,
you can now enter the font icon name directly in the t
option on the fi property.
For font families relying on classes such as the popular Font Awesome, the string is treated as a class and rendered with the correct font weight settings. For font familes that don't rely on classes, such as Material Icons, the string is used as a ligature string to look up the correct icon.
For an even better developer experience with fonts and font icons, we are now also using and recommending the document.fonts property from the CSS Font Loading API as a more modern approach to font loading. We've implemented it in our demos as well as in our default Playground.
To learn more, head over to our updated Fonts and Font Icons documentation with brand new step-by-step tutorials.
Deprecations
We've added some legacy APIs to our list of deprecations:
KeyLines.getfontIcon() API as it's no longer needed.
Set the font icons directly in the t
option on the fi property.Take control over glyph border styling
Glyphs are incredibly versatile - you can use them as alerts, counters, short texts, decorations or even as interactive buttons. To make glyphs easier to use and integrate into your charts, we've introduced a more intuitive and customisable border styling API.
The new border object
features a colour property to set a border colour as previously available,
but it also has a brand new border width to customize the border width.
Explore the new API in the updated Node Styles and Style Links demos. We've also redesigned our Impact Analysis demo with an enhanced alert system with interactive annotation glyphs.
Enhancements
Deprecations
We've added some legacy APIs to our list of deprecations:
Bug Fixes
id in the pointer-move event.Elevate your designs with link label styling
We've introduced a number of new link label styling options to help you create richer and more cohesive chart designs.
The new border property lets you specify a border around your link labels and customise it with colour, width and even border radius. We've also added a new padding property that controls the amount of padding within your labels and make them stand out within your designs.
To quickly and easily differentiate selected links in the chart, use the new link label styling properties on the selectedLink API.
Explore our updated demos to learn more about the new link labels:
Enhancements
change events.
Bug Fixes
minHeight set to 'stretch' are drawn correctly on auto-sized nodes and annotations.
Enhancements
Bug Fixes
chart.load() in map mode now behaves as expected.
animate is set to false.
labelOffset
are now always exported as expected.
KeyLines.webGlSupport() failed to detect
an unsupported graphics backend.
chart.setProperties() in the handler of a
drag-over event in WebGL
now always applies the changes when the event is fired.A new way of displaying sequential data: introducing angled links!
Whether visualising elements of an IT infrastructure, or as a way of understanding complex relationships between companies and their subsidiaries, hierarchical charts allow you to explore and understand connections and dependencies within the data.
Angled links provide an orthogonally branching link shape, designed to be used with hierarchical data. Like curved links, they are automatically aligned with the orientation of the arrangement or layout.
They are ideal for displaying charts that reflect multiple levels of dependency and can be used with combos to enable large, multi-layered systems to be viewed, explored and drilled down into.
Explore the use of angled links in the Path Analysis in Trees demo:
See also our new Link shapes documentation to learn more.
Links now have their own link shape property
We've extended the way you can specify shapes of links in a chart to be even more flexible, by adding a new property, linkShape, to links.
While previously you could only set link path shape at the whole chart level, and also at combo level, you can now also specify the link shape for individual links. This means that you can use link shapes to represent different types of relationship in the same chart, as illustrated in the Cloud Security demo:
Explore the use of mixed link shapes in the Mixed Link Shapes demo, and see the Using a mixture of link shapes documentation to learn more.
Prioritise links to give them better visibility
Links can be shown clearly to the front of the chart by setting link priority.
This can be particularly useful when using angled links, which often partly overlay one another, to help surface and highlight specific paths through your chart.
Explore the use of link priority for viewing the attack path in the Path Analysis in Trees demo.
The features described above are currently in beta, which means that they are fully tested and safe to deploy to production, but we may still introduce breaking API changes in future versions. If you have any early feedback to help us refine them, please contact us.
Updated Vue tutorial
Following previous updates to other tutorials, we've now also modernised our Using KeyLines with Vue guide:
button
in the top-right corner of each code block.
Enhancements
Known Limitations
Bug Fixes
When visualising connected data, a beautiful chart is just the beginning — the next step is to tell the story behind the data.
KeyLines annotations bring a new dimension to graph visualisation, fitting seamlessly into your application and elevating your workflow.
Annotations add a narrative layer to your charts so that you can analyse, capture, discuss and share insights directly within the chart. You can annotate nodes, links and combos, and annotations will stay readable at any chart size and zoom level. For added context in documents or presentations, you can also export annotated charts using chart.export().
Start exploring annotations in our brand new Annotating Charts demo.
Turn your AI-generated or algorithm-based alerts into chart annotations and draw the attention of chart users to the most important parts of your network.
Through the power of KeyLines events, you can add interactive elements on annotations to allow your end user to deal with these alerts, creating an end-to-end in-chart process for visualising and resolving network alerts.
See an example of this in our updated Cloud Security demo.
Annotations can also be used to display real-time insights in a collaborative workflow between colleagues or investigators.
Thanks to the simple data-driven loading of KeyLines annotations, you can save and reload these user-generated or user-editable insights at a later time. To build on this workflow, you can export your chart with annotations into a shareable jpeg, svg, png or pdf format. Our new Annotating Charts demo shows an example of this create, edit and export workflow.
You have full control over the styling of your annotations to create the look that suits your application design and interface.
The annotation body, styled in the annotation properties, can show any content including text, images, font icons, or even simple buttons created using annotation labels. You can also add your own controls such as editable text fields using an HTML overlay.
The connector, styled in the connectorStyle object, lets you customise how annotations link to their subjects so that the connection is immediately clear to the chart users.
To help you explore the full range of possibilities, we've developed a new suite of annotation demos:
See also our new Annotations documentation to learn more.
Annotations are currently in beta. They are fully tested and safe to use in production, but we may still introduce breaking API changes in future versions. You can share any feedback by contacting us.
Updated React tutorial
Following previous updates to other tutorials, we've now also modernised our Using KeyLines with React guide:
button
in the top-right corner of each code block.
Enhancements
Chart Export out of Beta
We're delighted to announce that after a period of improving, testing and implementing your feedback, the chart.export() function is now officially in General Availability as an established part of KeyLines.
Bug Fixes
type property are now always correctly omitted from the chart.
minWidth set to 'stretch' and w set to 'auto'
now correctly ignore any value of maxWidth.
chart.labelPosition() on labels positioned with number values now always works as expected.
Breaking API Changes
Like our previous major releases, KeyLines 8.0 contains some breaking changes. Without them, we couldn't evolve KeyLines and deliver the features you want. We recommend reading 8.0 Breaking Changes carefully before you install this version.
Deprecations
We've added some legacy APIs to our list of Deprecations.
Advanced Notice: Retirement of KeyLines LTAs
If you are using either of these versions, we strongly recommend upgrading to the latest version so that you can make use of the full features of KeyLines.
End of Support
The following previously deprecated APIs have now been removed and are no longer supported:
bind() events, deprecated since 6.0: replaced with on() events.chart.bind() and chart.unbind(): use chart.on()
and chart.off() instead, see Chart Events.timebar.bind() and timebar.unbind(): use timebar.on()
and timebar.off() instead, see
Time Bar Events.tidy option in chart.layout(),
deprecated since 6.0: use
packing instead.dragPan chart option, deprecated since 5.5: use
panAtBoundary instead.element argument of KeyLines.create(),
deprecated since 5.3: use
container instead.KeyLines.setSize() function, deprecated since 5.3: no longer needed when specifying a container in
KeyLines.create().du property on nodes, deprecated since 5.3: no longer used.chart.getLastError() function, deprecated since 5.0: no longer relevant with the removal of bind and unbind events.assets option for KeyLines.paths(),
deprecated since 5.0: no longer used.KeyLines.dashedLineSupport() function, deprecated in 4.8: no longer applicable
to any supported browsers.Add images to labels!
You can now include images directly into your labels, giving you even more freedom to easily create unique, customised nodes.
Image labels can also be used in combination with other types of labels, so you can create beautiful, coherent, composite node labels made up of text, font icons and images.
Visit the Advanced Node Styles demo to see examples of how image labels can be used as a building block to create complex, meaningful node labels.
New tutorials to get you started quicker
To improve developer experience for anyone building their first application with KeyLines, we are modernising a number of tutorials from our Using KeyLines with... suite. Here are some of the changes we've made to our Javascript and Angular tutorials to make them even more helpful:
button
in the top-right corner of each code block.Find out more in our Using KeyLines with Javascript and Using KeyLines with Angular guides.
Enhancements
Bug Fixes
overview and navigation chart options now correctly accept Boolean values.Bug Fixes
Expand your KronoGraph experience
Graph and timeline visualisations are a match made in heaven - they both have their unique strengths that can work together to create intuitive and versatile analysis tools.
If you want to learn more about KronoGraph, our timeline visualisation product, and also explore how seamlessly it can be integrated with KeyLines, head to our new Try KronoGraph page.
The new page contains an introduction to help you understand KronoGraph's main features, and also gives you access to a number of KronoGraph demos that feature both KronoGraph and KeyLines - Phone Call Analysis (formerly Timelines with KronoGraph demo on our site), Network Traffic Analysis and Anti-money Laundering.
You can visit this page any time by clicking the banners on the Welcome page and Demos page, or by clicking on the Timelines with KronoGraph demo thumbnail.
Enhancements
Bug Fixes
textWrap set to 'normal'.Sequential arrangement in open combos
Sequential is the most advanced layout for viewing and exploring tiered data: it is great at automatically placing nodes in the best positions, and can be customised in many ways. The new sequential arrangement now unlocks all of these possibilities for combos too, and lets you drill down into sub-hierarchies within your data.
You can set the sequential combo arrangement in the arrange option of the
arrange(), combine() and
transfer() combo functions, and also in the arrange option of
chart.expand(). The arrange object accepts any
options available for customising sequential layout including level, orderBy and others.
We've also added a new stretchType option for both sequential layout and arrangement that controls how individual levels are distributed when they contain items with varying sizes.
See the sequential arrangement in our updated Combo Options demo, or head to the Cloud Security demo which now uses the sequential arrangement to organise open combos and make them easier to interpret.
Smooth and adaptive sequential layout
Our sequential layout is now even better at handling data changes and small layout changes, making it more consistent and easier to follow even for dynamically changing datasets.
When running a full sequential layout using chart.layout(),
setting the mode option to 'adaptive'
ensures that sequential makes only necessary movements to adjust to data changes
and preserves the relative positions of existing items in the component.
The improved behaviour is also applied by default when using chart.expand() to add new items,
and results in much smaller and more incremental changes to the layout.
See the improved behaviour in the Adaptive Layouts demo.
Setting link shape inside open combos
We've redesigned and improved the way you can specify shapes of link paths in the chart.
While previously you
could only set link path shape at the whole chart level,
you can now use the new linkShape API to set it separately at chart level
using chart.layout() or
chart.expand(), and also at combo level
using chart.combo().arrange(),
and the arrange option for
chart.combo().combine() and
chart.combo().transfer().
When the linkShape option is set to 'curved', the orientation of curved links
in the layout or inside open combos is automatically aligned with the relevant
orientation option.
Enhancements
PDFDocument.
See it in the updated PDF Reports demo.
Deprecations
We've added some legacy APIs to our list of deprecations:
path option for linkStyle in chart.options().
Use the new linkShape API instead.
Bug Fixes
style-src.chart.show() on very large networks using combos is now more performant.chart.animateProperties() now works as expected.chart.getItem() return types for a node
now correctly includes x and y as required.link-aggregation event.New level of styling unlocked for open combos!
In this release, we bring you three beta features that we think you'll love - styling for open combos, glyphs for open combos and link aggregation.
Open combos now support all of the styling features of the 7.0 Node Customisation release! Now you can organise your data while maintaining a consistent look and feel with the rest of your chart and application, by using features such as:
We've added a new Cloud Security demo and updated our Network Alerts demo to show you examples of open combo labels. You can also head to the new Advanced combo styling documentation for more details, or see the changes in the oc property for open combo styling.
Based on a popular feature request, we've included a simple way to create a bar label that fills the whole height or width of a rectangular node or a rectangular open or closed combo. This label adjusts to any combo size but doesn't get overlapped by combo content, making it perfect to use for example as a header.
To turn a label into a bar label, simply set it to minWidth: 'stretch' or
minHeight: 'stretch'.
And to round off the styling enhancements, we've also added a borderRadius property on open combos. This means that if your application design features rectangular shapes with rounded corners, you can now keep the corner styling consistent across labels, nodes, and open and closed combos alike.
You can find all the new features in our new Cloud Security demo that uses cloud infrastructure data and features modern rectangular design with rounded corners and styled labels.
Glyphs on open combos
Glyphs are a powerful and versatile design element - you can use them as decoration, a source of information, but also as an interactive control with customisable actions.
Now you can take advantage of this also when styling your open combos. Add your glyphs in the g property for open combo styling and style and position them in the same versatile way as glyphs on closed combos.
The default red counter glyph is hidden on open combos. If you want to display it, you can set the comboGlyphOnOpen option to true.
If you happen to style nodes or combos with both glyphs and labels, you might find it useful to control their drawing order. By default, labels are drawn over glyphs, but if you set the legacyGlyphAndLabelOrdering option to false, the order will reverse and glyphs will be drawn over labels.
See the new glyphs in our Social Media Analysis demo, which has been treated to a complete styling overhaul.
Prune cluttered links with link aggregation
Our new link aggregation feature makes your chart clearer by summarising links between the same pairs of nodes or combos.
These aggregate links represent their child links and visually reduce the number of connections in the chart, but still contain all the data about the underlying links. You can turn on link aggregation in your chart by setting the aggregateLinks option to true.
If you have different types of links in your chart, you can also use the aggregateBy option to create more granular aggregation rules, and also set the aggregateByDirection option to create an aggregate link for each direction.
Aggregate links can be styled, for example to make them more informative at a glance by adding a dynamic width or a summary glyph, or to match them with an existing chart styling. Styling of aggregate links can be done in the event handler of the new link-aggregation event.
Head to the new Aggregating Links demo to try out different aggregating options, or read more about this feature in the new Aggregate Links documentation page.
Important information about beta features
Bug Fixes
tiles map option repeatedly
while also repeatedly showing/hiding map with show() and hide()
no longer causes issues.view-change event.chart.worldCoordinates() function now correctly rounds outputs.adapt set to 'all' is now faster.end1 and end2.
tightness inside a combo with a concentric arrangement
no longer causes unexpected movement of child items.
chart.expand() with animate
set to false no longer causes unexpected movement.
chart.setProperties() now correctly updates
the label for both closed and open combo states.Access information from multiple sources with the new site search
The KeyLines SDK site is a rich source of information about our features ranging from interactive demos to detailed documentation. To make sure you can access all the information quickly and easily, we've added a new site-wide search box in the top navigation bar that displays search results from the entire SDK site.
In addition to this, it also includes relevant Cambridge Intelligence blog posts and webinars so you don't miss out on any useful information from our website.
Enhancements
merge().
Bug Fixes
tightness value of 4 or less
now produces the expected amount of space between items.Rectangular combos in top shape and out of beta!
After a period of improving, testing and implementing your feedback, rectangular combos are now officially in General Availability as an established part of KeyLines.
In this release,
we have made rectangular combos even more customisable with the new tightness option for combos.
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.
The new API is available for
arrange(),
combine() and
transfer() combo functions,
and also for the arrange option of chart.expand().
Try out different combo combinations with tightness
in the updated Combo Options demo, and see how we integrated the option in the
Arranging IT Networks demo.
Improvements to layout tightness
Bug Fixes
chart.expand() to add a large number of items to a combo
no longer causes a performance issue.
adaptiveStyling no longer causes
a brief opaque flicker.
Sequential layout improvements
Control over items order in sequential
The orderBy property available for the sequential layout when running
chart.layout() or
chart.expand()
now offers even more flexibility when ordering your items within the sequential's levels.
The property can now also be set to an object that accepts a new sortBy option
where you can set whether the order should be ascending or descending.
Try it out in the updated Display Hierarchies demo.
Sequential layout performance improvements
We've improved the way sequential layout automatically calculates positions of nodes in the hierarchy if no distinct levels are set. As a result, running a sequential layout with no set levels is now typically 2x - 5x faster.
React Integration demo with font icons and tooltips
The former 'React Integration' and 'React Integration: Time' demos are now merged into a single React Integration demo which now also uses font icons and tooltips to help you implement even more features.
Enhancements
Bug Fixes
width and height to 0
for certain nodes in a chart could sometimes make the chart unresponsive.
mode set to 'adaptive'
on very large networks could sometimes make the chart unresponsive.
{ vertical: 'inherit' }
didn't have any effect when it followed a label positioned with a compass point value.
If you can design it, we'll help you implement it
With design and UX departments often involved in the early stages of development, integrated development kits are under close scrutiny to align with the design language of their customers' applications, and to provide an intuitive user interface and a great user experience. This is where KeyLines 7.0 comes in - to help you implement any design vision without compromises.
To complement designs with modern shapes, we're introducing new rectangular nodes. These nodes, which can even by styled to have one or more rounded corners, retain the same adaptive abilities and behaviour as the default circle nodes. In addition, they offer even more space to display information and look especially sleek in combination with our rectangular combos or with our sequential layout.
We've also made two major improvements to node labels and their styling, making labels the pefect tool for infinitely flexible node customisation. These improvements are adding the option to create multiple labels on a node and adding an extensive label styling API. With these two improvements, you can now get more information-rich and styling-rich nodes that will make your charts fit seamlessly into your application.
And last but not least, because nodes can now have any number of labels, labels can now also be a lot more than just a source of information. You can use them to add the finishing touches to your node styling, or even use them as user interface elements with custom interactions and interaction styling.
Sounds good so far? Here are some more details:
To create rectangular nodes, set their width and height in the w and h properties. You can also set a custom radius to make one or multiple corners rounded using the borderRadius property.
For examples of rectangular nodes, head to our new Advanced Node Styles and Detail on Zoom demos, or see the updated Impact Analysis and Arranging IT Networks demos.
The existing t property
has been updated to enable adding multiple text or font icon labels on a node.
While previously, the property only accepted a string as a label,
the t property now also accepts an
array of objects where each object is a node label.
In a t property array of objects, each object can have a nested
t string property, making it a text label,
or an fi property, making it a font icon label.
In addittion to these, each label object can contain additional styling properties from our new node label API
to further style the text label or the font icon.
To see what the new API looks like, take a look at the examples in the brand new Advanced Node Styles demo or in the updated Node Styles demo.
We've added a number of new properties to give you more flexibility when styling your node labels. With the new APIs, you can for example:
The list doesn't end there - for a full list of what's new, go to the Node Label API Reference or our new Advanced label styling documentation.
As you're no longer limited with the number of labels your nodes can have, you can use labels to complete or even change the styling of your node, add unique elements, or add user interface elements you couldn't achieve before. Here's a few outside-the-box examples of what labels can also be:
The multiple label and label styling APIs are straightforward to use whether you're starting from scratch or updating an existing code.
To enable multiple label API and flexible label styling,
wrap your existing label or font icon inside an object and place it in a t property array of objects, for example:
t: [
{ t: 'label1' },
{ fi: { t: KeyLines.getFontIcon('fa-user') } }
]For more examples and a full list of new APIs, see the Node Label API Reference.
Note that multiple label API and label styling API are currently in beta. You can share any feedback by contacting us.
Enhancements
KeyLines.promisify() anymore.
You don't have to change your code but you can remove your call to the function.
If you want to continue using callbacks, see Using KeyLines with callbacks.d property is no longer deep cloned
when the property is imported to the chart model or retrieved from it,
improving the memory usage and performance of KeyLines.Bug Fixes
chart.serialize() on charts in map mode.bw property to 0 also removed the border of an open combo.chart.combo().info() didn't contain d properties whose values started with an underscore.Breaking API Changes
Like our previous major releases, KeyLines 7.0 contains some breaking changes. Without them, we couldn't evolve KeyLines and deliver the features you want. We recommend reading 7.0 Breaking Changes carefully before you install this version.
Deprecations
We've added some legacy APIs to our list of deprecations:
tc node propertyre optionchart.contains() functionIf any of these features are important to you, please contact us so we can prioritise them.
End of Support
The next level of timeline analysis with KronoGraph 2.0
We've updated our Timelines with KronoGraph demo to use KronoGraph 2.0.
The latest version of our timeline visualisation toolkit introduces major improvements to viewing data and interacting with it. KronoGraph now draws all entities and their events in the timeline, which gives you an instant overview of your dataset.
To navigate through the overview, it uses a brand new lens feature that lets you enlarge a smaller set of entities, scroll, and locate and investigate any interesting data points. At the same time, lens view keeps the context of where you are in your data, so you can work efficiently even with large datasets.
Bug Fixes
Explore demos from new angles in the KeyLines Playground
Examining and editing a chart's code in the playground is a great way to explore features in KeyLines. In this release, we've unlocked a vast supply of examples to try out as our demos can now be opened in the KeyLines Playground.
To open a demo in the playground, navigate to the Playground button located next to other tabs in the demo's right-hand side navigation panel. Clicking the button opens the demo in a new playground window where you can edit the demo's code. You can even access the demo's Data, HTML and CSS tabs and add your own data or code there, which is completely secure as everything is encoded in the URL of the playground and no data or code are sent to a server.
Note that as a result of this more modern and convenient way of editing demos, we've now removed the possibility to download the demos.
Bug Fixes
velocity on links didn't decrease the level of CPU usage as expected.Full control over rows and columns in combos
If you use grid arrangement to arrange the content inside your open combos, you can now also try the new gridShape option to control the number of rows or columns.
The gridShape
option, which can be specified in several combo handling functions and in chart.expand(),
accepts an object where you can set the rows or columns options to a suitable number.
Defining a custom grid dimension such as a single row or a column can be especially useful to visualise flows, processes or supply chains within a larger hierarchy, especially when paired with our sequential layout. It can also help scale your combos for better fit and readability.
To try it out, head to our updated Combo Options demo.
Get creative with the KeyLines Playground!
KeyLines now comes with its own Playground, an interactive code editor and live visualisation tool.
When you open a playground, you can build or edit a KeyLines application directly in your browser and instantly see the results. Your code is executed only in the browser, which means that no data is stored or sent to a server. As a result, the playground is completely secure to use even with your own data. And it's straightforward, too - all you need to do is convert your data into the KeyLines JSON format that describes nodes and links and paste it in the Data tab.
Each time you run your code, the data and code are encoded into the page URL which you can bookmark, save or share with others.
Use playgrounds to collaborate with others or to ask for support - if you send us a support query with your issue in a playground, we can see what’s going on and we can get back to you with a working code solution.
To open a new playground, navigate to Playground in the top menu bar of the SDK site.
Faster and smoother installation experience
For a faster and more modern installation experience we now deliver KeyLines as a Node.js compatible package in a .tgz format. The KeyLines package is compatible with all popular Node.js package managers such as npm or yarn.
The package comes with both ESM and UMD bundles of KeyLines to make it easier to integrate into modern JavaScript applications.
We've also updated all of our framework wrappers (Angular, Vue, React) to use this modern approach, which will give you a better experience when integrating KeyLines with these frameworks.
For more detailed information see our updated installation guides in the Installing KeyLines section of the Documentation. We've also added two brand new installation guides for popular module bundlers: Using KeyLines with Webpack and Using KeyLines with Rollup.
Note that to allow the download to be installed easily, the KeyLines download is now provided as a .tgz file rather than a .zip file.
For backwards compatibility, the keylines.js file is still available in the same folder, and can be used exactly as before.
Enhancements
Bug Fixes
chart.expand()
is now correctly included in the API Reference documentation and TypeScript definitions.Stacks of improvements for sequential layout
Hierarchical data with wide trees of nodes and densely populated levels can be very difficult to analyse when viewed in full. This is because wide layouts often need to be zoomed out to fit the items in, offering very little detail without any additional scrolling or zooming.
In the new stacking property, you can now set the arrange option to 'grid' to stack groups of same-level nodes with identical neighbours into neatly organised grids. This will give you a full view of the layout at a much more readable zoom level.
In addition, the existing packing option now also applies to the sequential layout. While by default, sequential still aligns nodes on the same level across components, you can now choose the way you pack the components in your chart to use your screen space even more efficiently.
See how these new features instantly transform a challenging sequential layout in our brand new Navigate Large Hierarchies demo.
Note that if you are setting packing for all layouts, the setting will now also apply to the sequential layout. If you want to keep the previous behaviour, set packing to 'aligned' for sequential.
Ordering nodes within sequential levels
In another useful improvement to our sequential layout, we've added a new orderBy property to help you organise nodes within each level of sequential. This property specifies which property in a node's custom data object is used for ordering. Either strings or numbers can be used for ordering.
Head out to our Display Hierarchies and Impact Analysis demos which use this new feature.
CORS mode for loading external images
The new KeyLines.corsAdapter()
function lets you set the value of the crossorigin HTML attribute
whenever KeyLines is trying to access an image from a third-party domain.
This allows you to configure the CORS requests sent by KeyLines
to include user credentials when accessing secure resources behind authentication requiring cookies.
Enhancements
Bug Fixes
Supercharging KeyLines layouts
There is no such thing as too much performance, especially when you're working with very large datasets. To make your applications run faster and smoother, we've significantly improved the performance of two of our popular layouts - lens and organic.
The updated algorithm of our organic layout now requires up to 15% fewer position calculations which noticeably decreases the amount of time needed to complete the layout. In addition, adding or expanding items is now also 25% to 200% faster and results in less movement while the layout adapts to changes, as you can observe for example in our Adaptive Layouts demo.
The performance of our lens layout has increased by 500% compared to previous releases with especially notable differences for very large datasets. As lens is also used by default inside our circular combos, creating combos is significantly faster and combo interactions are even smoother than before.
Vue Integration demo with font icons and tooltips
With the release of Vue 3, we took the opportunity to overhaul and enhance our Vue integration demos.
The former 'Vue.js Integration' and 'Vue.js Integration: Time' demos are now merged into a single Vue.js Integration demo which now also uses font icons and tooltips to help you implement even more features.
As the KeyLines Vue component now supports Vue 3, we've also updated the demo to use Vue 3.
Bug Fixes
ComboAdaptMode type was not correctly defined.backgroundAlpha did not always update chart.timebar.setContainer() did not always correctly update the element containing the time bar.Advanced notice: Retirement of KeyLines 4.8 LTA
We intend to remove the KeyLines 4.8 LTA version from 1 November 2022.
If you are using this version, we strongly recommend upgrading to the latest version so that you can make use of the full features of KeyLines.
Generate captivating PDF documents with chart export
The chart.export() function now also generates static images of charts in PDF format offering you even more ways to present, share or publish your KeyLines charts.
To get started, add the required dependencies to your application and
set the type option for chart.export() to 'pdf'.
KeyLines gives you full control over the appearance of the output to ensure that your generated documents suit your needs and requirements perfectly.
You can use the doc option to pass a custom PDFDocument from
PDFKit with your own specification,
taking advantage of any features of the PDFKit API to create tailor-made documents with custom look and feel.
To give you some inspiration we've added a PDF Reports demo featuring examples with various fonts and layouts. We've also updated the existing Export Chart demo to offer PDF export.
The chart.export() function, including PDF export, is still in beta. You can share any feedback by contacting us.
Please note that, as set out in the Third Party Libraries page of our SDK site, the optional functionalities of PDF export and map mode require the use of open source dependencies.
Enhancements
extents
option for chart.export() that lets you specify whether you want to export the whole chart or its current on-screen view.
Bug Fixes
'auto' did not fall back to canvas mode when
hardware acceleration was disabled in Chrome v93 and Microsoft Edge v93.Rectangular combos looking sharp in beta
Thanks to your feedback, we've improved rectangular combos and grid arrangement and we are moving them to beta, which means they are stable and ready for production.
The updated grid arrangement for rectangular combos now preserves the clean grid view with zero overlaps even after actions such as opening or closing combos or transferring items.
We've also added a new adapt
option for a number of combo handling functions and chart.expand.
The option lets you control how items at the top chart level or inside parent combos
adapt to combo or child combo changes. You can use it to partially or completely
disable this behaviour,
which may be useful for example to preserve the top level layout or to rearrange items manually.
By setting adapt to 'inCombo' when using rectangular combos with sequential,
the sequential layout is preserved throughout any combo actions,
making the chart look smart and polished at all times, just like in our
Arranging IT Networks demo.
See also the Combos: Basic and Combos: Reveal Links demos for even more examples of rectangular combos.
Note that we've made 'grid' the default arrangement option for rectangular combos (i.e. when the combos option is set to 'rectangle').
Angular Integration demo with font icons and tooltips
With the release of Angular 12, we took the opportunity to overhaul and enhance our Angular integration demos.
The former 'Angular Integration' and 'Angular Integration: Time' demos are now merged into a single Angular Integration demo which now also uses font icons and tooltips to help you implement even more features.
As the KeyLines Angular component now supports Angular 12, we've also updated the demo to use Angular 12.
Bug Fixes
chart.expand in some charts consisting of only single node components could cause overlapping.chart.export where exporting strings with commas into SVG could fail to export commas.chart.export.view-change event.Dark mode has arrived in KeyLines
In the past few years, dark mode has undoubtedly become one of the most popular features in user interface design.
In response to popular demand, KeyLines now offers a quick and easy way to switch the theme of its navigation tools (i.e. chart navigation controls, time bar control bar and the overview window) to dark mode so that they integrate seamlessly into your dark mode styled apps without any need to create custom navigation tools.
To do this, simply set the new controlTheme option for chart and controlBarTheme option for time bar to 'dark'.
We've also updated our own dark mode demos to use this - for example Bitcoin Transactions, Arranging IT Networks, Filter Data Breaches or Impact Analysis.
Organic layout out of Beta
We're happy to announce that after a long period of improving, testing and implementing your feedback, the organic layout is now officially in General Availability as an established part of KeyLines.
Even more so, it is currently our fastest and most versatile force-directed layout. It adapts incrementally to the data changes, allowing you to focus without any disruptive movement, and delivers great results even when used with very large and complex datasets.
See how it handles the challenges of network change and large data in our Social Network Analysis, Mafia Network and Visualising Big Data demos.
Advanced notice: End of support for IE11
We intend to end support for Internet Explorer 11 from 31 October 2021.
For a list of supported devices, operating systems and browsers, see Compatibility & Supported Platforms.
Bug Fixes
packing set to 'circle' or 'adaptive' could cause the chart to become unresponsive in very specific circumstances.chart.export().Simplified language support with RTL auto
Sometimes the best features are the ones you don't even have to think about implementing.
This is why KeyLines now supports automatic detection of right-to-left (RTL) and bidirectional (BIDI) languages in both WebGL and Canvas.
The RTL auto support is simply applied automatically once KeyLines detects any RTL characters, so you can be sure that any of your RTL and BIDI content is always displayed correctly without any need to set it.
See it for yourself in our updated Multiple Languages demo.
Note: To make use of the new behaviour, make sure you remove the dir attribute and direction css property from any KeyLines components.
Tracking progress with organic
Organic is already the layout to rely on when you have a large, complex dataset to visualise, and now it also offers a better user experience.
Organic layout now supports incrementally reporting progress events, which give you more feedback on the progress when the layout is taking a while to run due to the size of the dataset. These events can be especially useful when running layouts for very large datasets, because you can use them to display elements such as a preloader or a progress bar and improve the user's experience.
Take a look at an example in our Visualising Big Data demo.
Enhancements
Features out of Beta
We're happy to announce that a number of features are out of Beta development. These are now established features of the KeyLines toolkit:
linkStyle and
flow property of selectedLinklinksBug Fixes
Exporting charts in high resolution and more output types
When generating KeyLines charts for purposes such as printing or sharing, our customers rely on a high quality output that preserves all the information and high standard of the original and delivers a detailed and insightful result.
This is why we are very pleased to introduce a brand new chart.export() function, which allows you to generate charts in high resolution and in several popular output types. For the first time in KeyLines you can now export to vector-based graphics, with support added for SVG, as well as higher resolution support for PNG and JPEG (to 16K). Regardless of the size of your dataset, this function will produce stunning results for your KeyLines charts in both chart and map mode.
Currently in beta, you can try out the new features in our updated Export Chart demo.
Organic responding to incremental changes
Our organic layout is now even better at handling small changes in the layout. You will notice this improved behaviour for example during time bar animations, filtering or resizing items.
To apply the new behaviour, set the new mode option to 'adaptive' when running chart.layout(). The 'adaptive' mode runs a short force-directed layout instead of a full one, adapting the layout to changes while preserving the original positions of items as much as possible.
Think of it as an improved ‘tweak’ - the mode option is, in fact, available also for standard layout. For the best results in your charts, however, we recommend using organic as our currently most advanced force-directed layout.
KeyLines with KronoGraph
You may have already heard of KronoGraph, our new product for timeline visualisation.
KronoGraph can also integrate with KeyLines, unlocking even more possibilities for analysis and visualisation of your data.
Take a look at our exciting Timelines with KronoGraph demo to see both products working seamlessly together.
Enhancements
chart.expand() with organic layout also uses the behaviour introduced with 'adaptive' mode for chart.layout().
For chart.expand(), this behaviour is applied automatically when fix
is set to 'adaptive' (default option).
Bug Fixes
createLink.Rectangular combos: A brand new angle on combos
We’re very excited to add a brand new look to one of our signature features.
In the combos chart option, you can now set the
shape
of your open combos to 'rectangle'. The items inside each open combo can be arranged using
any layout available for arranging nodes inside open combos.
To achieve the most compact layout, try the new
grid arrangement
that we've introduced to complement rectangular combos.
In addition to their modern and crisp design, our rectangular combos excel in providing a clear, condensed view of the data and its context, especially when used with our sequential layout. Check out the new Arranging IT Networks demo to see how much detailed information can be displayed at once without losing clarity in your chart. To create your first rectangular combos, head to our Combos: Basic demo.
This feature is currently in alpha and we're keen to hear from you about how we can improve it. To share your feedback, please contact us.
Enhancements
We've updated our Integrate with Neo4jdemo to use Neo4j 4.1.
Bug Fixes
createLink could error when using curved links.chart.combo().reveal() was called when dragging a node.Adding items to fixed charts
Charts with components that don't move have their benefits - the components can be laid out manually to fit specific requirements and are always easy to find. However, having a fully fixed chart shouldn't compromise the readability of the layout when new items are added.
This is why you can now add new items to your chart with the fix
option for layout.expand() set to 'all' and not create any overlaps with your existing fixed components.
To see the improved behaviour, head to our Adaptive Layouts demo.
Reducing movement during expand
No detail is too small when working on beautifully adaptive layouts. We've now improved the behaviour
of layout.expand() so that when a single component is expanded, the movement of its existing nodes is
reduced to necessary adjustments and the animation and fitting of the chart are subtler and smoother.
Staying focused with organic
Calling an organic layout with the consistent option set to true now always produces the same results for components in the chart that haven't changed. This means that running the layout only updates the positions of changed components, minimising any distractive movement in the chart and letting you focus on what has changed.
Enhancements
Bug Fixes
We’re delighted to bring you KeyLines 6.0, our latest release featuring a next-generation events engine, adaptive layouts, beautiful curved links and other exciting enhancements.
The evolution of events
KeyLines 6.0 features a new events engine and a redesigned API
for a better developer and end-user experience.
The events, accessed from chart.on() and
timebar.on(), are intuitive,
easy to work with and simple to customise.
Their improved behaviour is also more closely matched to the behaviour of native DOM events.
Here are some highlights of the new system:
Overriding the default behaviour is now simple and intuitive.
All you need to do is call the preventDefault() function in the handler.
Use the function to modify any behaviour - for example to have your nodes
snap to a grid during dragging or to disable some user actions.
Another useful addition is the new setDragOptions property of the drag-start event, which lets you customise the dragging behaviour. You can use it for example to enable panning of the chart while the pointer is over certain chart items.
To see how this option works, head to our Custom Dragging demo.
Listen and respond to events with greater precision. We've improved events such as view-change and selection-change to work more intuitively and seamlessly, and added new events like drag-move and pointer-move to give you tighter control over user actions.
As a result, chart items respond smoothly to user actions such as dragging, panning or selecting.
Take a look at our new HTML Annotations demo for more details.
We’ve listened to customer feedback and improved the order in which events fire. For example, click events no longer fire during dragging, the Ctrl and Cmd modifiers work more intuitively between Macs and PCs, and dragging nodes no longer automatically changes the chart selection.
Experience smoother and more precise zooming, consistent touch gesture support and detailed contextual information from pointer events including modifier keys and pointer types. Whether you're supporting mobile applications, adding keyboard shortcuts for better accessibility, or adding custom interaction behaviours to your application, the new events engine gives you the control you need.
Explore the new events in action in our demos, which have all been updated to use the new events engine. We especially recommend checking the Interaction Events demo and Time Bar Events demo which let you test events and user gestures while displaying the firing order and structure of the events.
All the chart events and time bar events are documented in the API Reference and the new Events Basics page features an introduction to events and an overview of the differences between the bind() and on() events.
Although you can still use the bind() API, which remains supported until the end of the 6.x cycle, we strongly recommend migrating to the new events as soon as possible.
Make waves with curved links
Refresh the styling of your sequential and hierarchy layouts with the new path option. Setting it to horizontal or vertical changes the way link ends enter and exit nodes, making the links follow a curve. This not only makes the layouts look more polished, but also improves clarity and readability, especially for charts with multiple connections between levels.
See the difference curved links can make in our Impact Analysis and Display Hierarchies demos.
Adaptive and beautiful by default
Achieving the best adaptive behaviour for dynamically changing charts should be easy and automatic.
This is why expand() now uses adaptive packing with consistent layouts by default, which means that your chart will adapt beautifully to the new data with minimal movement of unrelated items.
We have created a new Mafia Network demo to showcase the advantages of adaptive behaviour. Explore and disrupt connections within mafia networks to see the chart adapt to changes.
Enhancements
Breaking API changes
Like our previous major releases, KeyLines 6.0 contains some breaking changes. Without them, we couldn't evolve KeyLines and deliver the features you want. We recommend reading 6.0 Breaking Changes and Migrating from bind() to on() carefully before you install this version.
Deprecations
We've added some legacy API calls to our list of Deprecations.
Bug Fixes (6.0 and 6.0.1)
Adaptive layouts smarter than ever
It can be difficult to keep up with data changes on your chart, and not every change needs a completely new layout. That's why KeyLines 5.10 introduces new adaptive behaviour for layouts, which will help your charts adapt to changes effectively while minimizing unnecessary movement, large gaps and overlaps.
With the fix option set to adaptive
and the tidy option set to true,
expanding or adding components modifies only the position of necessary items, leaving the existing nodes fixed in relation to others where possible.
You can also set the packing option to adaptive
and the consistent option to true
when running layouts to adapt the chart when items are removed.
To see this improved behaviour in action, take a look at our Adaptive Layouts demo.
Stretching the capability of sequential
We continue improving the sequential layout to make it even better for visualising your hierarchical data.
The latest addition is the new stretch
option which allows you to change spacing between levels of nodes in the layout.
See how this affects the sequential layout in our updated Display Hierarchies demo.
Overview window in colours
The overview window is a helpful navigation tool which displays a thumbnail view of the chart with the currently viewed area highlighted.
You can now customise its colours using the backColour
and borderColour
options. And you can finally have the overview window match your slick dark mode chart!
Enhancements
Discontinued support
Following our announcement in September 2019 and the direction given by operating system providers, we've discontinued support of the following operating systems:
For a list of supported devices, operating systems and browsers, see Compatibility & Supported Platforms.
Bug Fixes
Automatic sequential layouts
Data often has a distinct structure, such as a hierarchy or sequence, which the sequential layout is perfectly suited for. With sequential's automatic level detection, you can now lay your data out straight away without the need to specify a top node or provide level information. Sequential intelligently puts nodes in levels based on the direction of links in your data.
Sequential does this by default if the
top or
level
options aren't set.
You can still get the precise control of levels in sequential by
using the top
or level
options. To see how the different methods compare, see the
Display Hierarchies demo.
New getItemInfoAt() API
It can be tricky to test visual applications, particularly when they're complex. To assist with detecting the presence of items in the chart, you can now use the new getItemInfoAt() method to check what item is present at any given view coordinate.
Bitcoin demo
Cryptocurrency data is complex and often difficult to follow, with transactions being lost in the sea of data.
KeyLines can help to navigate blockchains by resolving entities and highlighting anomalies.
See the Bitcoin Transactions demo to explore what insights can be gained from analysing cryptocurrency using a chart.
Enhancements
Bug Fixes
More time bar styling options
In the last release we introduced the new area mode for the time bar, letting you display your time-stamped data as a continuous area plot. We’ve now added curved selection lines to area plots to highlight important aspects of your data and see how individual items’ activity compares to the overall trend.
As with the histograms, simply call timebar.selection() once you've set type to 'area' to see the evolution of a subset of your data.
To see how these new line charts look, check out our Filter Data Breaches demo.
New packing options
Packing is a key component of layouts, ensuring that unconnected components are placed in just the right place so they don't overlap or appear too far apart.
Now you can customise what type of packing to use on almost all of our layouts, with the circle packing option now also available for the standard, structural, radial and hierarchy layouts.
Enhancements
Bug Fixes
Stacks of time bar improvements
The time bar is a great way to show how your data evolves through time. In KeyLines 5.7 we've added more features to the time bar to give your users more value, and more ways to show your data.
Histogram bars can now be displayed as stacked bars, showing a breakdown of the types of data they contain. Simply include the names of groups in a custom property of items, and then define which property to use with the groups time bar option. This can be really useful if you want to highlight what's changed inside the data, or to focus a user's attention on a subset.
Take a look at the fully-customisable stacked bars in our Customise the Time Bar demo.
Area Plots
In addition to stacked bars, the time bar now features an entirely new way to display data; area plots. By setting the type property to 'area', you can now see your temporal data as a continuous evolution. This is great when you want to see a more qualitative view of how your network changes over time, and can make it easier to spot patterns that would be hidden in an aggregated histogram view.
You can check out the new area plots in our Styling Charts demo.
Enhancements
Bug fixes
Accelerated organic layout
We are always striving to improve KeyLines and make it as quick and efficient as possible. The organic layout is now even faster, with typical performance increases between 2 and 5 times. For some networks this can be even greater, with certain benchmarked networks over 100 times faster than before.
Organic is ideal for getting a clear and attractive layout for large, complex networks in record time, and we recommend using it in place of the standard layout.
Enhancements to sequential layout
We are happy to announce that the sequential layout is officially out of beta development and is now an established part of the KeyLines toolkit.
Sequential has been significantly enhanced, and you can now use it on nodes with incomplete or missing level data by simply defining a top node, just like the hierarchy layout. Sequential will then intelligently place nodes on appropriate levels based on their connected items.
Take a look at our Layouts demo to see how easy using sequential is.
Prevent dragging of links
Working out the right behaviour for your chart can be tricky. The new drag option allows you to customise more precisely how your users interact with the chart, ignoring links when you drag and using hand or pointer mode to control how click events work.
This feature is currently in alpha and we're keen to hear any feedback you have on how we can improve and enhance it.
TypeScript out of alpha
TypeScript continues to grow in popularity, and we're now using it in-house to write KeyLines. We're pleased to announce our TypeScript definitions for the KeyLines API are now out of alpha. If you're using TypeScript, you can now benefit from context-sensitive API documentation and intelligent code completion from within your IDE.
Check out the type definitions in the latest KeyLines download, or take a look at our TypeScript documentation for more information.
Enhancements
Bug fixes
Labels along links
Densely connected charts with lots of links can often feel crowded and cluttered. With the new inline link style option you can align labels along the direction of the link, making them look cleaner and fit better into the view.
Take a look at our Style Links demo to find out more.
New: Integrate with Azure Cosmos
KeyLines works seamlessly with all database technologies.
To show this, we've added a new Azure Cosmos DB demo, so you can see just how simple it is to integrate with Microsoft's Azure Platform.
To try out Azure Cosmos DB with KeyLines, check out the Integrate with Cosmos demo.
New: Styling Charts demo
It's often hard to decide what your chart should look and feel like. To give you some inspiration we've added a new demo showing just a few of the different themes that you can create with KeyLines.
To see the variety of views you can create with KeyLines, check out the Styling Charts Demo.
Enhancements
Known Issues
Be aware that emojis on inline labels do not draw correctly to Canvas on Chrome in MacOS. This issue has been raised with and confirmed by Google, and we will provide an update when it is resolved.
Bug fixes
Smarter styling
KeyLines 5.4 makes it easier for you to to modify your chart and reduce clutter, with new features like styling that adapts to the zoom level and animated flows on links.
Adaptive styling
When viewing large, densely-connected graphs some items can start to dominate the visual aesthetics, while others are rendered almost invisible. This can make graphs unclear and harder to read. The new adaptive styling option allows KeyLines to dynamically enhance the chart's aesthetics, adjusting how nodes and links are drawn to suit the zoom level, and fading out labels.
This gives large charts a much cleaner and clutter-free appearance when at low zoom levels.
See how adaptive styling can help clean up clutter from a chart in our Visualising Big Data demo.
Flow on Links
It's often difficult to convey traffic around networks. Now you can add an animated flow to links to show movement around your graph.
The new flow functionality (currently in alpha) can be combined with all our other link styles to give you full control.
Check out the Link Styles demo and our API reference for flow on links to learn more.
Organic layout stable and ready for production
We'd like to thank you for all your feedback, and are delighted to announce that the organic layout (now in beta) is now stable and ready for production. This means that the behaviour will be consistent in the future and you can use it in your shipped products.
There are now more options to choose from too, including tightness, consistent and packing, allowing customisation just like our other layouts.
Enhancements
Bug fixes
KeyLines streamlined
We know that performance is always an important factor when you're building an app. To help you speed things up, we've made significant improvements to our WebGL rendering performance, with our benchmarks now delivering a 50% increase in frames per second compared to previous releases.
We've also added new options for finer control over KeyLines elements' creation, modification and removal, giving you better control over resources and simplifying your code.
Full lifecycle management
In KeyLines 5.3 we've added a new way to create KeyLines elements by specifying their parent container. These elements are much more configurable in terms of their lifecycle; you can now call chart.destroy() or timebar.destroy() on an element to completely remove it from the page, freeing up any associated resources. This allows you to remove KeyLines assets quickly and cleanly from your app.
Elements created using this method can now also be manipulated using the new chart.setContainer() and timebar.setContainer() APIs. You can use these to move charts and time bars around much more easily and even hide them from the page to be recalled later. This allows you to re-assign resources when, for example, switching between tabs in a single page application.
Charts created this way also automatically resize to fit their parent containers, making things like fullscreen mode simpler and removing the need for complex custom code for resizing.
For more information on resizing, see Resizing components.
Vue tutorial
As promised in the previous release, we have updated our Vue tutorial to align it with modern standards and practices. It now has all the great features, advice and helpful content of our Angular, React and plain JavaScript tutorials. The Vue component has also been revised to align with improvements to the Vue framework.
Enhancements
Thanks to those of you who have tried out organic layout during its alpha release. We’ve listened to your feedback and have updated the layout to give it a tighter arrangement by default. There’s also a new tightness option to give you more control over node spacing.
Deprecations
We recommend using the new container approach to creating KeyLines elements, and have deprecated the old method (setSize() and using the 'element' property in KeyLines.create()). The new approach gives you automatic resizing and much greater control over resource management, but we’ll continue to support the older methods for backwards compatibility. For the full list, see Deprecations.
Bug fixes
Combos out of beta
After releasing some big combos enhancements in 5.1, we are happy to announce that the combos feature is officially out of beta development and is now an established part of the KeyLines toolkit.
In this release, we have also incorporated feedback from several customers to provide denser node arrangements inside combos, ensuring that open combos do not dominate too much of your chart real estate. Several other tweaks and fixes to outstanding combos issues are also included.
If you haven’t checked out combos before, our Combos: Basic and Network Alerts demos are good places to start.
New tutorials
To help developers hit the ground running with KeyLines, we have rewritten our quick start guides for React, Angular and plain JavaScript. The new guides give a comprehensive overview of how to get your first KeyLines chart up and running with your favourite JavaScript framework. The guides also include a number of best practice recommendations for each framework, and we have updated our popular React and Angular components as well (See React and Angular components below for a full list of component changes).
Check out the updated tutorials by clicking on the icons above (and don’t worry Vue fans, your updated guide is coming soon).
Enhancements
React and Angular components
As always our framework components are there for you to modify as you see fit, but to make them more useful and consistent we've given them an update. If you’re using our React or Angular components, we recommend you upgrade to the latest versions, but you’ll need to be aware of the following changes before you do so.
If you’re using a modified version of the components we recommend you backup your files before merging the new versions into your code.
Deprecations
We've added some legacy API calls to our list of Deprecations.
Bug fixes
Combo enhancements
Combos are a great way to organise complex data in a concise way to reveal hidden patterns quickly and easily. We’ve had a huge amount of feedback since their original release and version 5.1 brings some major changes to the ways you can create and use combos. We've also made some big improvements to combo performance.
Most significantly, from KeyLines 5.1 onwards you can define combos in your data when it is loaded into the chart. This means you can bring in data pre-combined, without having to load data first and then combine it afterwards. We accomplish this by allowing you to specify a ‘parent ID’ for any nodes you load or merge into the chart. As well as loading pre-combined datasets, this opens up a number of exciting use cases. For example, you can now populate the contents of combos on demand, by bringing in data from your backend and adding it to existing combos, or even promoting existing nodes in the chart into combos:
For more information, see the Combos documentation.
Note: Charts created using the new parentId property which are then serialized cannot be loaded in versions of KeyLines older than 5.1.
Default styles
Combos have a complex hierarchical data structure. In previous versions, this made jobs like styling combo links harder than they needed to be. From 5.1 onwards you can specify default styles for combo links, avoiding the need for any complex code. You can also specify default styles for open combos and combo glyph counters. This, coupled with the fact that your combo structure can now be entirely driven by your data model, means that your combo code should be significantly simpler and easier to maintain.
Enhancements
Discontinued support
Following our announcement in May 2018 and the direction given by operating system providers, we've discontinued support of the following operating systems:
We will provide Extended Support for:
Extended Support means we’ll keep testing and supporting these platforms unless withdrawal of Microsoft's Mainstream Support means we’re unable to do so.
For a list of supported devices, operating systems and browsers, see Compatibility & Supported Platforms.
Bug fixes
Next generation KeyLines Geospatial
KeyLines 5.0 lets you map a connected world with better performance and more clarity and insight than ever before. We've completely overhauled our map mode, exposing new capabilities and improving the speed, smoothness and reliability of your geospatial views.
Based on Leaflet 1.3.4, the new map mode features smoother panning and improved reliability across platforms and browsers, particularly on touch devices. We've also exposed more of the underlying Leaflet options, giving you the freedom to use layers and options such as alternative Coordinate Reference Systems (CRS).
Mapping flexibility
With KeyLines 5.0 you can use your own images instead of pointing to a map server. As well as giving you the flexibility to use offline images when you want to, this feature opens the door to a wide range of new and exciting possibilities. You can place nodes and links on any image backdrop - from floorplans and building layouts, to virtual representations of IT infrastructure.
The Leaflet upgrade also means you can integrate KeyLines with a far wider choice of map tile providers and plugins. We've created an integrate with Esri demo to show how you can use Esri's tiles and geospatial services in KeyLines.
New: asynchronous image loading
KeyLines 5.0 now loads its images asynchronously, so you don't need to keep your users waiting while large numbers of images are downloaded from backend servers. Images are loaded into the chart as soon as they're ready.
Enhancements
Breaking API changes
Like our previous annual major releases, Version 5.0 contains breaking changes. Without them, we couldn't evolve KeyLines and deliver the features you want.
In particular, KeyLines 5.0 makes changes to the way images, including KeyLines assets such as our navigation controls, are loaded. We recommend reading 5.0 Breaking Changes carefully before you install this version.
Deprecations
We've added some legacy API calls to our list of Deprecations.
Bug fixes
New: more control over glyph positioning
Glyphs on nodes can now be given a radius property to control their distance from the centre of their parent node. This gives you fine-grained control over the look and feel of your nodes, and opens up the possibility of creative node designs such as aligning glyphs with halos.
Take a look at our Style Nodes demo for an example of aligning glyphs with halos.
New: KeyLines.info() API
We've added a new API to help with troubleshooting and support. The KeyLines.info() function will return helpful information about your version and settings, and the environment KeyLines is running in. You can use it to diagnose issues when troubleshooting and when sending background information to [email protected].
Bug fixes
Introducing the organic layout (Alpha)
We're excited to present our new organic layout, designed to help untangle complex networks. By spreading the nodes and links apart in a distinctive fan-like pattern, the underlying structure becomes much clearer. It's also fast, offering significant performance improvements over the standard layout, particularly on large datasets.
The layout arranges multiple components in a circular pattern with larger components in the centre. This gives a more natural, organic feel to your data.
To see the new layout for yourself, have a look at our layouts and performance demos. For API Reference details, see chart.layout().
This feature is currently in Alpha and there are some known issues. We'd love to hear what you think, so please send your feedback to us at [email protected].
Time bar: mark times of interest
The time bar histogram helps to explain how events and relationships evolve over time. We've added the ability to mark times or time ranges of interest in a different colour to make them stand out. It's an effective way to highlight unusual activity, such as IT network anomalies, or disputed transactions in this Credit Card Fraud demo.
Font Awesome Version 5 support
We've updated our demos to use the latest Font Awesome 5 icon set. It includes the ability to use font weights to specify different styles: solid, regular and light. For details on how to access the new styles with KeyLines and use different styles in the same chart, see the Font weights and Font Awesome 5 section of the Fonts and Font Icons page.
Bug fixes
Organic layout (Alpha) - known issues
New: Colour gradients on links (Beta)
Customising links is a good way to make the connections in your data clearer and more meaningful. In this release we've introduced the ability to add colour gradients to links. As well as creating a striking visual effect, gradients are great for helping users understand flows between nodes, and for highlighting clusters of different types of node even at low zoom levels.
The transition between colours can be sharp instead of gradual. This example uses a two-tone effect to signify the health of an interface between two devices:
For a first look at colour gradients in action, try the Style Links and Impact Analysis demos. For API Reference details, see the c2 link property and linkStyle chart option.
More database demos updated with expand indicators
In recent releases, we've added glyphs to expandable nodes in Integrate with Neo4j demos. It's an effective way to show which nodes have connections that can be brought into the chart dynamically from the back-end database.
The feedback has been hugely positive, so we decided to enhance a further five database demos in the same way. See:
Restyled KeyLines SDK site
You'll notice that we've given this site a makeover.
It's part of a wider project to improve the look and feel of all Cambridge Intelligence websites. There are further improvements planned, but we'd love to hear what you think about the changes so far. Contact [email protected].Enhancements
Bug fixes
New: Integrate with Stardog
We're always keen to demonstrate how easy it is to get KeyLines working with popular database technologies. Our latest demo shows how to integrate with Stardog - the enterprise knowledge graph platform.
Stardog maps source data in its Resource Description Framework (RDF) database to a target of RDF 'triples' on the chart. KeyLines retrieves data using SPARQL queries that match specific triple patterns.
The demo also features expand indicators to make clear which nodes have additional connections associated with them.
Animated donuts
Donuts are great for visualising numeric proportions of data. To draw attention to those donut segments, use animation. You can now use the animateProperties() function to animate the colour and value properties of donuts, allowing you to achieve eye-catching effects, such as mimicking a progress wheel.
To find out more, see the animateProperties API Reference documentation.
Full support for emojis in WebGL
We now provide full support for emojis in KeyLines, removing the restriction that meant they were only available in Canvas mode. This includes support for combined emojis, such as family emojis, and the use of modifiers such as skin tone.
Bug fixes
Search for demos
With more than 80 downloadable KeyLines demos to choose from, finding those that showcase the features you're interested in can take time. Not any more.
We've added the ability to search demos, so it's now much easier to find and download the examples you want. The search 'fuzzy matches' words in demo titles, thumbnail descriptions and keywords.
If you'd prefer to browse through areas of interest, you can still use filters for the most popular demo categories - from styling and layouts to combos and time.
Head to the Demos page to start searching.
Drawing, layering and performance improvements
In response to your feedback on the combos functionality released in KeyLines 4.0, we've improved the way items are drawn and layered. The key changes are:
To try out these changes, see the Combos demos.
We're also happy to announce general improvements to rendering performance. To measure this, use the Test Performance demo.
Support for future React changes
The React team intend to stop supporting problematic legacy component lifecyles in React 17.
To get ready for this change, we've updated the KeyLines React component to stop using these methods. We've also upgraded the component to support React 16.3.
To get started with KeyLines and React, see the React documentation and the React Integration and React Integration: Time demos.
Enhancements
We've renamed many of the demos to make sure the titles best represent the features they showcase. See the Demos page.
Deprecations
We intend to end support for a number of legacy operating systems from 1st January 2019. For more details, see Deprecations.
Bug fixes
Glyphs align with link direction
Multiple glyphs on links are currently displayed in a row from left to right. Now you have the option for all glyphs in the chart to follow the direction of the link instead. This works well in charts containing crossed links. In this example, it's hard to see which glyphs belong to which link:
The new option makes things much clearer:
To try the new alignment, use the linkStyle chart option, fully documented in the API Reference.
Improved SVG support
We're happy to announce full support for SVGs in Chrome, Firefox, Microsoft Edge and Safari. As long as SVG files have width and height attributes set and don't have foreign object tags, you can use them to enhance your charts just like any other image format.
For more details, see the updated Image Formats documentation.
Neo4j demo updated with expand indicators
The 'double-click/tap to explore' analyst workflow relies on the expand function to bring connections from back-end databases into the chart dynamically. But without clicking/tapping every node, users don't know which nodes are expandable and which aren't.
By adding visual indicators to nodes, it's clear which ones have additional connections associated with them. We've used glyphs to enhance our popular Integrate with Neo4j demo to show you how this works.
Enhancements
Bug fixes
Support for time periods
The time bar already shows events that occur at a particular instant in time. Now it also shows events that represent a period of time. Exploring how and when connections between nodes start, evolve and end makes it easier to spot trends and identify unusual patterns.
You can try this latest time bar feature for yourself with our new Time Periods demo:
The demo cycles through the changing relationships between entrepreneurs and the companies they’re directors of. You’ll see that time periods don’t need a fixed start and end time: you can choose one or the other or both. In this way, you can support open-ended events.
You’ll find the new TimePeriod object type fully documented in the API Reference.
New: Integrate with Amazon Neptune demo
When Amazon announced the preview of their purpose-built, high-performance Neptune graph database, we were keen to show you how it works with KeyLines.
The new Integrate with Neptune demo supports the Apache TinkerPop3 property graph model queried with Gremlin. The demo also shows how to map visual information to items in the graph database.
Enhancements
Bug fixes
Greater flexibility with glyphs
Glyphs are a great way to enhance nodes and links with additional key attributes. You can now add as many glyphs to a node as you like. Using either compass points or integers, you can also position them exactly where you want.
To learn more, see the Style Nodes demo and Glyphs API Reference documentation.
Enhancements
Bug fixes
Enhanced Combos: more insight than ever before
We're delighted to bring you KeyLines 4.0. Featuring groundbreaking new combos functionality, this version lets you minimise chart clutter while providing users with unprecedented insight into complex networks.
Use the brand new combos functionality to create visual groupings for nodes. They can be styled, moved around, opened and closed, and nested together to suit even the most complex and demanding networks. The result provides an innovative way to explore connected data. Users can navigate clearer charts and expose detail on demand at their own pace.
For a detailed overview, see the Combos documentation.
New and updated demos: Combos
We've designed a set of demos to help you get started with the new combos feature:
Enhancements
Donuts feature moves out of Beta
We're happy to announce that the donuts feature is out of Beta development and is now an established part of the KeyLines toolkit.
End of support for IE9 and IE10
Microsoft stopped supporting these older versions back in January 2016.In KeyLines 3.5, we announced our intention to follow their direction. KeyLines support for IE9 and IE10 has now ended.
Breaking API changes
Deprecations
See Deprecations
Bug fixes
Known issue
We're aware of an issue with the way open combos behave when they overlap. Currently, the combo drawn on top does not obscure the items inside the combo behind it.
New sequential layout
The highlight of this release is our new sequential layout. It's designed to display data that contains a clear sequence of distinct levels of nodes. It's ideally suited to represent tiered datasets such as IT infrastructure, or flow sequences such as blockchains.
For more details, see the Sequential Layouts demo and chart.layout() API documentation.
Enhancements
Bug fixes
Enhancements
Bug fixes
Enhancements
Bug fixes
Enhancements
Bug fixes
The fastest KeyLines yet
Now rendering twice as fast as the previous release, KeyLines 3.5 is all about performance.
We've made improvements across the board to give your end users a lightning-fast user experience, even with large numbers of nodes.
We've also revised our API Reference page so developers can find what they need more quickly and easily. There are new demos and sample code to help you make fast progress. We show you how to combine nodes on maps to reduce clutter, and integrate with ArangoDB.
Performance improvements
Benchmarking KeyLines performance is important to us, and we take care to make sure our charts deliver a great user experience. One important benchmark is how many frames per second KeyLines can deliver when animating large numbers of nodes and links. These large-scale animations stress the system, and a good frame rate tells us that end users will get a smooth, enjoyable chart experience.
In our test environment, KeyLines 3.5 delivers more than twice the frame rate of previous versions when animating a densely-connected network of thousands of nodes. This means you can work with bigger and more complex datasets without worrying about the impact on performance.
Other improvements to performance in this release:
See improved rendering performance in the Test Performance demo.
Redesigned API Reference documentation
We've redesigned the API Reference to make it easier to use. You can now:
If you have any feedback on these changes, or suggestions for improvements, we're keen to hear from you. Send feedback
New demo: Combos on Maps
Users often want to remove clutter from maps, particularly when zoomed out. The KeyLines Combo feature is great for this. In the new Combos on Maps demo, we show you how to use combos to group items that are in close proximity, and dynamically change the groupings as the user zooms in or out.
New demo: Integrating with ArangoDB
We’ve added an Integrate with ArangoDB demo that shows how to get ArangoDB databases working with KeyLines. ArangoDB's Foxx microservice framework lets you create V8 JavaScript microservices that run directly within the database, so you can serve up data in exactly the form KeyLines needs.
Features move out of Beta
We're happy to announce that a number of features are out of Beta development. These are now established features of the KeyLines toolkit:
The extend option for the time bar play function is out of Alpha and is now an established feature too.
Advanced notice: end of support for IE9 and 10
This KeyLines release will be the last to support Internet Explorer 9 and 10.We're following Microsoft's direction after they stopped support for these older versions back in January 2016.Breaking API changes
Bug fixes and enhancements
Introducing donuts
Graphs are great for getting a sense of network structure at a glance, but sometimes you need to convey data values quickly too. To help, we've created a new donuts feature. Donuts display relative data values as node borders, so charts are enriched with information without becoming too complicated. More details
The rest of this release is about improving the developer experience. If you're new to the SDK, our updated Quick Start guide means you can get KeyLines working and start visualizing data in minutes. New support for TypeScript also lets you take advantage of the time-saving features it offers while you're writing code for KeyLines.
Together with support for Angular and new demos, we hope you'll think that our development effort has been time well spent.
New: Donuts (Beta)
Sometimes you want to show node values as numeric proportions. For example, you might want to know the relative proportions of certain kinds of network traffic handled by a router. Or, if you're investigating fraudulent reviews of shopping experiences, you want to show the ratio of positive reviews a person writes compared with negative ones. It’s hard to represent these clearly with labels or glyphs, so we’ve developed donuts.
Donuts are circular node borders divided into segments that add up to 360 degrees. They work just like pie charts.
 |  |  |
Donuts are entirely customisable - you can select how many segments you want, choose colour palettes, set segment and border widths, add tooltips and more.
We’ve created demos to help you get started with donuts. See:
New: Support for TypeScript (Alpha)
We know many of you use TypeScript code, so we've added support for this. It means you can take advantage of key features including strong typing, context docs and IntelliSense.
TypeScript supports type annotations that let you record contracts of functions and variables in a lightweight way. You can use existing JavaScript code, other JavaScript libraries, and call TypeScript code from JavaScript.
KeyLines comes with detailed type definitions that you can include in your TypeScript project which makes coding in TypeScript much easier. For more information, see TypeScript (Alpha).
New: Support for Angular
We're pleased to announce support for the latest Angular platform with our Angular component.
Angular is the official name of the latest web application platform from the team that built AngularJS 1.x. The two platforms are not the same - Angular is a complete rewrite of AngularJS.
We've also created a new demo to help get you up to speed with Angular. See:
We still support AngularJS 1.x with our AngularJS directive, in fact we've improved the current documentation and demos. See:
Updated Quick Start guide and other doc improvements
We want to make the KeyLines evaluation experience as simple as possible. This includes making sure new users can get up and running quickly and easily, which is why we've rewritten our Quick Start guide.
We've made other documentation improvements by adding guidelines on:
Demo changes
API changes
Bug fixes and enhancements
Self-Linking Nodes
We’ve responded to user requests and developed a new Beta feature: self-linking nodes. More details
We’re also happy to announce that our high-performing WebGL rendering engine is out of Beta and is now an established feature of KeyLines. More details
You'll notice that we've revamped the Demo page to make navigation easier. Amongst the new demos we've added, there's one showing you how to use a REST API to integrate with Elasticsearch.
We've made improvements to existing established features too, including clusters, font icons and the time bar. More details
New: Self-linking nodes (Beta)
If you're analysing an IT network or cyber threat, it's not unusual to find nodes that send network traffic to themselves. For example, an email may be copied to a sender's address. But how do you represent this behaviour on a chart? The answer is by using self-linking nodes. These are nodes with outgoing single or multiple links that loop back to themselves.
There’s also a demo to showcase self-linking nodes. See the Nodes with Self Links demo.
WebGL improvements (out of Beta)
WebGL is no longer in Beta and is now an established feature of KeyLines. Since the last release we’ve made the following key changes:
New: Elasticsearch Demo
We’ve added a new Integrate with Elasticsearch demo that shows how to get Elasticsearch data working with KeyLines.
You can use REST queries to retrieve data and let users explore complex networks in large databases. The demo also shows how to map visual information to the items in the graph database. To get started, view the source code and then download it.
For more information, see our web article Visualizing the Elasticsearch Graph API with KeyLines
Font Icon position improvements (out of Beta)
We’ve improved the way selected font icons are displayed. When you select a regular icon, KeyLines adjusts the width and height so it fits inside the selection boundary. The same now applies to font icons, so font characters can no longer overlap the boundary.
If icons still aren’t positioned exactly as you’d like, use the new imageAlignment chart option to make further tweaks.
Lens Layout includes the tightness option (out of Beta)
By default, the tightness option now applies to the Lens Layout. Previously, applying the layout would give you a fish eye view of the chart, and some nodes would be spread far apart across the chart. The Chart layout tightness option automatically positions the nodes closer together.
To try out Lens Layout tightness for yourself, see the Layouts demo.
React component rewritten
Many React users prefer ES6/JSX, so we’ve rewritten the React component to support ES6 classes.
We’ve also updated the React component to support the time bar. There's a new React demo to show how you can filter chart items by time. See React Integration: Time
The react-keylines.js file in the demo source code also contains an example of how to use ES6 class syntax.
New: Support for Promises ES6 (Beta)
To comply with the ES6 version of JavaScript, we’ve added a KeyLines.promisify() function that lets you use promises instead of callbacks. A promise represents the result of an async function before that result is known.
There’s also a demo that shows how you can organise your code to support promises. See Promises.
Cluster discovery is now deterministic
You can now choose whether you want your results to be the same or different every time you run a cluster. To do this, in the Graph clusters function, use the consistent option.
Time bar improvements
You can now use a fontFamily option to specify which font to use in the time bar, just as you can already for main chart objects.
If you change the height of your time bar, it makes sense to change the relative size of the time bar font too. We’ve added a fontSize option that lets you do this.
Support for multiple font icon families
You can now use the 'ff' option on nodes to include icons from different font families on the same chart. The 'iconFontFamily' chart option sets the global family. The 'ff' node option lets you overwrite this and use a different font family for a specific icon. It works the same way as the existing 'ff' font option.
It can take a long time to load Font Icons from multiple Font Families. To improve performance, we recommend that you create a single, custom Font Family containing the icons you want to use. See What's the best way to load Multiple Font Icons?
Control alignment of font icons and images
Font icons and images are not always positioned accurately inside nodes and glyphs. You can now adjust their position and scale using the new chart ‘imageAlignment’ option. We’ve also added a demo to showcase how it works. See Align Images.
Demo page improvements
We've added filters, so it's easier to find the demos you’re interested in.
We've also made the demo names and descriptions clearer, so you can identify at first glance which demos showcase the features you want to include in your application.
Demo changes
Breaking API changes
API changes
Bug fixes and enhancements
Better ways to work with large datasets
In this release, we’ve made working with larger datasets quicker and easier. You’ll see improvements to the way filtering, expanding and layouts work, and for the first time be able to run graph calculations without visualisations. We’ve also added a demo on how to integrate with vast datasets in DataStax Enterprise Graph, and upgraded WebGL from Alpha to Beta status.
Highlights include:
Better filtering
We’ve made it much easier to use combos with filters. You can use the new filter option to apply filters to items inside combos. If every item in a combo is filtered out, that combo won’t be displayed. This means you’re only ever looking at the items and combos you’re interested in. It saves you having to write custom combo filter code to handle this.
To improve filtering further, we’ve added a filter condition to the expand function. When you expand an item, your existing filters are applied to the new nodes and links added to the chart.
Greater flexibility and control over layouts
If you’re analysing a chart with lots of items, you don’t want node positions to shift unexpectedly when you change layout or add items. We’ve added an option to retain the position of existing nodes whenever you:
We’ve improved the default hierarchy layout. Higher-level node structures are now stretched, fully exposed and much easier to read. This is useful when you’re analysing large, flat hierarchical data that can produce long, narrow charts with links and structures that are difficult to see. To revert from the default layout to the previous style, use the flatten option.
Previously, the expand function displayed new items on the chart using the standard layout. This wasn’t ideal if the rest of your chart used a different layout.
We’ve updated this function so you can choose a layout style to match the rest of your chart: standard, hierarchy, radial or tweak.
Want to see how it works? Try the new Incremental Layout Demo
Flexible graph functions without graph rendering (Beta)
In previous releases, KeyLines had to render a graph before you could start analysing the data. This was okay for small datasets, but not for larger ones that took much longer to render.
We’ve fixed this in 3.2 by creating a separate Graph Engine to perform analysis. You can now run graph calculations on larger datasets without having to wait for charts to display fully. You can also:
For more information, see the Graph Engine Documentation
The Graph Engine is in Beta development. Your feedback will help shape the future of this feature, so we’d love to hear your thoughts. Email [email protected]
DataStax Integration Demo
We’ve added a new DataStax Integration Demo to show you how to get DataStax Enterprise (DSE) Graph databases working with KeyLines. You can use Gremlin queries to retrieve data, letting users explore highly complex relationships in vast datasets. The demo also shows how to map visual information to the items in the graph database. To get started, view the source code and then download it.
For more information, see our web article Visualising the DataStax Enterprise Graph
New time bar option to limit zoom level
The time bar lets users zoom into an ever decreasing date and time interval. However, if your time data is constrained to a particular minimum level such as a day, zooming beyond that level may not be useful. A new time bar option, minScale, lets users limit their zoom level.
Note: minScale replaces the minRange option, which has been deprecated. You can still use minRange, but we recommend using minScale instead.
WebGL moves to Beta
Thanks to your feedback we’ve continued to make significant improvements to WebGL. We’re happy to announce that it’s now moved to Beta. In this release we’ve focused on rendering quality to make sure there’s better consistency with the charts rendered in Canvas. Key improvements include:
For more information, see the WebGL Documentation
Removed Flash support
Earlier this year we announced plans to end Flash support, and we’ve removed it from this release. If you need to continue supporting Flash, email [email protected]
Demo changes
API changes
Deprecations
Bug fixes and enhancements
Greater Control and React
Introducing KeyLines 3.1 – built to give you greater control, more flexibility and a faster developer experience.
Highlights include:
As always, we would love your input for our future releases. Make your voice heard! Send thoughts and suggestions to [email protected].
Adding controls to the hierarchy layout
Many datasets include some kind of hierarchy or dependency. In this release, we have added the ability to override the automatic layout so you can place a node in a specific vertical layer. This means you can force nodes with shared attributes into layers, flowing from top to bottom to give a clearer presentation:
See our new Hierarchies demo for more details.
Display enhancements
Other enhancements in this release are designed to help you build clearer, easier to use applications:
Important: Changes to font loading
This release contains some significant changes to the way KeyLines deals with loading fonts.
If you use Font Icons in a production environment you will need to make some changes to your code before deploying this version of KeyLines.
For reasons of performance, simplicity and compatibility KeyLines now defers to an external font loader if required. Full information on the changes and a migration guide is available here.
Contact us if you need more information or clarification.
Get started faster with React
We are delighted to announce our new documentation to help you integrate KeyLines into your React app. A new demo and helpful notes will get you started.
Our React integration is currently in Alpha release. This means we need your feedback before we recommend using it in production. Send our support team your thoughts.
Note: KeyLines is compatible with most JavaScript frameworks, so you’re welcome to use whichever you prefer. We don’t prescribe or prefer any of them! If there’s an integration you would like to see us work on next, just let us know.An update on WebGL
Thank you for all of your comments and suggestions on our new WebGL functionality. To respond to all of your feedback, we are going to keep it in Alpha stage for a little longer – so we recommend you do not use it in production environments yet.
We will update you when WebGL moves into Beta stage.
Retina-ready resources
More and more of your users are adopting 4k monitors and retina screens. To give them the best experience possible, we have released our fixed assets in beautiful better-than-HD resolution.
New Combos demo
You asked us for more demos to help you make better use of Combos. So our new Ransomware demo lets you explore the spread of ransomware over time and regions, showing how to use KeyLines combos with the time bar component.
New license mechanisms
This release includes some changes ‘under the hood’ that will mean our Proof of Concept customers no longer need to replace their KeyLines files each month. This will reduce interruption to your projects and maintenance overhead.
End of Flash Support
We contacted all customers some time ago to warn you of our plans to end support for our Flash component. This release will be the last to support Flash.
By dropping Flash, we will be able to dedicate more time to better and more modern technologies that your users prefer – including WebGL.
We do have a long-term support option in place for any customers who need to continue supporting Flash, but you must let us know. Contact our support team with your requirements.
Breaking API changes
API changes
Bug fixes and improvements
Supercharge your charts with WebGL
Performance boosted to meet cyber-data challenges
Significant optimizations increase rendering performance by up to 10 times; selected graph functions by up to 50 times. New demos illustrate support for fast-growing Cyber security markets.
 |  |  |
Panning with 10k elements: 10x improvement in FPS | Drawing: 5x improvement in rendering speed | Repeated neighbours calls: 50x improvement |
This release gives access to the power of WebGL, allowing analysts to manipulate bigger graphs more easily. All users will appreciate greater smoothness and fluidity when panning and zooming.
To reinforce our support for ‘Cyber’ we’ve included three compelling new demos showing the insight that KeyLines can provide. Complex data-breach, malware propagation and vulnerability-exploit data are all shown to quickly reveal underlying patterns and trends that can inform proactive behaviour.
 |  |  |
Malware Tracker | Exploit Kits | Data Breaches |
There are brand-new Fraud demos to show the power of KeyLines in exposing suspicious transactions, and, for developers, there’s a great new demo showing integration with the popular Neo4j database. Here the graph is combined with the power of KeyLines’ time bar to dynamically pull more data from Neo as the user explores the data. And, as usual, you can download all the assets behind all the demos with one click to get more productive, more quickly.
 |  |  |
Neo4J with Time Bar | New Angular Directive | Credit Card Fraud |
To support the increasing number of applications being developed within the Angular framework, we are delighted to release a brand new directive for KeyLines. This gives a clean and compatible way to access the power of KeyLines from other Angular components. To support your development we’ve added some fresh demos and new Angular-specific documentation.
As usual your feedback on the release is really appreciated – we’d particularly like to know what you value most in this release and what you’d like to see in the future. Email your comments to [email protected].
Harnessing the power of WebGL, and more
KeyLines has always been a high performance, feature rich toolkit. But, increasingly, you have been asking us to help you visualize bigger networks. There are several discrete areas we’ve focussed on that combine to make light work of heavy visualisations for those customers with challenging datasets, while giving valuable headroom for those whose data-volumes are still increasing.
And, in case you’re concerned that it’s going to take effort to exploit these changes in your application – good news! – we’ve maintained API compatibility, so you’ll see some dramatic improvements with no code changes.
WebGL – unlocking the power of modern hardwareIn this release, in addition to Canvas and Flash options, we make available the option to use WebGL for rendering KeyLines assets. WebGL directly offloads calculation to the GPU available in modern PCs, Laptops and tablets running the vast majority of modern OS and Browser combinations. And, more good news, no new hardware is required to access this resource!
Graph function optimisationKeyLines’ graph functions are the ‘engine room’ of our code; this is where you explore the graph structure of your data. Some of these operations are computationally expensive: e.g. the ‘neighbours’ call for a large graph has been relatively time-consuming, but its use is common with large and dense datasets.
With some clever optimisations, including the dynamic construction of a cache, we see improvements of around 50-fold when making repeated graph.neighbours calls (average gain benchmarked against our most challenging data-sets).
WebGL Alpha releaseAs ever, we’ve tested this release very thoroughly on a broad range of devices, and across our usual suite of OS and browsers. We’re confident in the quality and compatibility of WebGL and encourage you to experiment with the functionality in the context of your applications.
We’re making this capability available under our Alpha program. Dependent on the feedback we receive we expect to be able to mature the capability rapidly through 2016.
More control, better controls
Time bar - new set of events availableKeyLines’ time bar provides a powerful way to interact with data that has time-stamped information encoded in it. We’ve added a number of new events that give you more customisation and control of time bar events – e.g. you can now present tool-tips on the control buttons; you can detect more types of discrete events to allow construction of completely custom controls that blend in seamlessly with your app.
Nav Controls fit in betterAs a response to many requests, we’ve delivered the ability to move our standard navigation controls from the top left-hand corner of the canvas. You now have flexibility on the placement of the chart along with the ability to ‘nudge’ the controls to fit in with other assets.
Performance Benchmarks: Details
The figures quoted are average across a range of datasets. We’ve tested on 2014 MacBook Pro with OSX version 10.11 and Chrome 49. Due to the variation of hardware platforms the achieved performance when invoking WebGL rendering may vary significantly.
API Changes
Bug Fixes and Improvements
Location, Location, Location (...and Analysis)
A major piece of KeyLines functionality exits Beta phase. Powerful new graph analysis options and a new layout are added.
With this release of KeyLines we are proud to upgrade Geospatial (Maps) from Beta to full ‘GA’ releases. We’ve added a brand new demo (above) to showcase the benefits of combining Geo with the time bar.
To complement the existing tools we’re excited to offer three new graph functions including ‘clusters’ to find communities in your data and also a brand new layout option, ‘lens’, that places nodes in an attractive circular pattern.
There are a slew of other improvements and enhancements including an enhanced step-by-step guide to Neo4j integration and direct support for layers in Geo mode. To help you be more productive we’ve also added some new documentation on the use of modular JavaScript and best practice when resizing a chart.
To give developers a jump start with projects, we’ve added a new one-click ‘download’ button to the majority of demos: now all the HTML, CSS and JavaScript assets are immediately accessible.
And we know security is important to many of our customers, so we’ve upgraded our KeyLines SDK sites to be SSL protected: protecting traffic and providing stronger authentication.
As usual your feedback on the release is really appreciated – we’d particularly like to know what you value most in this release and what you’d like to see in the future. Email your comments to [email protected].
Geo (Maps)
We introduced Alpha Geo functionality back in April this year but the reaction has been so positive and strong that we’ve accelerated it through Beta and now to “GA” release.
As well as stabilising the maps API, this release introduces a new leafletMap function that provides direct access to the underlying Leaflet map object, allowing you to work with it directly, for example adding custom layers in map mode.
To celebrate the release we’ve created a new ‘showcase’ Geo demo. Using open source data from the Boston “Hubway” cycle hire scheme you can explore how traffic flows vary with time and by location. The source code is directly available so you can immediately apply these powerful techniques to your own data.
New Graph functions including clusters and eigenCentrality
Many large networks will present ‘communities’ or clusters of sets of highly connected nodes that are completely or partially isolated from others. The new clusters function allows KeyLines to automatically identify these sets of nodes. It’s a powerful new tool to unlock insight from your network data.
Other Features
Driven by your feedback there are several other significant features and enhancements in this release, including:
New Demos!
In addition to the Geo ‘showcase’ demo and Clusters we’ve added some more examples of KeyLines functionality in action. As usual the source code is provided to help inspire you and add more value to your application.
API Changes
Bug Fixes and Improvements
New Developer Resources & Beta Release of Geospatial
You’ve told us you wanted better and clearer developer resources and we’re happy to respond.
With this release of KeyLines we are proud to introduce a new SDK website featuring new demos and documentation to make getting started and productive with KeyLines even easier.
Due to the great feedback and positive reaction we’ve had to map mode (aka geospatial), this release also takes it from alpha to beta state, removing some restrictions and adding useful functionality.
There are a slew of other improvements and enhancements including fully qualified support for Windows 10 and Microsoft Edge plus the ability to further customize nodes and glyphs using ‘font icons’.
As usual your feedback on the release is really appreciated – we’d particularly like to know what you think of the new SDK site.
Email your comments to [email protected].
New SDK site
The SDK site has been overhauled to improve navigation and usability. There is also some new content in the form of specific demos to better illustrate core functionality. A new and more modern look-and-feel has been applied across the site.
New Demos:
The API documentation layout has been changed to improve navigation and searchability – it’s now presented as a single continuous page with a navigation sidebar.
Other new content includes:
Map / Geospatial Beta Release
Following a successful Alpha release made in April, this release takes Maps / Geospatial to a Beta release.
Significant changes include:
Font Icons (beta)
The new font icons feature allows you to use characters from fonts such as FontAwesome as icons for nodes and glyphs, specifying any colour for them. This feature is in beta, and requires the Canvas renderer, so it does not work in Internet Explorer 7 or 8. See font icons in the documentation for details.
New Platform Support
This release introduces support for Windows 10 and the new Microsoft Edge browser.
API Changes
Bug Fixes and Improvements
Mapping Integration
Network views are great for looking at logical connections between things - but what if you want to see where the nodes are physically located?
With this release of KeyLines we are proud to introduce a new feature that lets you see how your network is arranged on a map. You can even switch between the map view and the logical view!
The new map mode comes with instructions on how users can use it, new sample code projects and comprehensive reference documentation.
As usual with new features we are releasing this in 'alpha' form and would love to get your feedback before we harden the API in the coming months.
Please give as much feedback as possible on this new way of visualizing graphs!
Email your comments to [email protected].
Hand Mode
We have altered the implementation of 'hand mode'. From this version of KeyLines, moving the chart by dragging the background will not clear the chart selection. You can still click the background to clear the selection.
If you would like to keep the old behaviour of clearing the selection this code sample will help:
function clearSelection() { if (chart.options().handMode) { chart.selection([ ]); } }
chart.bind('mousedown', clearSelection);
Other Features
API Changes
Bug Fixes and Improvements
Fine-Tune your Charts
Lots of developers have been asking for more control over how the chart looks, so we are happy to introduce a range of new options for visual appearance. Many of these are shown in a new Chart Styles demo:
Minor Features
Bug Fixes
Time bar now fully supported!
Following positive feedback from our beta testers we are bringing the time bar out of beta. The API is now fixed and we will keep backwards compatibility with the current API in all future releases.
KeyLines AngularJS Directive
Thanks to some great help from our AngularJS alpha testers, our AngularJS directive is now available. Please give us as much feedback as you can.
Changes:
Features
Bug Fixes
Time bar beta!
New demos:
New time bar features:
Easier Downloads
We've had feedback that it has been difficult to put together all the files that KeyLines uses. So now the downloads page has a single .zip file that contains the KeyLines JavaScript file, asset files, fonts, etc., all in one place. The zip file also has a simple .htm file to get you started more easily.
Using SVG for nodes
Some developers want to use SVG for their node icons, so we have done extensive testing on browser support for drawing SVG within KeyLines, and had some surprising results. Essentially Chrome and Firefox are OK, but there are some KeyLines functions that are not supported: read the details here.
The safest approach is definitely to use PNG or JPG images until browsers catch up.
Asset deployment
Flash and assets: before this release, the flash file embedded the KeyLines image assets within the .swf file. As the number of assets increases this is no longer a good strategy. As of this release the flash version loads the KeyLines assets dynamically, just like the HTML5 version. This shouldn't cause any compatibility issues as long as you set the asset path before calling KeyLines.create.
Fixes & Improvements
Introducing the Time Bar!
Ever since KeyLines was first created, people have been asking about how to show their graphs changing over time. So we are excited to announce that KeyLines 2.0 has a whole new time bar component that you can use to explore your graph data.
The new time bar comes with instructions on how users can use it, three new sample code projects (1, 2, 3 ) and comprehensive reference documentation.
We have had to change a few things around to accommodate the new component. See below for details. And because it is such a new feature we've decided to release it as 'alpha' - meaning we'd like your feedback before we harden the functionality and API.
Please give as much feedback as possible on this new way of visualizing graphs!
Email your comments to [email protected].
Site Redesign
This SDK site has been redesigned to allow easier navigation.
More Features:
API Changes:
Bug Fixes:
Introducing Halos!
Halos are great for showing events on nodes.
See the Animation demo and Data Format documentation for how to use them.
More features:
Demos:
New website pages:
Fixes:
Features:
Fixes:
Introducing Bubbles!
Bubbles are a great new way of showing information on nodes and links.
See the Data Format documentation for how to use them.
More features:
Fixes:
IMPORTANT: keylines-html5.js is removed at this release. The new version of keylines.js MUST NOT be loaded alongside an old version of keylines-html5.js. Please be sure to remove all references to keylines-html5.js from your web pages when upgrading to this version of KeyLines.
New Features:
New Demos:
Fixes:
New Features:
New Demos:
Fixes:
Features:
The new standard layout has the following improvements:
Features:
Fixes:
Features:
Fixes:
Features:
Fixes:
Note that the font changes gives basic support for languages such as Arabic, Chinese, Korean, etc.
Features:
Fixes:
Features:
Fixes:
API Deprecation:
Features:
Fixes:
API Deprecation:
Features:
Demos:
Fixes:
API Change:
API Deprecation:
Features:
Fixes:
Fixes:
Features:
Fixes:
Features:
Fixes:
New webiste pages:
Fixes:
Breaking changes are changes to the behaviour of an existing object, function, event, option, parameter or value in the API.
Some changes are minor enhancements that shouldn't adversely affect your code. In exceptional circumstances, we may make changes to behaviours in your existing implementation. The details below will help you make the necessary code changes.
Note: New API features that don't affect existing code are not breaking changes. They're described in Release Notes as Enhancements.
To keep the order as before, with labels drawn over glyphs, set the legacyGlyphAndLabelOrdering option to true.
straighten option has now also been added to
chart.combo().arrange(),
to improve the consistency between layout and arrangement behaviour.
It's true by default, meaning that combo arrangements now also have link offsets reset by default. To keep link offset behaviour
unchanged, set straighten to false.
The KeyLines bundle has been streamlined, and third-party resources have been removed. Specifically, the css, map, and pdf directories, along with some redundant files from the images and fonts directories have been removed.
Any required files are listed, with links, in the Leaflet Integration and PDF Export documentation sections, and can also still be accessed in the 7.8.1 Long Term Availability (LTA) release (or earlier).
In previous versions, it was possible to create a link which had id1 and
id2 specified, but omitted type: 'link' in its definition.
This link looked the same as regular links but didn't respond correctly to some user interactions.
From 8.0, we've improved validation of items and this is no longer possible. To create a link,
you must always set id1, id2 and type: 'link'.
In previous versions, the default layout that was applied when running chart.layout() or chart.expand() was 'standard'.
From 7.0, the default layout is now organic as it is our most advanced force-directed layout.
The packing: 'adaptive', which is the default
packing
when running
chart.expand(),
now behaves differently when the function is run with a default layout.
This is because the default layout has changed from 'standard' to 'organic' and the packing behaviour is different for the two layouts:
If you want to use the default organic layout with a packing behaviour
similar to the previous behaviour,
specify fix: 'nonadjacent' in the options object.
Alternatively, if you want to continue using the standard layout and keep the previous packing behaviour, you can set the layout explicitly to 'standard' when running chart.expand().
The default packing option for
chart.layout() is now 'circle'.
To restore the previous behaviour, specify packing: 'rectangle' in the
options object.
d propertyIn previous versions, KeyLines would deep clone the d property value every time the property was imported to the chart model or retrieved from it:
// the d property on node 'a' is set and its value is cloned
var d = { value: 1 };
chart.setProperties({ id: 'a', d });
d.value = 2;
console.info(chart.getItem('a').d.value); // 1
From 7.0, KeyLines no longer clones the object and the data inside the d property is instead retained on the node:
// the d property on node 'a' is set and its value is not cloned
var d = { value: 1 };
chart.setProperties({ id: 'a', d });
d.value = 2;
console.info(chart.getItem('a').d.value); // 2This new behaviour, which improves performance and memory usage, affects the following KeyLines functions that can accept or retrieve d properties: chart.animateProperties(), chart.createLink(), chart.each(), chart.expand(), chart.filter(), chart.foreground(), chart.getItem(), chart.load(), chart.merge(), chart.serialize(), chart.setItem(), chart.setProperties().
To restore the previous behaviour, deep clone the object containing the d property
before passing it to KeyLines.
In previous versions, asynchronous functions could either provide a callback parameter or return a promise.
From 7.0, async functions are promisified by default to align with modern standards.
As a result, we've removed KeyLines.promisify() from the API, Typescript and documentation.
If you are already using KeyLines with promises, you don't need to change your code.
You can, however, remove your call to KeyLines.promisify() as it has no effect.
If you are using KeyLines with TypeScript, you need to remove KeyLines.promisify()
as you will see a build error that the function has been removed from the type definitions.
See our Asynchronous JavaScript documentation for more details about promises.
The KeyLines.callbacks() function can be used to continue using KeyLines with callbacks. This wrapper function returns a KeyLines object that works with both callbacks and promises so that you can easily gradually update your code to use promises. We recommend migrating to promises as soon as possible.
See the Using KeyLines with callbacks documentation for more details.
Note that the following breaking changes were introduced in 7.0 for callback users:
If you want to add special error handling when using callbacks, you should listen for unhandled exceptions instead:
// browser
window.addEventListener('error', function(err) {
// do something with the error
// the error may still be shown in the console depending on the browser
});
// Node and Modern JS
process.on('uncaughtException', (err)=> {
// do something with the error
});chart.options({ minZoom: 0.01 });
const currentOptions = chart.options();
In previous versions, shape nodes were a special node type with
w and h (width and height) set that was drawn in the chart background
under regular nodes and links.
In 7.0, we've removed shape nodes from the public API
as they have been superseded by more modern rectangular combos and rectangular nodes.
If your code previously contained shape nodes with w and h set,
these nodes will now be drawn as rectangular nodes in the node layer.
If you want to continue using shape nodes, you need to:
w and h setshape TypeScript definition with node TypeScript definitionNote that it's not possible to use both legacy shape nodes and regular rectangular nodes simultaneously in your chart.
From 6.0, the default expand behaviour has been changed to make use of the adaptive layout features released in 5.10. Calling expand() with default options will now only make changes to your chart that are needed to adapt to the incoming changes. The exact changes in defaults are:
packing: 'rectangle' in the expand options object.true. Note that tidy is deprecated. Use the
packing option
instead. To restore the
previous behaviour, specify tidy: false in the expand options object.'adaptive'. To restore the
previous behaviour, specify fix: 'nonadjacent'
in the expand options object.true. To restore the previous behaviour, specify
consistent: false in the
expand options object.For users of the bind() events engine, it should be called from within a mousedown event handler.
false. To restore the previous behaviour, specify
drag: { links: true }.true. To restore the previous behaviour, specify
zoom: { adaptiveStyling: false }.
Some events used with the bind() API have modified behaviour. Most of these are enhancements.
Consider migrating to the on() API instead.
'context-menu'
event instead of the 'click' event.To prevent default selection, use the selection-change / selectionchange event.
chart.bind('dragstart', function (type, id) {
const selection = chart.selection();
const idsBeingDragged = selection.includes(id) ? selection : [id];
// etc
});Unlike previous versions, KeyLines 5.0 loads images asynchronously, so images are added to the chart as soon as they're available.
Asynchronous functions that load image data into the chart, such as chart.load() and chart.setProperties(), are returned before image loading is complete Their callbacks/promises are resolved once images are loaded. See Asynchronous JavaScript for more details.
In most cases, you couldn't view insecure images from different domains in earlier KeyLines versions due to CORS security restrictions. One exception was images shown in KeyLines Canvas mode. These could be rendered but not exported or cut out into circular shapes.
In KeyLines 5.0 and later, all insecure images will be marked as missing. This means KeyLines will be consistently clear about which images can be exported. For details of how to make sure all images are secure, see Cross-Origin Images (CORS).
One effect of this is that if you download demos from this site and run them directly from the file system, you'll no longer see any images in the chart. We always recommend serving downloaded demos from a web server instead of the file system.
chart.setProperties() no longer removes properties that are set to null or undefined. If your code previously used 'undefined' to test whether properties existed, you'll now also need to check for values.
chart.setProperties({ id: '1', t: null }, false, function () {
var item = chart.getItem('1');
console.log(item.t); // null
console.log(item.hasOwnProperty('t')); // true
});Following our deprecation announcement on 15 January 2018, the following node shape (sh) object property options are no longer available or supported:
If you want to customise node shapes, use font icons. For examples, see the Style Nodes demo.
Following our deprecation announcement on 15 January 2018, the horizontal links feature is no longer available or supported. As a result, the following link properties have been removed:
We've also removed the'fanLength' chart option, previously used to configure horizontal links.
We've taken the properties 'glyphs' and 'transition' (used for the 'linkStyle' chart option) out of the 'LinkStyle' interface and moved them to a new interface 'LinkStyleOptions'.
In previous versions, double-clicking a combo had no effect. Now, double-clicking a combo toggles between open and closed states by default.
To prevent this behaviour, bind to the double-click event and return true. Note that to preserve the default behaviour of a double-click on the chart background causing a zoom, you should not return true in the case where the background is clicked. For example:
chart.on('double-click', function ({id}) {
return id !== null; // return false if the background is double-clicked; true otherwise
});We've added an 'items' option to chart.each. It lets you choose which items to iterate over when using combos. The options are:
To maintain existing behaviour, add items: 'toplevel' to the chart.each options object.
We've deprecated the 'combos' option on chart.filter and chart.foreground and replaced it with the 'items' option.
To maintain existing behaviour, if you're using:
The default option has changed from combos: false, to items: 'underlying'. If you were using the default setting in 3.8 and earlier, you need to explicitly set items: 'toplevel' to avoid a behaviour change.
chart.getItem now returns items inside combos. Previously, it returned null. To find out whether an item is inside a combo, use chart.combo().find.
chart.hide, chart.removeItem and chart.show now apply to items inside combos; previously they didn't. To find out whether an item is inside a combo, use chart.combo().find.
If your current KeyLines version has consistent: true set in chart.layout, you may get a different result the first time you run a layout after upgrading. This is a one-off breaking change: subsequent layouts will be consistent with your first result.
We've improved the following layouts:
The new layout behaviour improves every use case we support, so there is no option to maintain the existing behaviour.
We've reduced the default hover time in the hover chart option from 1000 to 150 milliseconds. To maintain existing behaviour, call:
chart.options({hover: 1000})If you call chart.ping on a node inside a closed combo, KeyLines will now ping the first visible parent combo. If you want to maintain existing behaviour and not ping the parent, you must first use chart.combo().find and chart.combo().isCombo to determine whether the node is in a closed combo.
If you use chart.ping to animate a node or link, the animated effect now appears in front of any shapes on the chart. This new ping behaviour improves every use case we support, so there is no option to maintain existing behaviour.
When users select or drag nodes, they're now always drawn on top of unselected nodes and no longer hidden behind them. This new behaviour improves every use case we support, so there is no option to maintain the existing behaviour.
Chart data serialized from an older version of KeyLines will still load correctly in 3.5. If you just use chart.serialize() to save the current chart or to maintain an undo/redo stack, you won’t need to change anything.
However, if your code parses the output from chart.serialize() and you use combos, chart.serialize().items will now include items contained in combos.
To iterate only over items not contained in combos, use chart.each() instead.
When we announce that a version of KeyLines, API, platform, database or framework is deprecated, it means that we intend to end support for it in the future and recommend that you stop using it now. For more details, see Deprecation Process.
For a list of supported devices, operating systems and browsers, see Compatibility & Supported Platforms. To share your feedback, contact [email protected].
We've deprecated the following legacy APIs, so you should replace any that exist in your code.
fi property.
Set the font icons directly also when using
imageAlignment option.
We've deprecated the following legacy APIs, so you should replace any that exist in your code.
colour option in the
border property.
We've deprecated the following legacy API, so you should replace any that exist in your code.
We're retiring the following LTA versions:
If you are using this version, we strongly recommend upgrading to the latest version so that you can make use of the full features of KeyLines.
We've deprecated a number of legacy APIs, so you should replace any that exist in your code.
chart.options()
is deprecated and should not be used. To achieve an identical effect, you can use the
linkShape option in chart.layout().
We've deprecated a number of legacy APIs, so you should replace any that exist in your code.
t:
{
t: 'Label',
position: 's'
}
We've removed shape nodes from the public API and deprecated the related APIs:
Instead of using shape nodes, we strongly recommend using rectangular combos and rectangular nodes. See also Breaking Changes for more information.
We've removed callbacks for asynchronous functions in KeyLines and removed the related API:
KeyLines.promisify() function has been removed from the API and Typescript.Instead of using callbacks, we strongly recommend using promises. See also Breaking Changes for more information.
We have deprecated KeyLines version 4.8 LTA, which means that from 1st November 2022 this version will no longer be available and support for this version will end.
If you are using this version, we strongly recommend upgrading to the latest version so that you can make use of the full features of KeyLines.
We've deprecated a number of legacy APIs, so you should replace any that exist in your code.
We've implemented a new events system that better matches native DOM events. As a result, the old events system has been deprecated. Although you will be able to continue to use the chart.bind() events for the full lifecycle of KeyLines 6.x, we recommend you consider migrating to chart.on().
We've deprecated a number of legacy APIs, so you should replace any that exist in your code.
element argument of
KeyLines.create() has been replaced
with the container argument to improve life cycle management.We've deprecated a number of legacy APIs, so you should replace any that exist in your code.
du property on nodes is deprecated and should not be used.
To achieve an identical effect you can change node styles and bind to our drag events instead.We've deprecated a number of legacy APIs, so you should replace any that exist in your code.
The Cambridge Intelligence Figma Design Kit is a powerful new tool to accelerate the design and build of beautiful, branded graph and timeline visualisations that seamlessly fit into your application UI. It aligns with our product feature sets and APIs, ensuring a faster and smoother Design-to-Development handover.
To use the Figma Design Kit, download it, and then either drag the .fig file, or import it, into your Figma project(s).
We always recommend upgrading to the latest release, as it always includes the latest features, enhancements and performance optimisations. Every release is stable and suitable for production use. We understand that you might not be able to do this right away, especially if it means upgrading to a new major version.
If you’d prefer to continue using a previous major version, you can download a KeyLines Long Term Availability (LTA) release.
Supported until 1 March 2026
Supported until 1 October 2025
With each major release we make an LTA release of the previous minor release available. We’ll provide at least 12 months notice in our deprecations before removing an older LTA version.
If you’re using an LTA release, you’ll get the same high level of support. We can't retrofit bug fixes in an LTA release, but if you find an issue, please report it to [email protected].