Change Box style depending on a value

Org Chart
1

Hi

I am looking to change the box style depending on value of one of the fields, from research it seems rectangle, rounded rectangle, ellipse, and diamond are available however I am not able to figure out how to get handle on this property and set it. I am using v4. Any thoughts?

2

Hello @Demmick74,

You can use custom CSS to modify a box shape in any way you want. The following JavaScript can be used as a template for your modifications:

api.onBoxRendered((box, itemData) => {
    if (itemData["Department"].contains("Marketing")){
        var $card = $(box.elem).find(".poch-group-item__card");
        $card.css({
          "border-radius": "10px"
        });
    }
});

This script will round the corners for all boxes whose 'Department' field is set to 'Marketing'. To change the box shape to ellipse, you just need to change 'border-radius': '10px' to 'border-radius': '50%'.

You can find many examples of creating different shapes on the Internet.

1 Like