ReGraph accepts data in the form of a JSON object. Each key is the id of a node or a link. See the Data tab to see how this chart was created.
Links are identified by having both an id1 and id2 property with node ids as their values.
See also
import React from "react";
import { createRoot } from "react-dom/client";
import { Chart } from "regraph";
import data from "./data";
export const Demo = () => <DataFormat items={data()} />;
function DataFormat(props) {
const { items } = props;
return <Chart items={items} />;
}
const root = createRoot(document.getElementById("regraph"));
root.render(<Demo />);import { style } from "@ci/theme/rg/js/storyStyles";
function data() {
return {
// node1 is the 'id' of the node
node1: {
label: {
text: "Node One",
...style.primaryLabel1,
},
...style.primary1,
},
node2: {
label: {
text: "Node Two",
...style.primaryLabel1,
},
...style.primary1,
},
link: {
// a link's ends are defined by id1 and id2
id1: "node1",
id2: "node2",
label: {
text: "Link",
...style.darkLabelBackground,
},
...style.link,
},
};
}
export default data;<!doctype html>
<html>
<body>
<div id="regraph" style="height: 100vh"></div>
<script type="module" src="./code.jsx"></script>
</body>
</html>