JSFiddle - React, Tailwind, and code Playground

HTML

<div id="chartDiv" style="width: 100vw; height: 100vh"></div>
<script src="https://cdn.plot.ly/plotly-2.30.1.min.js" charset="utf-8"></script>

JavaScript

window.addEventListener('DOMContentLoaded', () => {
   const chartDiv = document.getElementById('chartDiv');

   const labels = ["Start", "Middle", "Begin", "End", "Final"];
   const labelIndex = new Map(labels.map((label, i) => [label, i]));
   const links = [
      { source: "Start", target: "Middle", value: 5, label: "Test" },
      { source: "Start", target: "Middle", value: 3, label: "Test2" },
      { source: "Middle", target: "Start", value: 1, label: "" },
      { source: "Start", target: "End", value: 2, label: "" },
      { source: "Begin", target: "Middle", value: 5, label: "Test" },
      { source: "Middle", target: "End", value: 3, label: "" },
      { source: "Final", target: "Final", value: 0.0001, label: "" }
   ];
   const sources = links.map(link => labelIndex.get(link.source));
   const targets = links.map(link => labelIndex.get(link.target));
   const values = links.map(link => link.value);

   const customData = links.map(link => [link.source, link.target, link.value]);

   const trace = {
      type: "sankey",
      orientation: "h",
      arrangement: "fixed",
      node: {
         label: labels,
         pad: 15,
         thickness: 20,
         line: { color: "black", width: 0.5 },
         hoverlabel: {
            bgcolor: "white",
            bordercolor: "darkgrey",
            font: {
               color: "black",
               family: "Open Sans, Arial",
               size: 14
            }
         },
         hovertemplate: '%{label}<extra></extra>',
         color: ["#a6cee3", "#1f78b4", "#b2df8a", "#a9b1b9", "#a9b1b9" ]
      },
      link: {
         source: sources,
         target: targets,
         value: values,
         label: values,
         arrowlen: 20,
         pad: 20,
         thickness: 20,
         line: { color: "black", width: 0.2 },
         color: sources.map(i => ["#a6cee3", "#1f78b4", "#b2df8a", "#a9b1b9", "#a9b1b9"][i]),
         customdata:...