Chart Margins

Overview

Margin is a free space that is taken from some edge (or from all edges) of the chart. There are two types of margins: Inner margin and Outer margin. Inner margin is used to crop some space inside the chart, leaving place for chart background (by default inner margin is set to some small value) and outer margin is used to make the whole chart smaller, it may be useful while formatting your html-page if you have a Gantt chart in the table.

Usage samples

Let's look at some samples of margins' usage examples. At first let's just color chart's background and look how much space is cropped by default:

<settings>
  
<background>
    
<fill color="cyan" />
  
</background>
</settings>

Gantt margins sample 1 - Click to see Live Chart Preview
Gantt margins sample 1 - Click to see Live Chart Preview

Now we set inner_margin to "15" and color the free area using background. All of this we do in settings node:

<settings>
  
<inner_margin all="15" />
  
<background>
    
<fill color="cyan" />
  
</background>
</settings>

Gantt margins sample 2 - Click to see Live Chart Preview
Gantt margins sample 2 - Click to see Live Chart Preview

And now let's save chart's width and height but set outer_margin to "25" and look what happens:

<settings>
  
<inner_margin all="15" />
  
<outer_margin all="25" />
  
<background>
    
<fill color="cyan" />
  
</background>
</settings>

Gantt margins sample 3 - Click to see Live Chart Preview
Gantt margins sample 3 - Click to see Live Chart Preview

to top