0

I am using organization Highcharts in which the parents on Level 2 are linking to same childs. As you can see in the picture Nurrettin & Mohammad Sabir nodes linked to all same child nodes. However Nurretin is a parent of Cemil Ceylan & Mustafa while M.Sabir is a parent of remaining 7 child nodes. But issue is why Nurretin node is linked to all?

Can somebody answer it ?

Organization Highcharts

enter image description here

The Code is Here

renderSubordinates=(data)=>{
    console.log('data',data)
   var array2D =[];
   var arraySeries2D =[];
   var arr = [];
   var levelObj;
   var arrSeries = [];

   const rec = (val) => {
    let name = val.from;
    for(let j=0;j<val.to.length;j++){
        let nameChild = val.to[j].from;
        array2D.push([name,nameChild])
    }
    return [...array2D]
    }
    const createHC = (data) => {
    arr.push(rec(data));
    if(data.to.length){
    data.to.map(x=>{
     arr.push(rec(x));
    createHC(x);
    })
    }
    }
    var data1 = data[0];
    createHC(data1);
    console.log('arr',arr.pop())
    var dataArr = arr.pop()
    var levelInd = arr;
    var levelArr =levelInd.map((x,index)=>{
    // console.log('index',index);
    levelObj={
        level: index,
        color: {
            linearGradient: { x1: 0, x2: 1, y1: 0, y2: 1 },
            stops: [
                [0, "#0376b0"],
                [1, "#b4e5fe"],
            ],
        },
        
        dataLabels: {
          color: 'white',
          style:{
              fontSize:'10px'
          }
    }}
    return levelObj
})
   const seriesRec = (val) => {
    let obj = {id:val.name,title:val.title,name:val.name,image:val.image,
        dataLabels: {
          enabled: true,
          style: {
            fontSize: '10px'
          }
        }};
    arraySeries2D.push(obj)
    
    return [...arraySeries2D]
    }
    const seriesHC = (data) => {
    arrSeries.push(seriesRec(data));
    if(data.to.length){
    data.to.map(x=>{
    arrSeries.push(seriesRec(x));
    seriesHC(x);
    })
    }
    }
    
    var data1 = data[0];
    seriesHC(data1);
    var dataSeriesArr = arrSeries.pop()

    let obj: Highcharts.Options = {
      chart: {
        height: 1200,
        inverted: true
      },
    
      title: {
        text: ''

      },
    
      series: [{
        type: 'organization',
        name: '',
        keys: ['from', 'to'],
        
        data: dataArr,
        
        levels: levelArr,
        nodes:dataSeriesArr,
        colorByPoint: false,
        color: '#007ad0',
        
        dataLabels: {
          color: 'white'
        },
        borderColor: '',
        borderRadius:20,
        nodeWidth: 120,
        className:'node-class'
      }],
      tooltip: {
        outside: true
      },
      plotOptions: {
        organization: {
          linkColor: 'gray',
          linkLineWidth:2,
        }
      },
      exporting: {
        allowHTML: true,
        sourceWidth: 800,
        sourceHeight: 600
      }
    };
  return obj
}
  • @ppotaczek would you like to answer? – Ezzah Waseem Jun 09 '21 at 11:54
  • Hi @Ezzah Waseem, Could you reproduce the issue in some online code editor? You can start from: https://jsfiddle.net/BlackLabel/f51htc29/ – ppotaczek Jun 10 '21 at 10:50
  • Hi @ppotaczek I have reproduced the bug ,the nodes of level 2 are connecting to all child nodes, however both parents John & Grethe have different childs – Ezzah Waseem Jun 14 '21 at 11:49
  • link is here https://jsfiddle.net/cth5k7wo/1/ – Ezzah Waseem Jun 14 '21 at 12:39
  • Thanks for the example. The problem is related with order and space distribution. Please compare these two examples: 1: https://jsfiddle.net/BlackLabel/2yvncbsx/ 2: https://jsfiddle.net/BlackLabel/70bd1m8w/ If you think that is a bug, you can report it here: https://github.com/highcharts/highcharts/issues – ppotaczek Jun 15 '21 at 11:09
  • 1
    Thanks @ppotaczek I have cross checked it I found out when there are more childs then nodes overlapped which is a spacing bug . – Ezzah Waseem Jun 15 '21 at 13:01

0 Answers0