JSFiddle - React, Tailwind, and code Playground

by anikettiwari

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

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

CSS

#container {
    min-width: 300px;
    max-width: 800px;
    height: 400px;
    margin: 1em auto;
    border: 1px solid silver;
}

#csv {
    display: none;
}

JavaScript

Highcharts.chart('container', {

    title: {
        text: ''
    },
    xAxis: {
        type: 'pre-instituion, and trail phase'
    },

    series: [{
        keys: ['from', 'to', 'weight', 'tooltip'],
        data:  [
                ['Apple', 'sports', 34],
                ['sports', 'cricket', 15],
                ['sports', 'footbal', 10],
                ['sports', 'basketball', 1],
                ['sports', 'Others', 1],
                ['cricket', 'sachin', 15],
                ['cricket', 'Others', 15],

                ['Google', 'sports', 24],
                ['sports', 'cricket', 15],
                ['sports', 'footbal', 20],
                ['sports', 'basketball', 1],
                ['sports', 'Others', 1],
                ['Alphabet', 'sports', 24],
                ['sports', 'cricket', 15],
                ['sports', 'footbal', 20],
                ['sports', 'basketball', 1],
                ['sports', 'Others', 1]
              ],
        type: 'sankey'


    }]

});