Having difficulty with getting the `@carbon` `elkjs` example working

Question

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?

Answer 1

Found the issue. I was missing the following in App.js:

// Charting styles
import "@carbon/charts/styles.css";