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,
},
],
I found a solution but it's a tricky one:
change the dataLabel flex-direction to 'column' - it might be done by CSS or inside the nodeFormatter
callback,
set the node height - here I found a bug - the first node cuts if his height is set to some fixed value,
As a solution to above bug I recommend to add the dummy point and hide it,