JSFiddle - React, Tailwind, and code Playground

by djakacki

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/networkgraph.js"></script>

<div id="container-1"></div>

CSS

* {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        sans-serif;
}

#container-1 {
    width: 100%;
    margin: 0 auto;
    float: left;
    height: 600px;
}

JavaScript

function createChart(container, integration, linkLength) {
  Highcharts.chart(container, {
    chart: {
      type: "networkgraph",
      plotBorderWidth: 1,
    },
    title: {
      text: "Students in HUMN270",
    },
    subtitle: {
      text: "What We Do",
    },
    plotOptions: {
      networkgraph: {
        layoutAlgorithm: {
          enableSimulation: true,
          integration: integration,
          linkLength: linkLength,
        },
        keys: ["from", "to"],
        marker: {
          radius: 7,
          lineWidth: 1,
        },
      },
    },
    series: [
      {
        nodes: [
          {
            id: "Arts & Sciences",
            dataLabels: {
              enabled: true,
            },
            marker: {
              radius: 20,
              fillColor: "purple",
            },
          },
          {
            id: "Engineering",
            dataLabels: {
              enabled: true,
            },
            marker: {
              radius: 2,
              fillColor: "purple",
            },
          },
          {
            id: "Management",
            dataLabels: {
              enabled: true,
            },
            marker: {
              radius: 3,
              fillColor: "purple",
            },
          },
          {
            id: "Sophomore",
            dataLabels: {
              enabled: true,
            },
            marker: {
              radius: 12,
              fillColor: "green",
            },
          },
          {
            id: "Junior",
            dataLabels: {
              enabled: true,
            },
            marker: {
              radius: 5,
              fillColor: "green",
            },
          },
          {
            id: "Senior",
            dataLabels: {
              enabled: true,
            },
            marker: {
              radius: 3,
              fillColor: "green",
            },
          },
          {
            id: "Fresh",
           ...