Arc Diagram

author(s): Piotr Madej Grzegorz Blachliński

by oysteinmoseng

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/arc-diagram.js"></script>
<script src="https://code.highcharts.com/themes/high-contrast-dark.js"></script>

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

CSS

body {
    background-color: #2e2b36;
}
#row {
    margin-top: 65px;
    display: flex;
    width: 1400px;
}
#container {
    height: 620px;
    width: 900px;
    margin: 0 auto;
}

#colChart {
    flex: 1;
    margin-left: 20px;
}

JavaScript

setTimeout(() => {
var arc = Highcharts.chart('container', {

  chart: {
    backgroundColor: 'transparent'
  },

  title: {
    text: 'Main train connections in Europe'
  },

  credits: {
    enabled: false
  },

  tooltip: {
    enabled: false
  },
  series: [{
    keys: ['from', 'to', 'weight'],
    type: 'arcdiagram',
    name: 'Train connections',
    linkWeight: 1,
    centeredLinks: true,
    dataLabels: {
      rotation: 90,
      y: 55,
      align: 'left',
      color: 'white',
      shadow: false
    },
    offset: '70%',
    data: [
      ['Hamburg', 'Stuttgart', 1],
      ['Hamburg', 'Frankfurt', 1],
      ['Hamburg', 'München', 1],
      ['Hannover', 'Wien', 1],
      ['Hannover', 'München', 1],
      ['Berlin', 'Wien', 1],
      ['Berlin', 'München', 1],
      ['Berlin', 'Stuttgart', 1],
      ['Berlin', 'Frankfurt', 1],
      ['Berlin', 'Köln', 1],
      ['Berlin', 'Düsseldorf', 1],
      ['München', 'Düsseldorf', 1],
      ['München', 'Wien', 1],
      ['München', 'Frankfurt', 1],
      ['München', 'Köln', 1],
      ['München', 'Amsterdam', 1],
      ['Stuttgart', 'Wien', 1],
      ['Frankfurt', 'Wien', 1],
      ['Frankfurt', 'Amsterdam', 1],
      ['Frankfurt', 'Paris', 1],
      ['Frankfurt', 'Budapest', 1],
      ['Düsseldorf', 'Wien', 1],
      ['Düsseldorf', 'Hamburg', 1],
      ['Amsterdam', 'Paris', 1],
      ['Paris', 'Brest', 1],
      ['Paris', 'Nantes', 1],
      ['Paris', 'Bayonne', 1],
      ['Paris', 'Bordeaux', 1],
      ['Paris', 'Toulouse', 1],
      ['Paris', 'Montpellier', 1],
      ['Paris', 'Marseille', 1],
      ['Paris', 'Nice', 1],
      ['Paris', 'Milano', 1],
      ['Nantes', 'Nice', 1],
      ['Bordeaux', 'Lyon', 1],
      ['Nantes', 'Lyon', 1],
      ['Milano', 'München', 1],
      ['Milano', 'Roma', 1],
      ['Milano', 'Bari', 1],
      ['Milano', 'Napoli', 1],
      ['Milano', 'Brindisi', 1],
      ['Milano', 'Lamezia Terme', 1],
      ['Torino', 'Roma', 1],
      ['Venezia', 'Napoli', 1],
      ['Roma', 'Bari',...