I am unable to get the following IBM Carbon Design elkjs
diagram to work:
https://codesandbox.io/s/carbon-charts-react-elkjs-diagram-b9xyp
Below is the code in my App.js
:
import './App.scss';
import {
Button,
Grid,
Column,
Content
} from '@carbon/react';
import React, { useEffect, useState } from 'react';
import _config from './AppConfig.development.js';
import IdeHeader from './components/IdeHeader/IdeHeader';
import IdeSideNavMenu from './components/IdeSideNavMenu';
import Elk from './components/IdeElk';
const App = () =>
{
const [isError, setIsError] = useState(false);
const [errorReference, setErrorReference] = useState("");
const [errorMessage, setErrorMessage] = useState("");
const [isLoading, setIsLoading] = useState(false);
const size = 48;
const nodeData = [
{ id: "a", height: size, width: size },
{ id: "b", height: size, width: size },
{ id: "c", height: size, width: size },
{ id: "d", height: size, width: size },
{ id: "e", height: size, width: size },
{ id: "f", height: size, width: size },
{ id: "g", height: size, width: size },
{ id: "h", height: size, width: size }
];
const linkData = [
{ id: "1", source: "a", target: "b" },
{ id: "2", source: "c", target: "b" },
{ id: "3", source: "d", target: "e" },
{ id: "4", source: "d", target: "b" },
{ id: "5", source: "b", target: "f" },
{ id: "6", source: "g", target: "h" },
{ id: "7", source: "h", target: "f" }
];
useEffect(() =>
{
}, [])
return (
<>
<IdeHeader />
<IdeSideNavMenu />
<Content>
<Grid className='bx-main'>
<Column xlg={16}>
<Elk nodes={nodeData} links={linkData} layout="layered" />
</Column>
</Grid>
</Content>
</>
);
}
export default App;
The code in ./components/IdeElk
is exactly the same as the above-linked Sandbox.
But, rather than getting an output like this:
I am instead getting an output like this:
What on earth am I doing wrong here?
Found the issue. I was missing the following in App.js
:
// Charting styles
import "@carbon/charts/styles.css";