<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<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/organization.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

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

#container {
  min-width: 500px;
  margin: 1em auto;
  border: 1px solid silver;
}

button {
  border: 1px solid #1da1f2;
  border-color: #0084B4;
  border-radius: 100px;
  font-size: 20px;
}

#button-bar {
  text-align: center;
}

#container{
  text-transform: none;
  font-size: 14px;
  font-weight: normal;
}

h4 {
  font-size: 9.5px !important;
}

@media (min-width: 576px) {
  h4 {
    font-size: 12px !important;
  }
}

@media (min-width: 768px) {
  h4 {
    font-size: 12.5px !important;
  }
}

@media (min-width: 992px) {
  h4 {
    font-size: 15px !important;
  }
}

@media (min-width: 1200px) {
  h4 {
    font-size: 18px !important;
  }
}

var chart = Highcharts.chart('container', {

  chart: {
    height: 600,
    inverted: false
  },

  title: {
    text: 'Carnivora Phylogeny'
  },

  plotOptions: {
    series: {
      nodeWidth: '22%'
    }
  },

  series: [{
    type: 'organization',
    name: 'Highsoft',
    keys: ['from', 'to'],
    data: [
      ['Carnivora', 'Felidae'],
      ['Carnivora', 'Mustelidae'],
      ['Carnivora', 'Canidae'],
      ['Felidae', 'Panthera'],
      ['Mustelidae', 'Taxidea'],
      ['Mustelidae', 'Lutra'],
      ['Panthera', 'Panthera pardus'],
      ['Taxidea', 'Taxidea taxus'],
      ['Lutra', 'Lutra lutra'],
      ['Canidae', 'Canis'],
      ['Canis', 'Canis latrans'],
      ['Canis', 'Canis lupus']
    ],
    levels: [{
      level: 0,
      color: '#DEDDCF',
      borderLine: 10,
      dataLabels: {
        color: 'black'
      }
    }, {
      level: 1,
      color: '#DEDDCF',
      dataLabels: {
        color: 'black'
      },
      height: 25
    }, {
      level: 2,
      color: '#DEDDCF',
      dataLabels: {
        color: 'black'
      },
    }, {
      level: 3,
      dataLabels: {
        color: 'black'
      },
    }],
    nodes: [{
      id: 'Carnivora',
      title: null,
      name: 'Carnivora',
      info: "Carnivora is a diverse scrotiferan order that includes over 280 species of placental mammals."
    }, {
      id: 'Felidae',
      title: null,
      name: 'Felidae',
      color: "#fcc657",
      info: "Felidae is a family of mammals in the order Carnivora, <br>colloquially referred to as cats, and constitute a clade."
    }, {
      id: 'Panthera',
      title: null,
      name: 'Panthera',
      color: "#fcc657",
      info: "Panthera"
    }, {
      id: 'Panthera pardus',
      title: null,
      name: 'Panthera pardus',
      color: "#fcc657",
      image: "https://raw.githubusercontent.com/mekhatria/demo_highcharts/master/panthera.png",
      info: "Panthera is a genus within the Felidae family <br>that was named and described by Lorenz Oken in 1816 <br>who placed all the spotted cats in this group."
    }, {
      id: 'Mustelidae',
      title: null,
      name: 'Mustelidae',
      color: "#C4B1A0",
      info: "The Mustelidae are a family of carnivorous mammals,<br> including weasels, badgers, otters, ferrets, martens, mink, and wolverines, among others."
    }, {
      id: 'Taxidea',
      title: null,
      name: 'Taxidea',
      color: "#C4B1A0",
      info: "Taxidea"
    }, {
      id: 'Lutra',
      color: "#C4B1A0",
      info: "Lutra"
    }, {
      id: 'Taxidea taxus',
      name: 'Taxidea taxus',
      color: "#C4B1A0",
      image: "https://raw.githubusercontent.com/mekhatria/demo_highcharts/master/taxideaTaxus.png",
      info: "Taxidea taxus is a North American badger, <br>somewhat similar in appearance to the European badger, <br>although not closely related. <br>It is found in the western and central United States, <br>northern Mexico, and south-central Canada to certain areas of southwestern British Columbia."
    }, {
      id: 'Lutra lutra',
      name: 'Lutra lutra',
      color: "#C4B1A0",
      image: "https://raw.githubusercontent.com/mekhatria/demo_highcharts/master/lutra.png",
      info: "Lutra is a semiaquatic mammal native to Eurasia. <br>The most widely distributed member of the otter subfamily (Lutrinae) of the weasel family (Mustelidae), <br>it is found in the waterways and coasts of Europe, many parts of Asia, <br>and parts of northern Africa."
    }, {
      id: 'Canidae',
      name: 'Canidae',
      color: "#B0ACA2",
      info: "The biological family Canidae is a lineage of carnivorans <br>that includes domestic dogs, wolves, coyotes, foxes, jackals, dingoes, <br>and many other extant and extinct dog-like mammals. "
    }, {
      id: 'Canis',
      name: 'Canis',
      color: "#B0ACA2",
      info: "Canis"
    }, {
      id: 'Canis latrans',
      name: 'Canis latrans',
      color: "#B0ACA2",
      image: "https://raw.githubusercontent.com/mekhatria/demo_highcharts/master/canisLatrans.png",
      info: "Canis latrans, is a canine native to North America.<br> It is smaller than its close relative, the gray wolf, and <br>slightly smaller than the closely related eastern wolf and red wolf."
    }, {
      id: 'Canis lupus',
      name: 'Canis lupus',
      color: "#B0ACA2",
      image: "https://raw.githubusercontent.com/mekhatria/demo_highcharts/master/canisLupus.png",
      info: "Canis lupus is a canine native to the wilderness and remote areas of Eurasia and North America. <br>It is the largest extant member of its family, with males averaging 43–45 kg (95–99 lb) <br>and females 36–38.5 kg (79–85 lb)."
    }],
    colorByPoint: false,
    borderColor: 'white'
  }],

  tooltip: {
    outside: true,
    formatter: function() {
      return this.point.info;
    }
  },

  exporting: {
    allowHTML: true,
    sourceWidth: 800,
    sourceHeight: 600
  }
});