samples/tree.html

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/chart.js@3.8.0/dist/chart.js"></script>
    <script src="../build/index.umd.js"></script>
  </head>

  <body>
    <div style="width: 75%">
      <canvas id="canvas"></canvas>
      <select id="mode" value="dendrogram">
        <option>dendrogram</option>
        <option>tree</option>
      </select>
      <select id="orientation" value="horizontal">
        <option>horizontal</option>
        <option>vertical</option>
        <option>radial</option>
      </select>
    </div>
    <script>
      fetch('./tree.json')
        .then((r) => r.json())
        .then((nodes) => {
          const chart = new Chart(document.getElementById('canvas').getContext('2d'), {
            type: 'dendrogram',
            data: {
              labels: nodes.map((d) => d.name),
              datasets: [
                {
                  pointBackgroundColor: 'steelblue',
                  pointRadius: 5,
                  // stepped: 'middle',
                  data: nodes,
                },
              ],
            },
            options: {
              // animation: false,
              legend: {
                display: false,
              },
            },
          });
          document.getElementById('mode').onchange = (evt) => {
            chart.getDatasetMeta(0).controller.reLayout({
              mode: evt.currentTarget.value,
            });
          };
          document.getElementById('orientation').onchange = (evt) => {
            chart.getDatasetMeta(0).controller.reLayout({
              orientation: evt.currentTarget.value,
            });
          };
        });
    </script>
  </body>
</html>