Layout

Layout is the process of allocating space in the Chart rectangle for the various visual elements:

• Horizontal axes
• Vertical axes
• Data area

The layout process proceeds in XAML order of the yacc:Chart.Components collection. Each eligible component can "claim" space along its configured side; the rectangle that remains is what's available for subsequent components.

Sides

The chart's rectangle is referenced by the "side":

• Left, Right for vertical elements. Fixed height, calculated width.
• Top, Bottom for horizontal elements. Calculated height, fixed width.

Axes

The Category axis is meant to be the horizontal axis. Its layout side is either Top or Bottom. A Category axis binds to the item's index, and not its value, and is always "numbered" from zero to collection length minus 1. Each category has a label; this usually comes from your data.

In addition, there is the concept of category axis offset and size. This provides a way to "separate" multiple series in the same "cell" of that index. For example, when presenting 3 column series, each one should have separate category axis offsets and sizes so they don't overlap. Both the offset and size are "normalized" to [0..1] and represent the fraction of the "cell" to use for dimensions.

The Value axis is meant to be the vertical axis. Its layout side is either Left or Right. This is a "continuous" scale based on the numeric values of the series mapped to it. The tick labels are calculated and positioned automatically based on all series value extents.

Coming in 2.x.x axes can be either vertical or horizontal!

Series

After all the sides are claimed, the remaining space "in the middle" becomes the rectangle for positioning the Series (and other visual) components. There is no practical limit to number of series, other than performance limits on number of total Path and Geometry elements XAML can render on a given platform.

Example

The simplest example is the demo chart, which has two axes. Each claims its space as follows:

1. Horizontal Category axis on Bottom. Claims a rectangle of desired height along Bottom edge.
2. The Background, ValueAxisGrid and Series components do not claim space. They are always assigned to the data rectangle.
3. Vertical Value axis on Left. Claims a rectangle of desired width along Left edge.
   • the "overlap" in the Bottom-left corner is eliminated from both intersecting rectangles.