organisation chart web part for SharePoint

Create and Share beautiful org charts with SharePoint

Quick to install. Easy to configure. Simple to use.


Configuring Background Colours, Sizes and Graphics:

The SharePoint Org Chart has a number of built in background styles and colours that can be set for each box on an organisation chart.

Often these built in styles are sufficient but if required they can be changed. This guide explains how to change those colours and also how to define custom background colours.

This guide also explains the difference usage scenarios between the Graphical and CSS background options that are available.

Using the Built-In Colours And Sizes

1. Changing the background colour
In the Org Chart web part, navigate to Chart Items within this configuration section the Background colour is used to select the desired color.


2. Changing the Size of the Org Chart Box
The size of the chart box can be set by adjusting the Size (circled in red) property in either the Chart Items or Assistant Items configuration section. The built-in sizes are Small,Medium,Narrow and Large and are shown below.
Size Image
Small Small box size
Medium Medium box size
Narrow Narrow box size
Large Large box size

3. Defining a Custom Background Size
To set a custom background size enter the size in pixels into the Custom Box Height and Custom Box Width properties.
The image below shows a chart with the Custom Box Height set to 50 and Custom Box Width set to 200

4. Changing to CSS Background Mode.
The Org Chart supports two different modes for drawing the background, Graphical and CSS. Choose the mode you wish to use by selecting the Background type in the Look & Feel configuration section


Creating a custom graphical background

1. Create a background graphic.
The first step is to create a background graphic to you wish to use as the background to each box. This can be done easily in quickly. The image below was created in Paint.NET using a simple gradient fill.

The image must be loaded onto a suitable location on the SharePoint site, for example into a Picture Library.

The image is 240 x 60 pixels in dimension.

2. Configuring the Org Chart.
The final step is to configure the SharePoint Org Chart Web Part to use the custom graphic. For this you will need the full URL to the image.

In the Chart Items configuration section set the property Image URL to the URL of the image.
Set the properties Customer Box Height and Customer Box Width to the height and width of the image. In this example that is 60 and 240 respectively.

The image in this example is 240 x 60 pixels in dimension.

Changing the colour of a CSS Background

1. Changing the colour
Once the Background Type has been changed to CSS by setting the property in the Look & Feel configuration section the colour of the background can be easily changed by setting the Background Colour (CSS) property that is found in both the Chart Items and Assistant Items configuration section.

The Background Colour (CSS) can be set to the name of a colour, for example 'red' or 'green' or the Hex value such as #11AACB


2. Changing the Width and Height of a CSS background.
The width and height of each chart box change changed by setting the Customer Box Width and Customer Box Height properties found in both the Chart Items and Assistant Items configuration section.

In the example below the Background Colour (CSS) has been set to #11AACB, the Customer Box Width set to 200 and the Customer Box Height to 35