Dependency wheel nodes

by kzoon

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/dependency-wheel.js"></script>

<figure class="highcharts-figure">
  <div id="container"></div>
</figure>

CSS

#container {
  height: 500px;
}

JavaScript

Highcharts.chart('container', {

  title: {
    text: 'Dependency Wheel Test'
  },

  series: [{
    
    nodes: [{
      id: 'Sp',
      name: 'Spain',
      color: "rgba(68,114,196,1)"
    }, {
      id: 'France',
      name: 'France',
      color: "rgba(237,125,49,1)"
    }, {
      id: 'Germany',
      name: 'Germany',
      color: "rgba(165,165,165,1)"
    }, {
      id: 'United Kingdom',
      name: 'United Kingdom',
      color: "rgba(255,192,0,1)"
    }, {
      id: 'Italy',
      name: 'Italy',
      color: "rgba(91,155,213,1)",
      dataLabels: {
        color: "rgba(237,125,49,1)"
      }
    }, {
      id: 'NL',
      name: 'Netherlands',
      color: "rgba(112, 173, 71,1)"
    }],
    
    keys: ['from', 'to', 'weight'],
    data: [
      ['Sp', 'France', 0],
      ['Sp', 'Germany', 0],
      ['Sp', 'United Kingdom', 0],
      ['Sp', 'Italy', 0],
      ['Sp', 'Italy', 0],

      ['Sp', 'France', 5],
      ['Sp', 'United Kingdom', 1],
      ['Germany', 'Sp', 1],
      ['United Kingdom', 'Germany', 3],
      ['Italy', 'United Kingdom', 2],
      ['France', 'Germany', 2],
      ['France', 'United Kingdom', 5],
      ['France', 'Italy', 3],
      ['Italy', 'Sp', 2],
      ['NL', 'France', 2],
      ['NL', 'Germany', 7]
      

    ],

    type: 'dependencywheel',

    dataLabels: {
      color: 'black',
      textPath: {
        enabled: true,
        attributes: {
          dy: 5
        }
      },
      distance: 10
    },
    size: '95%'
  }]

});