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', {

    chart: {
        showAxes: true,
        marginLeft: 150,
    },
    title: {
        text: ''
    },
    xAxis: {
        visible: false,
    },
    yAxis: {
        visible: false
    },
    series: [{
        keys: ['from', 'to', 'weight'],
        data: [
            ['Cricket is the game', 'Sport Fest', 463 ],
            ['Football is the game', 'Sport Fest', 338 ],
            ['Basketball is the game', 'Sport Fest', 317],
            ['Baseball is the game', 'Sport Fest', 130 ],
        ],
        cursor: 'move',
        dragDrop: {
                draggableX: true,
                draggableY: true,
                dragMinY: 0,
                dragMaxY: 2,
                 
            },
        type: 'sankey',
    }],
     plotOptions: {
      sankey: {
        dataLabels: {
          enabled: true,
          useHTML: true,
          align: 'right',
          crop: false,
          overflow: "none",
        }
      }
    },
});