This JavaScript code snippet helps you to create an organizational chart. It is used to create an organizational chart using the Highcharts library. The chart is initialized with a chart object, which sets the height of the chart and specifies that the chart should be inverted. The title object is also specified, which sets the title of the chart and allows HTML to be used within the title. The accessibility object is specified to provide a description of the organizational chart for users with disabilities. The chart data is specified using an array of nodes and links between them. Each node represents a person or department, and each link represents a relationship between them. The chart is displayed using the Highcharts chart function, which takes the ID of the container element as its first argument.
How to Create Organizational Chart JavaScript Free
Create the HTML structure for the chart as follows:
<script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/sankey.js"></script> <script src="https://code.highcharts.com/modules/organization.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="https://code.highcharts.com/modules/accessibility.js"></script> <div id="container"></div>
Now, style the chart using the following CSS styles:
@import 'https://code.highcharts.com/css/highcharts.css';
#container {
min-width: 300px;
margin: 1em auto;
}
#container h4 {
text-transform: none;
font-size: 14px;
font-weight: normal;
}
.cd__main{
display: block !important;
}
#container p {
font-size: 13px;
line-height: 16px;
}
h4 {
font-size: 9.5px !important;
}
@media (min-width: 576px) {
h4 {
font-size: 12px !important;
}
}
@media (min-width: 768px) {
h4 {
font-size: 12.5px !important;
}
}
@media (min-width: 992px) {
h4 {
font-size: 15px !important;
}
}
@media (min-width: 1200px) {
h4 {
font-size: 18px !important;
}
}
Finally, add the following JavaScript function for its functionality:
Highcharts.chart("container", {
chart: {
height: 600,
inverted: true
},
title: {
useHTML: true,
text: "Statistics Division of United Nations"
},
accessibility: {
typeDescription:
"The organizational chart displays hierarchically the different departments of the United Nations statistics division."
},
series: [
{
type: "organization",
name: "United Nations",
keys: ["from", "to"],
data: [
["Director", "SPDS"],
["Director", "ESU"],
["Director", "CDS"],
["Director", "OTMS"],
["Director", "ESB"],
["Director", "DSSB"],
["Director", "EESB"],
["Director", "TSB"],
["Director", "SSB"],
["ESB", "NAS"],
["ESB", "EEAS"],
["DSSB", "DSS"],
["DSSB", "SHSS"],
["EESB", "ESS"],
["EESB", "IESS"],
["TSB", "IMTSS"],
["TSB", "SITSS"],
["SSB", "GDSU"],
["SSB", "SDS"],
["SSB", "SGCU"]
],
levels: [
{
level: 0,
color: "silver",
dataLabels: {
color: "black"
},
height: 25
},
{
level: 1,
color: "silver",
dataLabels: {
color: "black"
},
height: 25
},
{
level: 2,
dataLabels: {
color: "black"
},
height: 25
},
{
level: 4,
dataLabels: {
color: "black"
},
height: 25
}
],
nodes: [
{
id: "Director",
title: null,
name: "Director",
color: "#419dc0",
info: "Director"
},
{
className: "title",
id: "ESU",
title: null,
name: "Executive Support",
layout: "hanging",
color: "#41c0a4",
info:
"Planning and coordination of the overall Division’s work program and operation, <br/>including program management finance/budget management, <br/>human resources management, and general office administration"
},
{
id: "SPDS",
title: null,
name: "Stats Planning & Development",
image: null,
layout: "hanging",
color: "#41c0a4",
info:
"Methodological work on MDG indicators, databases; <br/>coordination of inter-agency groups for MDG global indicators, <br/>responsible for MDG global monitoring. <br/>Coordination of global gender statistics program"
},
{
id: "CDS",
title: null,
name: "Capacity Development",
layout: "hanging",
color: "#41c0a4",
info:
"Management and implementation of the Technical <br/>Co-operation and Statistical Capacity Building Program"
},
{
id: "OTMS",
title: null,
name: "Office & Tech Management",
layout: "hanging",
color: "#41c0a4",
info:
"Application of information technologies for the collection, <br>processing and dissemination of international statistics<br> and metadata by all branches of the Statistics Division"
},
{
id: "ESB",
title: null,
name: "Economics Stats",
column: 2,
layout: "hanging",
color: "#abd734",
info: "Economics Statistics Branch"
},
{
id: "NAS",
title: null,
name: "National Accounts",
layout: "hanging",
color: "#beef3a",
info: "National Accounts Section"
},
{
id: "EEAS",
title: null,
name: "Environmental Economic",
layout: "hanging",
color: "#beef3a",
info: "Environmental Economic Accounts Section"
},
{
id: "DSSB",
name: "Demographic & Social Stats",
column: 2,
layout: "hanging",
color: "#34abd7",
info: "Demographic and Social Statistics Branch"
},
{
id: "DSS",
name: "Demographic Stats",
layout: "hanging",
color: "#3abeef",
info: "Demographic Statistics Section"
},
{
id: "SHSS",
name: "Social & Housing Stats",
layout: "hanging",
color: "#3abeef",
info: "Social and Housing Statistics Section"
},
{
id: "EESB",
name: "Environment & Energy Stats",
column: 2,
layout: "hanging",
color: "#d734ab",
info: "Environment and Energy Statistics Branch"
},
{
id: "ESS",
name: "Environment Stats",
layout: "hanging",
color: "#ef3abe",
info: "Environment Statistics Section"
},
{
id: "IESS",
name: "Industrial & Energy Stats",
layout: "hanging",
color: "#ef3abe",
info: "Industrial and Energy Statistics Section"
},
{
id: "TSB",
name: "Trade Stats",
column: 2,
layout: "hanging",
color: "#d76034",
info: "Trade Statistics Branch"
},
{
id: "IMTSS",
name: "Merchandise Trade Stats",
layout: "hanging",
color: "#ef6b3a",
info: "International Merchandise Trade Statistics Section"
},
{
id: "SITSS",
name: "Stats of Trade",
layout: "hanging",
color: "#ef6b3a",
info: "Statistics of International Trade in Services Section"
},
{
id: "SSB",
name: "Stats Services",
column: 2,
layout: "hanging",
color: "#d7b234",
info: "Statistical Services Branch"
},
{
id: "GDSU",
name: "Global Data Services",
layout: "hanging",
color: "#efc63a",
info: "Global Data Services Unit"
},
{
id: "SDS",
name: "Stats Dissemination",
layout: "hanging",
color: "#efc63a",
info: "Statistical Dissemination Section"
},
{
id: "SGCU",
name: "Geographic Conferences",
layout: "hanging",
color: "#efc63a",
info: "Statistical and Geographic Conferences Unit"
}
],
colorByPoint: false,
color: "#007ad0",
dataLabels: {
color: "white"
},
borderColor: "white",
nodeWidth: 45,
nodePadding: 2
}
],
tooltip: {
outside: true,
formatter: function () {
return this.point.info;
}
},
exporting: {
allowHTML: true,
sourceWidth: 800,
sourceHeight: 600
}
});
That’s all! hopefully, you have successfully created the JavaScript Organizational Chart. If you have any questions or suggestions, feel free to comment below.
