Recent updates to the Corporate Charts engine have made it possible to have more control over the placement of the different chart elements, such as axis titles, legend etc.

Understanding the Layout Options

Practically, when a layout template is used, a grid that has 4 specific areas around the plot (top, bottom, right, and left) is created. Each area can hold multiple rows of elements, where each element is aligned left, right, or in the center.

There are two different grid layouts: a layout that focuses on the Plot Area, and a layout that focuses on the Chart Area. The differences between these two are presented below:

Plot Area Layout

The plot area focuses on the actual chart and its direct elements (axes, axis labels, grid lines, etc.). The top and bottom element areas that are used in this layout have the same width as the plot area, while the right and left element areas have the same height as the chart area. The height of the top and bottom element areas, as well as the width of the right and left element areas, depends on the number of rows that they will contain, as will be explained later. In the schematic below, the Plot Area layout is presented:

Chart Area Layout

The focus of the Chart Area layout is practically the whole area that includes the chart and all of its surrounding elements (chart titles, legend, etc.). Practically, it is the area that is included within the bounding box of the inserted chart in the Office app. As seen in the schematic below the main differences between the Chart Area and the Plot Area layouts are the dimensions of the element areas. More specifically, the top and bottom element areas have the same widht as the chart area, while the side element areas have the same height as the plot area. Again, The height of the top and bottom element areas, as well as the width of the right and left element areas, depends on the number of rows that they contain.

Layout Template

The layout template consists of 3 main elements: a key where the grid style is defined, an object where the general margins are defined as well as four arrays where the element areas are configured.

Grid Style

The GridStyle key is where the preferred layout is defined and has 2 possible values:Plotarea and Chartarea.

Margins

In the layout template, it is possible to define the general margins of the chart. More specifically, these are the margins between the chart's bounding box and it's elements/element areas. An example of the the Margins object can be seen below:

"Margins":{
    "Bottom": 10,
    "Left": 10,
    "Right": 10,
    "Top": 10
}

In the Margins object the Bottom, Top, Left and Right margins can be defined. It is worth mentioning that the margin distances are defined in points (pts).

Configuration of Element Areas

Each of the four element areas is configured in a separate array in the layout template. The arrays are named after each element area and their names are respectively Top, Bottom, Right, and Left. 

As seen in the example below (for the Bottom element area), an element array, which represents the whole corresponding area, can contain multiple objects, where each object represents a row within the element area and contains a Margins object where the row's margins are defined and a RowItems array where the row's contents are configured. Keep in mind, each row can contain up to 3 elements, provided that they don't have the same alignment.

"Bottom": [
    {
        "Margins": {
            "Bottom": 5,
            "Left": 25,
            "Right": 5,
            "Top": 25
        },
        "RowItems": [
            {
                "Type": "Legend",
                "Alignment": "Left"
            }
        ]
    },
    {
         "Margins": {
             "Bottom": 12,
             "Left": 5,
             "Right": 12,
             "Top": 30
        },
        "RowItems": [
            {
                "Type": "AxisTitlePrimaryHorizontal",
                "Alignment": "Center"
            },
            {
                "Type": "ChartTitle",
                "Alignment": "Right"
            }
        ]
    }
]

The Margins object is configured in the same way as the general Margins object while each object of the RowItems contains two keys: Type and Alignment.

In the Type key, the desired chart element is defined. This key accepts the following values: 

AxisTitlePrimaryHorizontal

AxisTitlePrimaryVertical

AxisTitleSecondaryHorizontal

AxisTitleSecondaryVertical

ChartTitle

Legend

On the other side, the Alignment key controls the alignment of the corresponding element by using Right, Center or Left as its values. Important: for the left and right element areas, the elements that are aligned to the Left of the rows are placed at the bottom of the chart area, while the elements that are aligned to the Right of the rows are placed at the top. 

For example, the above configuration would look like this:

It is important to point out that the rows are populated from the edges of the chart area and inwards. In this case, the row that contains the Legend is the first row, and is right next to the edge of the chart area, while the second row that contains the two titles is closer to the plot area. In the schematic below, the order of population for each element area is presented:

For each element area, the green rows (close to the edge) are always populated first. This means that the first object of each corresponding array will be on one of these rows. If there are more objects (i.e. rows) defined for an element area, these are added closer to the plot area, as seen above. It's worth mentioning, that there can be more than 2 rows in the top and bottom element areas, as well as more than 3 rows in the side element areas.

Configuration of the Module

The following command should be used to set the defined layout to a particular chart:

<cmd case="SkabelonDesign.CorporateCharts3:SetLayout" LayoutFilepath="LAYOUT FILE"/>

Similarly to the Create/Format command, the name of the .json file that contains the layout template is defined in the LayoutFilepath parameter. Keep in mind that the file needs to be placed in the "layouts" folder in "...Content\SkabelonDesign.CorporateCharts3". 

In case multiple layout templates are used, each of them needs to be included in each own button.

Example of a Layout Template

{
    "$schema":"ADD THE CORRECT ONE ONCE PUBLISHED",
    "GridStyle": "Plotarea",
    "Margins":{
        "Bottom": 10,
        "Left": 10,
        "Right": 10,
        "Top": 10
    },
    "Bottom": [
        {
            "Margins": {
                "Bottom": 10,
                "Left": 0,
                "Right": 0,
                "Top": 10
            },
            "RowItems": [
                {
                    "Type": "Legend",
                    "Alignment": "Left"
                }
            ]
        }
    ],
    "Top": [
        {
            "Margins": {
                "Bottom": 0,
                "Left": 0,
                "Right": 0,
                "Top": 0
            },
            "RowItems": [
                {
                    "Type": "ChartTitle",
                    "Alignment": "Center"
                }
            ]
        },
        {
            "Margins": {
                "Bottom": 5,
                "Left": 0,
                "Right": 5,
                "Top": 5
            },
            "RowItems": [
                {
                    "Alignment": "Left",
                    "Type": "AxisTitlePrimaryVertical"
                }
            ]
        }
    ],
    "Left": [
        {
            "Margins": {
                "Bottom": 0,
                "Left": 0,
                "Right": 0,
                "Top": 0
            },
            "RowItems": [
                {
                    "Alignment": "Right",
                    "Type": "AxisTitleSecondaryVertical"
                }
            ]
        }
    ],
    "Right": [
        {
            "Margins": {
                "Bottom": 0,
                "Left": 5,
                "Right": 0,
                "Top": 0
            },
            "RowItems": [
                {
                    "Type": "AxisTitlePrimaryHorizontal",
                    "Alignment": "Center"
                },
                {
                    "Type": "AxisTitleSecondaryHorizontal",
                    "Alignment": "Right"
                }
            ]
        }
    ]
}