How to Еasily Create a Simple Custom Org Chart Template in OrgChartJS by Copying an Predefined Template and Change it

If you're building an org chart with OrgChartJS, you can save time by customizing a predefined template instead of starting from scratch. In this guide, I’ll show you how to modify an existing template to create a unique design for your org chart.

Code example

Step 1: Choose a Predefined Template

OrgChartJS provides several predefined templates, such as "ula," "polina," and "rony." These templates define how each node looks, including colors, fonts, and layout.

For this example, we'll customize the "ula" template.

Step 2: Copy and Modify the Template

To create a custom template, we first copy an existing one and then modify its styling. Here’s the correct way to do it:

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

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="145" style="font-size: 18px;" fill="white" x="100" y="55">{val}</text>`;

OrgChart.templates.myCustomTemplate.field_1 =
    `<text data-width="145" data-text-overflow="multiline" style="font-size: 14px;" fill="#FFCA28" x="100" y="76">{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’s Happening Here?

1. Copying the "ula" template – We create a new template called myCustomTemplate based on "ula."
2. Customizing the node appearance – The background color is set to green (#4CAF50), and the corners are rounded.
3. Styling text fields:
   • Field 0 (name) appears in white with a font size of 18px at coordinates (100, 55).
   • Field 1 (title) appears in yellow (#FFCA28) with a font size of 14px at (100, 76), supporting multiline text.
4. Creating the org chart – We use the custom template and define a simple hierarchy with a CEO, CTO, and CIO.

Step 3: Test and Further Customize

Try running this code in your project and tweak the styling to match your needs. You can adjust colors, fonts, positioning, and even add images or icons.

For more customization options, check out the OrgChartJS documentation.

Create a simple template - OrgChart JS

Conclusion

By modifying an existing template, you can quickly create a custom org chart that fits your design. Experiment with different styles and layouts to make your chart unique!

Let me know if you have any questions or need more customization ideas. 🚀