Easily Create a Template

If you are building an org chart with OrgChartJS, you can save time by customizing a predefined template instead of creating one from scratch.

In this guide, you will learn how to modify an existing template and create a unique node design in just a few steps.

Edit in BALKAN Code

Step 1: Choose a Predefined Template

OrgChartJS provides several predefined templates, such as ana, polina, and rony.

These templates define each node's appearance, including colors, fonts, and layout.

For this example, we will customize the ana template.

Step 2: Copy and Modify the Template

Create a new template by copying an existing one, then override the parts you want to change:

OrgChart.templates.myCustomTemplate = Object.assign({}, OrgChart.templates.ana);

OrgChart.templates.myCustomTemplate.node =
    `<rect 
        x="0" y="0" 
        width="{w}" height="{h}" 
        fill="#4CAF50" 
        rx="10" ry="10">
    </rect>`;

OrgChart.templates.myCustomTemplate.field_0 =
    `<text 
        data-width="250" 
        font-size="24"
        fill="white"
        x="125" y="55" 
        text-anchor="middle"
    >
        {val}
    </text>`;

OrgChart.templates.myCustomTemplate.field_1 =
    `<text 
        data-width="250" 
        data-text-overflow="multiline" 
        font-size="14" 
        fill="#FFCA28" 
        x="125" y="85" 
        text-anchor="middle"
    >
        {val}
    </text>`;

let chart = new OrgChart(document.getElementById("tree"), {
    template: "myCustomTemplate",
    nodeBinding: { field_0: "name", field_1: "title" },
    nodes: [
        { id: 1, name: "Amber McKenzie", title: "CEO" },
        { id: 2, pid: 1, name: "Ava Field", title: "CTO" },
        { id: 3, pid: 1, name: "Peter Stevens", title: "CIO" }
    ]
});

What Is Happening Here?

1. We copy ana into myCustomTemplate.
2. We customize the node background with color #4CAF50 and rounded corners.
3. We style text fields:

• field_0 (name) is white, 18px, and positioned in the middle.
• field_1 (title) is #FFCA28, 14px, and positioned in the middle with multiline overflow support.

4. We initialize OrgChart with the custom template and a small hierarchy (CEO, CTO, CIO).

Step 3: Test and Customize Further

Run this example in your project, then adjust the style to match your brand or UI.

You can change:

• Colors and fonts
• Text coordinates and sizing
• Node shape and border radius
• Additional SVG elements like icons or images

For more options, see Creating Custom Template.

Conclusion

By customizing a predefined template, you can quickly create a unique org chart design while keeping your implementation simple and maintainable.

Start with a base template, tweak the visuals, and iterate until the chart matches your exact needs.