Search code examples
javascriptchartshighchartsorgchart

Highcharts Org chart children links are overlapping


I have created organization chart using highcharts. but 3 level the links are getting merged or overlapped on other child link. My data is coming from erp system with contact and his supervisor details in it. sample snipped added about data [supervisor, employee]. tried layout type hanging in levels still no luck.

The fiddle link is here ..

series: [{
        type: 'organization',
        name: 'Test Org',
        keys: ['from', 'to'],
        data: [
             ['- None -', 'L1 L1'],
             ['L1 L1', 'L2 L1 L2 L1'],
             ['L1 L1', 'L2 L2'],
             ['L1 L1', 'L2 L2 L001 L2 L2 L001'],
             ['L2 L1 L2 L1', 'L3 L2 L1 L0 L3 L2 L1 L0'],
             ['L2 L1 L2 L1', 'L3 L2 L3 L2'],
             ['L2 L2', 'L3 L2 L1 L0 L001 L3 L2 L1 L0 L001'],
             ['L2 L2', 'L3 L2 L1 L3 L2 L1'],
             ['L2 L2', 'L3 L2 L2 L3 L2 L2'],
             ['L2 L2 L001 L2 L2 L001', 'Test User L3 Test User L3'],
         ],
         levels: [{
             level: 0,
             color: 'silver',
             dataLabels: {
                 color: 'black'
             },
             height: 25
         }, {

Please help me out.


Solution

  • You can decrease the node height to improve visibility. Currently, this option doesn't exist in the API, more: https://github.com/highcharts/highcharts/issues/10673

    Demo: https://jsfiddle.net/BlackLabel/vws1jcfk/

      {
        id: 'L3 L2 L3 L2',
        title: '11992',
        name: 'L3 L2 L3 L2',
        height: 100,
        image: ...
      }