0

I started exploring highcharts. Created report with organization hierarchy with drilldown. Unable to format the links in drilldown report, they look like triangles instead of straight lines like in the main org chart and getting messy when the hierarchy in the drilldown gets multiple nodes.

In below example, click on Div.2, see the drilldown links. What chart options do we have to control these triagle svg shapes other than linkLineWidth etc..

Links with Triangle Shape

jsfiddle Test Case

Highcharts.chart('container', { chart: { height: 600, width: 600, inverted: true, type: 'organization' },

title: {
    text: 'Highcharts Org Chart'
},
series: [{
    name: 'Highsoft',
     data: [{
            from: "CO",
            to: "DIV01",
        },
        {
            from: 'CO',
            to: 'DIV02'
        } 
    ],
    nodes: [{
            id: 'DIV01',
            title: 'Div Hd 1',
            name: 'Div. 1',
            drilldown: "DIV01"
        },
        {
            id: 'DIV02',
            title: 'Div Hd 2',
            name: 'Div. 2',
            drilldown: 'DIV02'
        } 
    ]
}],
drilldown: { 
    activeDataLabelStyle: {
        color: 'contrast'
    },
     layout: 'hanging',
    series: [{
            id: "DIV01",
            name: "DIV01",
            keys: ['from', 'to'],
            data: [
                ['DIV01', 'DEP01']
            ],
            nodes: [{
                id: 'DEP01',
                title: 'Dept Hd 1',
                name: 'Dept. 1' 
            }]
        },
        {
            id: "DIV02",
            name: "DIV02",
            keys: ['from', 'to'], 
            data: [
                 ['DIV02', 'DEP02'],
                 ['DEP02', 'DEP03'],
                 ['DEP02', 'DEP04'], 
                 ['DEP04', 'DEP05'],
                 ['DEP04', 'DEP06'] ,
                 ['DEP04', 'DEP08'] ,
                 ['DEP06', 'DEP07'] 
            ],
            nodes: [{
                id: 'DEP02'   
            }]
        } 
    ]
} 

});

1 Answer 1

0

It's a bug, more information you will find in Github issue, workaround you can change patch color via CSS fill: none.

.highcharts-series path {
    fill: none;
}

demo: https://jsfiddle.net/BlackLabel/ay1czgxp/

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.