Search code examples
highchartsorganization

Highcharts organization change size image and position


I'm trying to make an org chart with Highcharts here I'm having trouble changing the size of the image in the boxes and squares here my code : https://jsfiddle.net/heriira_/acsfpurh/6/ and this is the design i want to make : this image

series: [
        {
            type: "organization",
            name: "",
            keys: ["from", "to"],
            data: [
                ["A", "B"],
                ["A", "C"],
                ["A", "D"],
                ["A", "E"],
                ["A", "F"],
                ["A", "G"],
            ],
            nodes: [
                {
                    id: "A",
                    title: "CEO",
                    name: "john doe",
                    image:
                        "https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2020/03/17131126/Highsoft_03862_.jpg",
                },
                {
                    id: "B",
                },
                {
                    id: "C",
                },
                {
                    id: "D",
                    column: 2,
                    color: "333333",
                },
                {
                    id: "E",
                    column: 2,
                },
                {
                    id: "F",
                    column: 2,
                },
                {
                    id: "G",
                    column: 2,
                },
            ],
            colorByPoint: true,
            color: "#007ad0",
            useHTML: true,
            style: {
                padding: 1000
            },
            dataLabels: {
                color: "white",
            },
            borderColor: "white",
            nodeWidth: 65,
        },
    ],

Solution

  • I found a solution but it's a tricky one:

    1. change the dataLabel flex-direction to 'column' - it might be done by CSS or inside the nodeFormatter callback,

    2. set the node height - here I found a bug - the first node cuts if his height is set to some fixed value,

    3. As a solution to above bug I recommend to add the dummy point and hide it,

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