JSFiddle - React, Tailwind, and code Playground

by maritavindedal

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

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

JavaScript

Highcharts.chart('container', {

    title: {
        text: 'Carnivora Phylogeny'
    },

    series: [{
        type: 'organization',
        keys: ['from', 'to'],
        data: [
            ['Carnivora', 'Felidae'],
            ['Carnivora', 'Mustelidae'],
            ['Carnivora', 'Canidae']
        ],
        levels: [{
            level: 0
        }],
        nodes: [{
            id: 'Carnivora',
            name: 'Carnivora',
            custom: {
                info: 'Carnivora is a diverse scrotiferan order that includes over 280 species of placental mammals.'
            }
        }, {
            id: 'Felidae',
            name: 'Felidae',
            custom: {
                info: 'Felidae is a family of mammals in the order Carnivora, <br>colloquially referred to as cats, and constitute a clade.'
            }
        }, {
            id: 'Mustelidae',
            name: 'Mustelidae',
            color: '#C4B1A0',
            custom: {
                info: 'The Mustelidae are a family of carnivorous mammals,<br> including weasels, badgers, otters, ferrets, martens, mink, and wolverines, among others.'
            }
        }, {
            id: 'Canidae',
            name: 'Canidae',
            custom: {
                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. '
            }
        }]
    }],

    tooltip: {
        outside: true,
        format: '{point.custom.info}'
    }
});