React Graph Component
How to integrate custom graph visualization into your React-based web application. Quickly and easily.
The open-source web application framework React is a popular choice among web developers. There exist many accompanying component frameworks that facilitate the build of a modern web application. Its component-based approach allows creating use case specific components easily. For example, wrapping yFiles for HTML in a React component, yields a graph visualization component with an easy to use interface, customizable visualization, and sophisticated layouts.
yFiles for HTML is a commercial programming library explicitly designed for graph, network, and diagram visualization. Note that the word "graph" refers to the mathematical graph with nodes and edges, rather than a function graph or bar charts, here. yFiles' built-in user input handling makes the graph visualization accessible with keyboard, mouse, or touch gestures. The graph visualization can be tailored to any domain with flexible style options. And its sophisticated layout algorithms easily create readable, pleasing, and informative graph visualizations.
React components typically use data binding to visualize business data that is associated with an element. The framework provides specific directives to bind data in templates easily.
These templates can be used to create dynamic, arbitrary element visualizations. For example, rendering node elements that are zoom-dependent to show the different detailed data:
In a component-based web application, data is usually passed to the component to create the graph. Although yFiles for HTML can be directly attached to an asynchronous data provider, it is also possible to provide data objects (e.g., JSON) from which a graph visualization will be generated.
This allows defining an interface for the component that binds to the graph data. Thus, all features of the yFiles graph visualization library can be utilized on the data to create a perfectly tailored user experience.
Often, connected data does not contain positional information and relies on the user or the application to arrange the elements in a meaningful way.
yFiles’ sophisticated layout algorithms provide arrangements for many different use cases out of the box, each of which can be configured to match specific requirements.
yFiles for HTML comes with a React Sample Application that shows how to integrate yFiles for HTML in a React project by simply adding yFiles as npm module dependency. The source code of this application is available on the yWorks Github repository and part of the yFiles for HTML package.
Test the yFiles for HTML graph visualization library with a 60-day, fully functional trial package. The recommended way to use yFiles for HTML in a React application is shown by the React source code examples that are part of that package.
Download a trial version of yFiles for HTML.
Navigate to the source directory of the React Sample Application or the React TypeScript Sample Application, respectively.
Inspect the sample application’s documentation and
copy its build configuration and its React sample graph components to your project or
adjust its source code to match your requirements.