Treegraph chart

author(s): Pawel Lysy

HTML

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

<script src="https://code.highcharts.com/modules/sankey.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

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

JavaScript

realData = [
{"from":"NY", "to":"Oslo", "company": "Norwegian", "flights":3},
{"from":"NY", "to":"Paris", "company": "Norwegian", "flights":2},
{"from":"Miami", "to":"Berlin", "company": "Norwegian", "flights":1},
{"from":"Miami", "to":"London", "company": "SAS", "flights":1}
]

Highcharts.chart(
  "container",
  {
    chart: {
      type: "sankey",
     },
    plotOptions: {
      sankey: {
        nodeWidth: 200,
      }
    },
    series: [
      {
        type: "sankey",
        clip: false,
        name: "Sel. vessel - Voyage destinations",
        data: [
          { from: "NY", to: "Norwegian", weight: 5 },
          { from: "Norwegian", to: "Oslo ", weight: 3 },
          { from: "Norwegian", to: "Paris ", weight: 2 },
          { from: "Miami", to: "Norwegian", weight: 1 },
          { from: "Miami", to: "SAS", weight: 1 },
          { from: "Norwegian", to: "Berlin ", weight: 1 },
          { from: "SAS", to: "London ", weight: 1 },
        ],
        dashStyle: "Solid",
        nodes: [
          { id: "NY", column: 0 },
          { id: "Miami", column: 0 },
          { id: "Norwegian", column: 1 },
          { id: "SAS", column: 1 },
          { id: "Berlin ", column: 2 },
          { id: "London ", column: 2 },
        ]
      },
    ]
  },
)