Dependency wheel Highlighting

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 Top 3 highlighted'
  },

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

       {
        from: 'France',
        to: 'United Kingdom',
        weight: 6,
        linkOpacity:0.7
    },
     {
        from: 'Netherlands',
        to: 'Germany',
        weight: 4,
        linkOpacity:0.7
    },
     {
        from: 'Italy',
        to: 'Spain',
        weight: 2,
    }
    ],

    type: 'dependencywheel',

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

});