Xceed Chart for WinForms has extensive support for positioning and scaling charts in the component canvas. This topic will help you to understand chart margins and dimensions and show how to position multiple 2D and 3D charts in the component canvas. 

The Chart object has three properties called Width, Height, and Depth, which define a box in the 3D space where all chart elements such as bars, bubble, etc., are drawn. These properties are specified in model units, and their actual size in pixels depends on three factors: the current MarginMode, chart Margins, and applied projection. 

Chart margins are a very convenient way of placing your chart relative to the control canvas. They define an area called the chart area, where the chart is drawn. The control guarantees that the chart's walls and contents will not be displayed outside the chart area. Margins are specified as a percentage of the control window's width and height with the Margins property of the Chart object:

Dim chart As Chart =   chartControl1.Charts(0)
chart.MarginMode = MarginMode.Fit
chart.Margins = New RectangleF(10, 10, 80, 80)

Chart chart = chartControl1.Charts[0];
chart.MarginMode = MarginMode.Fit;
chart.Margins = new RectangleF(10, 10, 80, 80);

The left chart margin must be always less than or equal to the right one. The same rule is valid for the top and the bottom margin, so you cannot pass negative values to the width and height parameters in the RectangleF constructor. Besides the chart margins, you can also control the algorithm used by the chart to fit in them. Let's look at the possible margin fit strategies.

1. MarginMode.None

When using this margin mode, the chart does not try to fit in the area defined by the Margins. The area occupied by the chart in the component canvas is determined by the applied projection, the Zoom factor, and the chart's dimensions (width, height, and depth). Note that in this mode, chart margins still control where the chart center is projected. For example, consider the following code:

Dim chart As Chart =   chartControl1.Charts(0)
chart.MarginMode = MarginMode.None
chart.Margins = New RectangleF(0, 0, 60, 60)

Chart chart = chartControl1.Charts[0];
chart.MarginMode = MarginMode.None;
chart.Margins = new RectangleF(0, 0, 60, 60);

This code will actually offset the chart to the top left side of the component canvas because the center of the margin rectangle is positioned at (30, 30). 

For 2D charts, the Width and Height properties can be thought of as values defining the area occupied by the chart as a percentage of the width or height of the component canvas. If the width of the chart canvas is greater than its height, these properties are computed relative to the height and vice versa. To illustrate this, let's assume that we have a Windows Forms application showing a simple 2D bar chart. The component's dimensions in the form are 300x200 pixels, and you want to have a 2D bar chart that occupies 70% of the chart width and 70% of chart height. Because you know that the height of component canvas is smaller than the width, you must compute the Width and Height of the Chart object relative to the component height. The following code stretches the chart to occupy 70% of the chart area width or height regardless of the component's dimensions:

Dim chart As Chart =   chartControl1.Charts(0)
chart.MarginMode = MarginMode.None
chart.View.SetPredefinedProjection(PredefinedProjection.Orthogonal)
Dim fAspect As single
  
If chartControl1.Width > chartControl1.Height Then
    fAspect = CType(chartControl1.Width, single) / CType(chartControl1.Height, single)
    chart.Width = 70.0f * fAspect
    chart.Height = 70.0f
Else
    fAspect = CType(chartControl1.Height, single) / CType(chartControl1.Width, single)
    chart.Width = 70.0f
    chart.Height = 70.0f * fAspect
End If

Chart chart = chartControl1.Charts[0];
chart.MarginMode = MarginMode.None;
chart.View.SetPredefinedProjection(PredefinedProjection.Orthogonal);
float fAspect;
if (chartControl1.Width > chartControl1.Height)
{
    fAspect = (float)chartControl1.Width / (float)chartControl1.Height;
    chart.Width = 70.0f * fAspect;
    chart.Height = 70.0f;
}
else
{
    fAspect = (float)chartControl1.Height / (float)chartControl1.Width;
    chart.Width = 70.0f;
    chart.Height = 70.0f * fAspect;
}

This margin mode is most useful for 2D and 2D half charts, and in cases where full control over the chart's dimensions is needed. For example, the above code snippet can be easily modified to set the chart's dimensions in pixels.

2. MarginMode.Fit

It is very difficult to use MarginMode.None in charts with applied elevation, rotation or viewer rotation angle because these characteristics affect how the chart is projected on the component canvas. In such cases, you may wish to use the Fit margin strategy. In this mode, the component ensures that the chart does not go outside the area defined by the Margins property. 

The Width, Height, and Depth properties of the Chart object now define a ratio between the chart width, height, and depth. For example, if you want a chart with XYZ proportions 1:1:1 (cube), you can set the Width, Height, and Depth to 100. An important feature of the fit margin strategy is that it does not change the chart's proportions. This makes it the preferred margin fit strategy for 3D charts, as it does not distort the 3D appearance. The following code instructs the chart to use the Fit margin strategy:

Dim chart As Chart =   chartControl1.Charts(0)
chart.MarginMode = MarginMode.Fit

Chart chart = chartControl1.Charts[0];
chart.MarginMode = MarginMode.Fit;

3. MarginMode.Stretch

The third margin mode is Stretch. In this mode, the chart again does not go beyond the margins defined by the Margins property, but does not try to preserve the chart proportions. This margin strategy is very useful when you want the chart to occupy as much chart area as possible. Such charts are typically 2D or 2D half charts. The following code sets the MarginMode to Stretch:

Dim chart As Chart =   chartControl1.Charts(0)
chart.MarginMode = MarginMode.Stretch

Chart chart = chartControl1.Charts[0];
chart.MarginMode = MarginMode.Stretch;

It is important to mention that the chart will not go beyond the chart margins if the zoom factor is set to 100% (default). Zooming is applied in all margin fit modes.

See Also

Chart | View | Margins | MarginMode