Configuring Appearance

OrgNice allows you to configure the appearance of your Org Charts. This is accessible from the Project Setup page in the Appearance section. This article describes the appearance configuration you can apply. Currently, appearance setup allows you to configure background and text colors and borders and lines.

To start with configuring the appearance you can start with an optional Theme and customize the appearance. To reset the appearance, choose the Default Theme.

There are two areas that you can configure. The chart itself and each node.

Background Colors

Background colors for both charts and nodes can be solid or gradients. Gradients can be linear or radial gradients. Solid: Select a single color. Linear gradients: Linear Gradients change smoothly from one color to the other in a straight line. You can specify the two colors and the direction of the change. Radial gradients: Radial Gradients change colors smoothly from one color to the other radially (in concentric circles from the center). You can specify the two colors.

Text Colors

Text colors are solid colors.

Chart

Charts support the following configuration - Background: Set the background for the chart. Select a background color and/or a background image. The background image has to be specified by providing a url which should be publicly accessible. Additional settings can be provided that determine the position, the size and whether the image is repeated or not.

Lines: Specify the thickness and color of lines drawn to connect nodes in the chart.

Highlighting: Specify the thickness and color of highlighting used to highlight nodes in the chart.

Node

Nodes support the following appearance configuraiton - Background: Set the background color for the node.

Text Color: Set the color of node text.

Border: Set properties for how the node’s borders should be drawn. They specify the width and the style as well as what the radius of the curvature should be if you want curved corners. Specify 0 for sharp corners. A style value of None means no border.

Expander Background: Expander is the button at the bottom edge of nodes that allows you to expand or collapse its children. Expander background can be set by providing its color.

Expander Text: Set the text color of the expander

Preview

You can see a preview of the settings in the Preview section as well as in the Preview chart.