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/draggable-points.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: 180,
        marginRight: 140,
        events: {
            load() {
                Highcharts.each(this.series[0].nodeColumns[0], function(el) {
                console.log(el);
                    el.dataLabel.attr({
                        align: 'right'
                    });
                });
            }
        }
    },
    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],
        ],
        type: 'sankey',
    }],
    plotOptions: {
        sankey: {
            dataLabels: {
                color: 'red',
                enabled: true,
                align: 'left',
                crop: false,
                overflow: "none",
            }
        }
    },
})