How to add horizontal scroll in Organization chart highcharts?-CodePudding

I'm new in highcharts and I'm trying to do a Organization chart.

I generated the set randomly with some values, but the graphic interface sees horrible when I run chart in my machine. here's the code

Highcharts.chart('container', {
    chart: {
        height: 520,
        width: 1080,
        inverted: false
    },

    title: {
        text: 'Highcharts Org Chart'
    },

    

    series: [{
        type: 'organization',
        name: 'Highsoft',
        keys: ['from', 'to'],
        data: [['Prod mainline', 'Pre-Prod mainline'],
                    ['Pre-Prod mainline', 'Test mainline 1'],
                    ['Pre-Prod mainline', 'Test mainline 2'],
                    ['Pre-Prod mainline', 'Dev mainline 3'],
                    ['Test mainline 1', 'Dev mainline 1'],
                    ['Test mainline 2', 'Dev mainline 2'],
                    ['Dev mainline 1', 'TestSandbox004'],
                    ['Dev mainline 1', 'TestSandbox003'],
                    ['Dev mainline 1', 'TestSandbox002'],
                    ['Dev mainline 1', 'TestSandbox001']],
        levels: [{
            level: 0,
            color: 'silver',
            dataLabels: {
                color: 'black'
            },
            height: 25
        }, {
            level: 1,
            color: 'silver',
            dataLabels: {
                color: 'black'
            },
            height: 25
        }, {
            level: 2,
            color: '#980104'
        }, {
            level: 4,
            color: '#359154'
        }],
        nodes: [
        {id: 'Dev mainline 1', info: '<br><b>Name</b>: Dev mainline 1<br><b>Description<…inline 1 &nbsp; <br><b>Dev Cycle</b>: Development', layout: 'hanging'} 
        
        ],
        colorByPoint: false,
        color: '#007ad0',
        dataLabels: {
            color: 'white'
        },
        borderColor: 'white',
        nodeWidth: 142,
        nodePadding: 100
    }],
    tooltip: {
        outside: true
    },
    exporting: {
        allowHTML: true,
        sourceWidth: 800,
        sourceHeight: 600
    }

});

<html>
    <head>
<style>

.highcharts-null-point{
 fill: yellow;
}
</style>
    </head>
    <body>
    <!doctype html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://code.highcharts.com/css/highcharts.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></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/organization.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

  <body>


<figure class="highcharts-figure">
    <div id="container"></div>

</figure>

  </body>

</html>

here nodes are overlapping with each other because of space issue. how to overcome the issue? also if i add horizontal scroll then the issue got resolve ?

CodePudding user response：

I think there are a few issues here. I am assuming that you wanted a horizontal org chart.

You're missing a definition for Level 3
You're better off not specifying height for any of the levels (you've set it to 25 for levels 0 and 1)
The nodeWidth is too wide for the available space
nodePadding can be turned off

This seemed to display a bit more sensibly:

Highcharts.chart('container', {
    chart: {
        height: 400,
        width: 1080,
        inverted: false
    },

    title: {
        text: 'Highcharts Org Chart'
    },



    series: [{
        type: 'organization',
        name: 'Highsoft',
        keys: ['from', 'to'],
        data: [['Prod mainline', 'Pre-Prod mainline'],
                    ['Pre-Prod mainline', 'Test mainline 1'],
                    ['Pre-Prod mainline', 'Test mainline 2'],
                    ['Pre-Prod mainline', 'Dev mainline 3'],
                    ['Test mainline 1', 'Dev mainline 1'],
                    ['Test mainline 2', 'Dev mainline 2'],
                    ['Dev mainline 1', 'TestSandbox004'],
                    ['Dev mainline 1', 'TestSandbox003'],
                    ['Dev mainline 1', 'TestSandbox002'],
                    ['Dev mainline 1', 'TestSandbox001']],
        levels: [{
            level: 0,
            color: 'silver',
            dataLabels: {
                color: 'black'
            },
        }, {
            level: 1,
            color: 'silver',
            dataLabels: {
                color: 'black'
            },
        }, {
            level: 2,
            color: '#980104'
        }, {
            level: 3,
            color: '#986704'
        }, {
            level: 4,
            color: '#359154'
        }],
        nodes: [
        {id: 'Dev mainline 1', info: '<br><b>Name</b>: Dev mainline 1<br><b>Description<…inline 1 &nbsp; <br><b>Dev Cycle</b>: Development', layout: 'hanging'} 
    
        ],
        colorByPoint: false,
        color: '#007ad0',
        dataLabels: {
            color: 'white'
        },
        borderColor: 'white',
        nodeWidth: 80
    }],
    tooltip: {
        outside: true
    },
    exporting: {
        allowHTML: true,
        sourceWidth: 800,
        sourceHeight: 600
    }

});

Add the following CSS to enable horizontal scrolling:

#container {
    min-width: 300px;
    overflow: scroll !important;
}

CodePudding user response：

I'm able to solve my question. so here's the solution: https://jsfiddle.net/ritzlucky13/a4t6xLbk/6/

here, i'm just calling an event and there i'm doing this operation

events: {

                load() {
                    // alert('hi')
                    let chart = this,
                        numnode = 0,
                        series = chart.series[0],
                        newWidth = series.options.nodeWidth * series.nodeColumns[2].length;
                    for (i in series.nodeColumns) {
                        numnode  = series.nodeColumns[i].length
                    }
                    newWidth = series.options.nodeWidth * numnode
                    chart.update({
                        chart: {
                            width: newWidth
                        }

                    })
                }
            }