Features

• The new Expanded Rows feature allows entity timelines to expand from a single row to multiple sub-rows, displaying close events, such as those indicated by event summaries, as separate events on different sub-rows. This helps users zoom in on busy areas and see individual events more clearly, especially when duration events overlap other events. See this working in the Expanded Rows story.

This feature has been released in beta, which means it's fully functional, but could be subject to change. If you've got any feedback or questions, please let us know via support.

• You can now open and edit the Log Visualization & Analysis showcase in a playground, making it easier to experiment with modifications, or re-use snippets from it.

Bugs Fixed

• ping animations now work with duration events when using nonlinear scale mode.
• ping animations now work with duration events when using nonlinear scale mode.
• If wrapping is set to 'undefined', it now defaults to being off.
• Time series charts set with no data now display an empty chart with no error message.

• A React versioning issue associated with using npm to install the download bundle has been fixed.

• We recently launched the Cambridge Intelligence Figma Design Kit, which helps accelerate the design and build of your graph and timeline visualizations. It is now available to download here.

Features

• We have introduced a new Log visualization showcase that illustrates how to use KronoGraph to incorporate a responsive timeline showing the resources involved with each logged event. You can use this to extend conventional observability platforms, so that you can quickly spot patterns or trouble spots, while still being able to drill down into individual logs.

Enhancements

• The technology behind the KronoGraph Playground has been updated and improved, loading more quickly to provide a better development experience.

Bugs Fixed

• When event folds that include events with labels are opened, they no longer overlap adjacent events.

Features

• We have introduced a new event labels feature. You can now add short text or font icon labels to event lines in your timeline, which scale with your data, appearing as hints when there isn't enough room. You can configure their shape, orientation and color, or simply let them automatically inherit the color from their respective event lines (including gradients), instantly producing elegant results.
• We updated the Credit Card Fraud demo to showcase the new event labels feature.

Enhancements

• We improved our Getting Started docs by providing tabs to select your package manager. You can now select from npm, yarn and pnpm which will automatically offer up the correct code snippets.
• We updated the Obfuscation Requirements docs to include a statement about your obligations with regards to any applicable Open Source Software (OSS) licenses.

Bugs Fixed

• We updated the Detection and Response demo to comply with React 19.
• We've added React as an optional peer dependency to the product bundle to address potential warnings from package verification tools.

Features

• Our popular Detection and Response demo now features a new Open in Playground button so you can explore, modify and run the demo code, or use the demo as an inspiration in your own development.

Enhancements

• We've documented our new internal security process, and the new internal scanners that we use to further improve the security, consistency and quality of our codebase. Read more in the KronoGraph Development docs.

Bugs Fixed

• The panLimit is correctly set to 'off' when events have nanosecond times specified.
• The bounds for marquee drag in the scale area are now calculated more accurately.
• There is no longer a gap between the label area and the timeline when the focus and pin controls are hidden and labelAreaWidth is set to 'auto'.
• The getEventPosition API now reports correct y coordinates when called within the range event.

Features

Have you ever wondered how we make our showcase demos work with KeyLines? We've created an Integration Playground so you can take a look. It's fully commented, so you can learn how the interactions between the chart and the timeline work. You can even add your own data, just make sure that it's in the correct KronoGraph format.

Have you ever wondered how we make our showcase demos work with ReGraph? We've created an Integration Playground so you can take a look. It's fully commented, so you can learn how the interactions between the chart and the timeline work. You can even add your own data, just make sure that it's in the correct KronoGraph format.

Breaking Changes

Based on customer feedback, we have introduced a minor breaking change to the annotations in beta.

The value passed to the id property in the event handler of KronoGraph events no longer varies for different interacted annotation parts and it now always contains the id of the annotation.

Instead, to show which part of the annotation was interacted with, we've added new possible values for the the targetType property in the event handler which include 'annotationBody', 'annotationDeleteButton' and 'annotationEditButton'.

See Handling Events for more details.

See Handling Events for more details.

Bugs Fixed

• The annotation connector line for a single annotation no longer disappears when its dragged over an event line and the container style is set to 'none'.
• The annotation connector no longer overlaps the container when panning.
• dateTimeNames and dateTimeFormats are updated correctly when switching between locales.
• Passing invalid heatmapColor values no longer causes an issue and correctly reverts to default colors.
• Padding has been added between the entity label and the edge of the label area when the heatmap is shown.
• Event fontIcons are now displayed correctly when closed event folds are in the visible time range.

Annotate your data to reveal the hidden narrative

Our powerful new annotations feature reveals the story of your visualized data. Annotating key events adds context to the timeline, making the data more accessible and understandable.

You can either bring annotations into the timeline automatically as your data loads, or add them to key data points to highlight what's important. We've added annotations to our existing showcases to inspire you, including the Worldwide Terrorism demo, the Email Analysis demo and the Credit Card Fraud demo.

The new annotations annotations API provides the flexibility to style and position annotations on your timeline and tie them in to your overall product design. Take a look at the Styling Annotations story to try out some of the options.

To get started, dive into the Annotations docs and create your annotated timeline.

Annotations has been released in beta. This means that it is fully functional, but could be subject to change. If you've got any feedback or questions, please let us know via support.

Introducing Selection

KronoGraph now offers selection functionality with the new selection API. To use it, simply enable selectionMode.

KronoGraph now offers selection functionality with the new selectionMode prop. To use it, simply enable selectionMode.

Combine annotations with selection functionality to identify those interesting events and areas of the timeline. An example of how this might work is shown in the Creating Annotations story.

Nonlinear scale mode allows smarter event spacing

The new nonlinear scale mode compresses and expands time when there are dense clusters of events, large gaps between events, or you want to maximize timeline space for exported images. This can make it easier to see what's happening when the events in your timeline occur at irregular intervals.

Try it out by setting the scaleMode to 'nonlinear' to see the effects on your timeline. Find out how it works in the the Scale Mode docs or explore the benefits in the Crime Investigation demo or the Nonlinear Scale Mode story.

Breaking Changes

• Time series chart Ids must now be unique. If your time series charts share ids with an entity or event they must be renamed.
• The options prop now only applies the current set of options.

Removed API

These APIs were deprecated in the 2.4 release. Use Glyphs instead.

• showCircles has been removed from the entities option.
• fontIcon has been removed from the entity data format.
• fontIcon has been removed from the entityType data format.

This API was deprecated in the 2.0 release. It no longer had an effect, but now it will need to be removed from your code.

• priority has been removed from the entityType data format.

Bugs Fixed

• The lens now closes when lens is set to null.

Features

• We've enabled createPortal to allow you to open your KronoGraph app in a new window. See it working in the Create Portal story.
• We've added the new setContainer API to allow you to open your KronoGraph app in a new window. See it working in the Set Container story.
• We've added a new scale styling API. The fadeAtLeft option controls whether the scale fades out at the left edge of the timeline.

Bugs Fixed

• Fixed an issue where more than one event fold was highlighted when hovering the timeline.

Features

• Study your events with greater precision using the new scaleGuide feature. Whether the scale is visible or not, the handy vertical line reveals the exact time of events with configurable textFormat and snapDistance APIs. You can also style the scaleGuide to fit the existing design of your app. Try it out with the new Scale Guide story or the Email Analysis demo.
• We're providing new guidance for accessibility, with useful information about the WCAG 2.1 guidelines .

Bugs Fixed

• Duration events no longer flicker at very high zoom levels.
• Ping animations are now centered on heatmap cells when there are no revealed events.
• Ping animations are now centered on heatmap cells when there are no revealed events.
• Hovering an event within an Event Fold no longer causes the entity to be briefly highlighted.
• Fixed an issue where the subItem was not returned for heatmap cells in run rows.

Features

• We've made improvements to time series charts, which are now out of Beta! We've added Stacks to allow you to fit more on the screen and directly compare charts. Take a look at the updated Time Series Chart Tooltip story for a nice example and to see how to add tooltips.
• Make your charts shine! Try the new time series chart lineStyle option, giving you more control over the appearance of your chart and making stacked charts easier to distinguish.
• It's now possible to adjust the time series chart shading to improve readability. Take a look at the updated Time Series Charts story or try the Network Traffic Analysis demo.
• We've updated the Heatmap Colors story to include a legend to show how you can display your custom heatmap color scales to end users.

Enhancements

• Performance has been optimized for loading data to the timeline, which is now more than 37% faster.
• Accessibility for the KronoGraph SDK site has been upgraded.

Bugs Fixed

• Row animations are now much smoother when panning or zooming.

Features

• The new heatmapColor API gives you the flexibility to tell the story you need to with custom heatmap coloring. For example, assign colors to types or a range of values. Explore the available coloring options in the new Heatmap Colors story. See also the Detection and Response demo which now highlights security alerts with a custom color scheme to match the alert status.
• Users who are new to KronoGraph can now hit the ground running with our new Introduction demo.

Features

• In a sea of events, shine a light on the ones that really matter with the new customizable ping API. See how to set it up in the Ping Animations story.
• In a sea of events, shine a light on the ones that really matter with the new customizable ping API. See how to set it up in the Ping Animations story.
• We've added a new Emojis story to show you how to add special characters to your app.
• The new Responsive Timeline story shows how KronoGraph can adapt to different viewport sizes by collapsing different elements in the timeline.

Bugs Fixed

• The timeline remains draggable while animations are in progress.

Features

• Load data in stages as you need it with our new support for large datasets. Use zoomOutLimit and panLimit to control how much of the data the user can see in the timeline. See an example of this in the Loading Large Datasets story.
• Find meaning in your log files and keep tabs on your network security. Our brand new Detection and Response demo shows one way to do it by tracking alerts and only showing what is relevant.
• Analyze important events in the sequence they unfolded and add more information with annotations in our new Crime Investigation demo. The demo is based on the 2018 Salisbury poisonings in the UK.

Enhancements

• The lens highlight can now be removed with the new showLensHighlight API. See the difference in the Lens story.

Features

• Do you find yourself wanting to add extra visual information to your entities and entity types? Now you can with the enhanced glyph API. We've added font icon support in addition to finer control over color, size, position and more. See how it's done in the Styling Glyphs story.
• Markers now allow you to add a duration using the TimeRange object. We've also enabled font icons as well as a myriad of new styling options. Take a look at the Markers story for inspiriation.
• We're excited to bring you nanosecond support! As JavaScript doesn't support sub-millisecond numbers, we've created a new feature that allows you to use data with these very small intervals of time in KronoGraph. Check out the new Higher Resolution Time story to find out more.

Bugs Fixed

• Firing a dragEnd event over a time series chart no longer causes an issue.
• The lens highlight no longer flickers when the pointer is moved over the label area border.
• The lens icon is no longer drawn outside of the lens lighlight area in certain circumstances.
• Marquee drag is correctly applied when the pointer is moving at the time the click is released.
• Hovering over the top or bottom scale only highlights the scale that is being hovered.
• Using showEventsOnNeighbors no longer causes an issue with the heatmap.
• getEvent and getEntity now return all the properties of the event or entity requested.

Deprecated APIs

• Circles have been replaced by Glyphs so we have deprecated the showCircles API.

Features

• We've added the ability to set the width of the label area with the new labelAreaWidth labelAreaWidth API. You can see an example in the Styling the Timeline story or read more in the new Label Area Width docs.
• Sometimes events are spread too far apart or grouped too closely together to tell their story. In this case, spacing events evenly across the timeline could be more insightful. See how it could work in the new Sequence View story.
• We've included a new search bar to the navigation at the top of the page. Search the KronoGraph SDK site as well as relevant Cambridge Intelligence blog posts and webinars .

Bugs Fixed

• Entity ids that share internal property names are no longer visible when they don't have events in the current time range.
• Entity names with double backslashes no longer disable the focus and pin controls.
• Extra space is no longer added at the top of the lens when the lens is scrolled to the bottom of the timeline.
• Arrows for complex events are no longer obscured when fadeOutsideRange is true and the lineWidth is larger than the arrows.
• Duration events no longer cause heatmap cell end times to return incorrect values.

Features

• We've added a new Supply Chain demo inspired by a mass recall of contaminated spinach in 2006 in the USA. The demo shows how KronoGraph can quickly reveal issues in a complex supply chain, help trace shipments from production to retailers, and resolve the issue on a smaller scale without negatively impacting the entire supply chain.

Bugs Fixed

• Fixed an issue where the timeline range was not correctly set when events were outside of the default range.
• Fixed an issue where the default font icon color wasn't applied correctly.
• Fixed an issue to make the interaction area for non-aggregated single event joins larger.
• Fixed a display issue in Safari for the Geospatial demo where a triple click on the map showed a colored overlay.

Features

• Show events while viewing the heatmap with the new reveal API and bring them into focus by fading out unrelated rows that don't have revealed events with revealHeatmapAlpha. See an example in our interactive Reveal story.
• Show events while viewing the heatmap with the new reveal API and bring them into focus by fading out unrelated rows that don't have revealed events with revealHeatmapAlpha. See an example in our interactive Reveal story.
• Heatmap cell information is returned via the subItem object, allowing you to find the properties of the cell and add interactions, such as tooltips seen in the Heatmap Tooltips story.
• Export a static PNG image of the timeline with the new export API and share it with colleagues and customers. See the Export to PNG story.
• Export a static PNG image of the timeline with the new export API and share it with colleagues and customers. See the Export to PNG story.

Bugs Fixed

• Entity ids containing a '|' character no longer cause an issue when hovering over focus or pin for that entity.
• Fixed an issue where a highlight was added to the scale during marquee drag.
• Fixed an issue in the lens where rows near the edge could be too thin when scrolling.
• Fixed an issue where the lens icon was cut off.
• Removed unnecessary lens highlight flickering when moving the pointer over events.
• Removed the behavior allowing the marquee zoom to start when the pointer was not over the scale.
• Console log warning advising the use of 'willReadFrequently' removed.

Introducing Lens, the new navigation experience

KronoGraph now shows event data for all entities in the timeline to give you an instant and tidy overview of your data. This allows you to identify areas of interest right away, and then take a closer look using the lens feature.

To open the lens, simply hover over the part of timeline that you want to investigate and click the control. The lens will keep the context of where you are in the data while enlarging a small section of it. You can scroll to bring new data into view.

We're also giving you the option to control the lens through the lens API as either a getter or a setter.

We're also giving you the option to control the lens through the lens prop as either a getter or a setter.

We're providing some new TargetType options. You can use 'lensControl' and 'lensScrollbar' to determine how your users are interacting with the lens and add customizations. We have a new dragType, called 'lensScrollbar', which is returned when the scrollbar is used.

Try it out with the Lens story or Terror demo.

See our Migration Guide for help updating your app.

We've added a new Glyphs feature

Glyphs can be used as a visual marker for your entities, like in our Fraud demo. Or add them to groups to clearly associate entity rows with their group labels, see our Terror demo for an example. Add them to your data using Entity.glyph and EntityType.typeGlyph. There's more to come here so look out for updates in later releases.

The heatmap has been upgraded

The size of the heatmap cells are now calculated in a way that shows more detail for large datasets. We're also quantifying the alpha values in a way that gives greater differentation between cells.

New and updated APIs

• New label property returned for pointer events.
• New 'pointer-move' event behavior fires if the timeline moves beneath the pointer as well as the pointer over the timeline.
• The hover event has been updated, so its not just fired when the id changes but also when the target type changes.
• The onTimelineHover event has been updated, so its not just fired when the id changes but also when the target type changes.

Breaking Changes

• Heatmap cell alpha values have a new calculation applied. Visual breaking change only.
• When hovering over the focus or pin controls, the hover event handler now returns 'id' instead of '_focus|id' or '_pin|id'. Use targetType to check if your pointer is over the focus or pin controls.
• When hovering over the focus or pin controls the onTimelineHover event handler now returns 'id' instead of '_focus|id' or '_pin|id'. Use targetType to check if your pointer is over the focus or pin controls.
• color now defaults to 'entity'. Visual breaking change only.
• heatmapPadding now defaults to true. Visual breaking change only.
• heatmapThreshold now defaults to 100. Visual breaking change only.
• showCircles now defaults to false. Visual breaking change only.
• showEventFolds now defaults to true.
• showLines now defaults to 'individualEvents'. Visual breaking change only.
• standardRowHeight now defaults to 24. Visual breaking change only.

Deprecated APIs

• We have deprecated priority. It remains part of entityType, but no longer has an effect.

Removed APIs

• expand event
• expandedRowId
• expand option of controls
• targetType values: 'collapse', 'expand', 'entityGroupMore', 'entityGroupRun'

Features

• Time series charts have been promoted to beta, so you can use them in production. Please send your feedback to [email protected].
• A new type property for time series charts offers two ways of connecting data points - 'linear' and 'step'. The 'step' option is especially useful to display immediate changes in certain datasets such as account balances. The Time Series Charts story shows both options.
• Set the fontFamily for your application. See how it works in the Styling the Timeline story.

Enhancements

• Performance improvements for large datasets in time series charts.

Breaking Changes

• The time series chart label and base line will now have a targetType of 'timeSeriesChart' instead of null.

Features

• You can now customize your heatmaps by generating them from a value of your choosing and by controlling the underlying event directions. Use the heatmapValue API to assign your data and heatmapDirection to show the direction. Combine the two options to create a heatmap that reveals, for example, which entities are sending the most money, and which entities are receiving the most. See it in action in our Heatmap story.

Enhancements

• Control the look of your timeline with the new heatmapPadding and showLines options.
• The new getEntityPosition and getEventPosition getEntityPosition and getEventPosition APIs allow you to get the positions of entities and events on the timeline. Use them to add your own HTML pointing to entities and events that stays in sync as the timeline moves, like our Annotations story. These APIs are currently in beta. Please send your feedback to [email protected].

Bugs Fixed

• Row fading animations now better complement event animations.
• Fixed an issue with internal tooling on the SDK site. There are no behavior changes to the KronoGraph package.

Enhancements

• We've added a new Money Flow demo to show you how KronoGraph can represent financial data and expose fraudulent transactions. Here we flag suspicious transactions that have occurred within a possible money laundering operation.
• A new joinStyle option lets you decide how to show links between exactly two entities. See our Multiple Recipients story for an example.
• We've improved security by adding a SAST step to our build. For more info see our Architecture docs.

Breaking Changes

• Missing startTime and endTime properties in event handler objects are now undefined instead of null. This makes them consistent with the time property. If your code currently checks for null, update it to use undefined instead.

Bugs Fixed

• Fixed an issue with older playground links so they now work correctly.
• Fixed an issue where unfocusing when zoomed out a long way can break the zoom limits.
• Fixed an issue where the labelColor of an entity appeared with the wrong alpha value.
• Fixed an issue causing unnecessary CPU usage while the timeline is idle.

Features

• You can now build integrations between KronoGraph and KeyLines or ReGraph in our Playground. It's ideal for trying out different interaction patterns and understanding how to synchronize content between the graph and timeline views. Try our Keylines and ReGraph Integration stories as a starting point.
• You can now customize the language and format of date and time in the timeline scales to perfectly adapt to your locale. See how it works in our Scales Options story.

Enhancements

• The getInRangeItems getInRangeItems API gives you easy access to all the entities and events that are in range so that you can pass them between your KronoGraph and KeyLines or ReGraph visualizations.
• We're now showing a CSS tab for stories that include interesting styling, such as our Tooltip on Timeline story. Opening these stories in the Playground will allow you to edit the HTML and CSS in real time.
• We've added some helpful cross-links to help you navigate our API reference, and made it clearer which items in the API are optional or required.

Bugs Fixed

• Improved stability when loading time series charts with a large number of data points.
• Fixed an issue which caused complex events to be aggregated incorrectly.
• Improved rendering performance of events with color gradients in Firefox and MacOS.
• Fixed an issue with the display of some simultaneous events in Safari.

Features

• Seeing data from different perspectives during analysis can help you navigate large datasets and spot interesting information and patterns faster. KronoGraph now lets you add time series charts into your timelines, harnessing the power of two simultaneous views - continuous data and sequences of discrete events. See more in our new stories - Time Series Charts and Time Series Chart Tooltips.
  
  This feature is currently in alpha. Please send your feedback to [email protected].

Enhancements

• A new showCircles option to control whether the circles at the start of the entity lines are displayed.

Features

• Even timelines with very dense or closely neighboring events should keep as much informational value as possible without appearing crowded. This is why KronoGraph now elegantly combines event joins and event lines into 'event summaries'. When interacted with, a targetType 'eventSummary' is passed to the event handler and the eventIds property contains the ids of summarized events. See the improved behavior throughout our showcase demos.

Enhancements

• To prevent cluttered and overlapping timelines, font icons are no longer drawn if there is not enough space. They will reappear once the user zooms in far enough for the font icons to fit.

Features

• KronoGraph now has its own live code editor! To start writing your own code, you can access the new Playground from the top navigation panel or by clicking the playground icon available in the bottom right corner of all our stories in the Storybook.
• We've simplified heatmaps by introducing a single heatmapThreshold option that determines whether heatmap or individual events are drawn. As a result, the two views transition smoothly without overlapping.

Breaking Changes

• heatmapLowerThreshold and heatmapUpperThreshold have been replaced with a single heatmapThreshold option.

Features

• KronoGraph now attempts to vertically order entities to minimize the length of the connections between them. This results in much clearer timelines and also helps analysts spot clusters, such as groups of people who regularly communicate with each other. You can still choose to e.g. order entities alphabetically or by event order using the ordering ordering option.
• We've updated our Telephone Call Analysis demo to show you how to combine KronoGraph with more UI elements including a chart, time bar, date picker, search box and undo/redo controls.

Enhancements

• A new reorder property that you can set to false to keep the order of entities after focus change.
• The horizontal entity lines are now fainter and less intrusive by default.
• The fadeOutsideRange option, highlighting the range of events' activities, is now off by default. Set it to true to turn it back on.

Features

• We've reworked the design of some events to make them clearer and easier to analyze. For example, you'll notice that events with duration and multiple entities are now drawn using bars along each entity line, rather than as a large solid rectangle. To showcase the improved design we've added a number of new stories in the Data Model section of our Storybook.
• We've also improved drawing of complex events with multiple inputs and outputs by adding optional from and to properties to entityIds. If you specify them, you'll see the ins and outs reflected in the event direction in relation to each entity, just like in our new Multiple Sources story.
• The default coloring behavior for events with no specified color has also been improved. For example, this results in smarter color gradients of non-directional events.

Bugs Fixed

• Fixed an issue where group labels were sometimes not truncating correctly.
• Fixed an issue where double-clicking on major scales when they're empty could produce an error.
• Fixed an issue where KronoGraph could sometimes produce an empty timeline on initial load.

TypeScript Changes

• TypeScript changes to reflect the extended format of the entityIds property.

Features

• We've introduced panning and zooming limits for the timeline which ensure that your data is always readable. In addition, panning or zooming into a specific area now always keeps at least one event or marker in view to help you keep track of where you are in the timeline.
• Our updated Phone Call Analysis demo now features a sleek dark mode design and scale wrapping.

Bugs Fixed

• Fixed some issues that could cause unexpected scale behavior when zooming into the chart.

Features

• KronoGraph now supports marquee zoom for even faster and more precise navigation. There are two ways to start a marquee range:
• Hold left click and drag from the top or bottom scales.
• Hold left click + shift key and drag anywhere in the timeline.

Once the marquee range is finished, the timeline zooms into the created range.

• The drag-start event The onTimelineDragStart event contains a new setDragOptions() function that lets you customize the type of drag when the event is fired. See how to create custom draggers for various user interactions in our brand new Custom Dragging story.
• KronoGraph is now fully supported when used in a shadow DOM which makes it more compatible with Web Components and related tools like Polymer.

Bugs Fixed

• Improved the appearance of the scale at the edges of the timeline.
• Fixed an issue with the way times were returned from events that occurred on very old dates.

Features

• This version features a new scale wrapping option for exploring patterns of behavior, sometimes known as 'pattern of life' analysis. Scale wrapping summarizes data over a chosen period, such as a day or week, and provides a unique insight into patterns and anomalies in your data. Take a look at our new Pattern of Life Analysis showcase demo to see it in action.
• We've also added a scale wrapping story to show you how to implement the feature.

Bugs Fixed

Loading data into an empty timeline will now always fit to view.
• Fixed an issue where using a grouping property with the same name as an ID or with a reserved name could sometimes cause an error.

About this Release

We're thrilled to announce the first General Availability release of KronoGraph. Version 1.0 has a stable API that’s been validated and guided by over 100 developers who took part in our Early Access program. Thank you for all your contributions!

See the Breaking Changes section for more details on the new API.

Features

Improved Entity Groups

We've made some big improvements to the way groups look and behave. For example, the interactive group labels let you perform actions on a group as a whole, such as focusing or expanding an entire group. And thanks to our innovative 'runs' approach, any group can now be opened, no matter how big. See the improved groups in our Grouping stories and our Showcase demos.

Richer UI Controls

Exploring the timeline is now easier with even more UI controls. You can expand or focus groups, focus entities or pin them to make sure they're always in the view. These controls can also be hidden or called programmatically, letting you create your own UI that suits your design.

Better Events Handling

We've improved event handling and added more events you can respond to in your event handlers. We've also made zooming on the timeline more precise, added the possibility to configure a hover delay and added support for some touch gestures such as pinch-to-zoom or a long press. To find out more about events and how to respond to them, take a look at our new Events and Context Menu stories.

Friendlier Validation

We've significantly improved validation for a better user experience. The error messages returned by KronoGraph when validation fails are now more detailed and useful for debugging.

Breaking Changes

For any help implementing the changes below, please contact support.

Data Structure

• The properties of entities and events on the data object passed to timeline.set are now dictionaries indexed by the item id rather than arrays. See the new data structure in the Simple Events story.
• The properties of entities and events props are now dictionaries indexed by the item id rather than arrays. See the new data structure in the Simple Events story.
• Since events and entities are no longer arrays, it's no longer possible to define a strict load order to support the load order ordering method. We now support 'keyorder' instead, which uses JavaScript's key ordering to infer an ordering for entities.
• Since events and entities are no longer arrays, it's no longer possible to define a strict load order to support the load order ordering method. We now support 'keyorder' instead, which uses JavaScript's key ordering to infer an ordering for entities.
• The id properties of both entity and event have been removed.

Entity Groups

• By default, double-clicking an entity group now focuses a group instead of expanding it.
• The groupingProperties property of EntityType has been renamed to groupBy.
• The type and/or groupBy properties of open groups are now always shown in the form of a new row.
• The showPinOnHover function has been removed. Use the controls API instead.

Handling Events

• Interactions on the background now return null instead of 'undefined'.
• Timeline controls (pin, focus, expand) now have a targetType instead of retuning null.
• Scale now has an id and targetType instead of returning 'undefined'.
• The id of a single entity row is now the id of the entity itself rather than an id of a group containing a single entity.
• Preventing default behavior of an event is now done by calling the preventDefault() property instead of returning true from the event handler.
• The hover event now fires with a default delay that can be configured in the hover option.
• The default behavior when double-clicking heatmap cells is now to focus the entity row.

General API Consistency

• The dx and dy attributes of a fontIcon are now expressed as percentages of a font icon's size rather than as absolute offsets.
• The value property of event has been removed. Use the event's data property to store custom values on an event.
• The id property of ComponentDefinition has been removed. The canvas id is now set internally.

Features

• We've improved the way dates and times are handled by KronoGraph, giving a more consistent developer experience. The API accepts either a Date in local time or a millisecond number in UTC from the user. However, the API always returns times to the user as Date objects in local time.
• Added a new contextmenu event which fires when the user right clicks on the timeline. On touch devices this is triggered when the user long presses on the timeline.
• Added a new onTimelineContextmenu event which fires when the user right clicks on the timeline. On touch devices this is triggered when the user long presses on the timeline.
• Improved documentation for security and time zones.
• Added About this Website page covering third party tools used to build this site.

Bugs Fixed

• Various small fixes to the SDK site and stories.

Features and fixes

• Improved scale drawing with tick marks correctly aligned with events.
• Added explanatory text to the Showcase demos.
• Various small fixes to the SDK site.

Features

• New Storybook page added with code examples for both plain JavaScript and React.
• Updated API reference pages with navigation tree.
• Fully updated Getting Started guides and documentation pages.

Bugs Fixed

• Fixed various documentation and demo issues.
• Fixed an issue where the pin icon would not display in some circumstances.

Features

• Improved grouping behavior and labeling.
• Added option to hide or show pins on entities.
• New geospatial demo showing the combination of KronoGraph and KeyLines/ReGraph in map mode.

Bugs Fixed

• Fixed an error which could occur for timelines in very small containers.
• Fixed an issue related to pinned entities in focus mode.

Features

• Added downloads and documentation to the site.
• Added first version of a React component.
• New Getting Started guides for JavaScript and React.
• Various improvements to grouping and ordering behavior.
• New insider trading demo.

Bugs Fixed

• Fixed an occasional crash when zooming out a long way.