HighCharts sankey diagram issue [on hold]

We were planning to use sankey by HighCharts for live data.

Everything is working just fine but if you have very big contrast in the data you can get something like below.

This is a big problem in my opinion, my code is below (the data will be supplied by ajax requests.

Any help will be much appriciated, I am waiting my account in HighCharts to be confirmed so I can ask them as well.

enter image description here

<!DOCTYPE html>

<head>
    <title>TEST</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></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/exporting.js"></script>

<script type="text/javascript">
        $(function() {

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

                chart: {
                    backgroundColor: '#2a2a28',
                },

                exporting: {
                    enabled: false
                },

                title: {
                    useHTML: true,
                    text: '<img width="100px" src=""/>',
                    x: -420 //left
                },

                subtitle: {
                    text: "VOTING",
                    style: {
                        fontSize: "16px",
                        color: "#FFFFFF",
                        fontVariant: "small-caps"
                    },
                    x: -50 //left
                },

                series: [{
                    nodeWidth: 160,
                    linkOpacity: "0.8",
                    dataLabels: {
                        enabled: true,
                        color: "#2a2a28",
                        style: {
                            fontSize: "16px",
                            textOutline: false,
                            width: "150px",
                        }
                    },

                    keys: ['from', 'to', 'weight'],

                    data: [["CEO", "Connecting with culture", 1], ["CEO", "Embracing Future Thinking", 2], ["CEO", "Diving into digital channels", 7], ["CEO", "Optimising your organisation", 6], ["CMO", "Connecting with culture", 0], ["CMO", "Embracing Future Thinking", 8], ["CMO", "Diving into digital channels", 9], ["CMO", "Optimising your organisation", 4], ["Director", "Connecting with culture", 0], ["Director", "Embracing Future Thinking", 7], ["Director", "Diving into digital channels", 4], ["Director", "Optimising your organisation", 7], ["Manager", "Connecting with culture", 0], ["Manager", "Embracing Future Thinking", 2], ["Manager", "Diving into digital channels", 8], ["Manager", "Optimising your organisation", 4], ["Assistant or Executive", "Connecting with culture", 0], ["Assistant or Executive", "Embracing Future Thinking", 3], ["Assistant or Executive", "Diving into digital channels", 9], ["Assistant or Executive", "Optimising your organisation", 2]],

                    nodes: [{
                        id: 'Assistant or Executive',
                        color: '#EB6728',
                    }, {
                        id: 'Manager',
                        color: '#C8D400'
                    }, {
                        id: 'Director',
                        color: '#00B6ED'
                    }, {
                        id: 'CMO',
                        color: '#A84C97'
                    }, {
                        id: 'CEO',
                        color: '#EF3340'
                    }, {
                        id: 'Connecting with culture',
                        color: '#C0CACA'
                    }, {
                        id: 'Embracing Future Thinking',
                        color: '#C0CACA'
                    }, {
                        id: 'Diving into digital channels',
                        color: '#C0CACA'
                    }, {
                        id: 'Optimising your organisation',
                        color: '#C0CACA',
                    }],

                    type: 'sankey',
                    name: 'test'
                }]
            });
        });
    </script>

    <style>
        #container {
            min-width: 300px;
            max-width: 950px;
            height: 534px;
            margin: 3em auto;
        }
    </style>

</head>

<body>
    <p style="color: red; font-weight: bold;">The data flow is paused for now.</p>
    <div id="container">
    </div>

</body>

</html>

Tags: