# Plot Areas in FlexChart

Learn how to add multiple plot areas to Wijmo's FlexChart in this documentation topic

## Content

By default, each FlexChart has two axes and a single Plot Area.

You may create additional plot areas and stack them vertically or horizontally. Vertically stacked plot areas usually have their own Y axis and a shared X axis. The legend is shared by all plot areas.

To create a chart with 2 series on 2 separate plot areas, follow these steps:

1. Create the FlexChart with multiple series.
2. Define each plot area and add it to the chart's __plotAreas__ collection.
3. Define the necessary extra axes and assign them to the 2nd plot area by setting the __plotArea__ property.
4. Assign at least one series to the 2nd plot area by setting its __axisY__ or __axisX__ property to the axis you defined in step #3.

For example, the snippet below creates two plot areas. The first contains two series and show amounts on the Y axis. The second contains a single series and shows quantities on the Y axis.

```JavaScript
import * as chart from '@mescius/wijmo.chart';

// create the chart
var myChart = new chart.FlexChart('#myChart', {
    itemsSource: getData(),
    bindingX: 'country',
    series: [
        { binding: 'sales', name: 'Sales' },
        { binding: 'expenses', name: 'Expenses' },
        { binding: 'downloads', name: 'Downloads', chartType: 'LineSymbols' }
        ]
        });

// define first plot area, add to chart
var p = new chart.PlotArea();
p.row = 0;
p.name = 'amounts';
p.height = '2*';
myChart.plotAreas.push(p)

// define second plot area
p = new chart.PlotArea();
p.row = 1;
p.name = 'quantities';
p.height = '*';

// define second y axis
var axisY2 = new chart.Axis(wijmo.chart.Position.Left);
// assign 2nd Y axis to 2nd plot area
axisY2.plotArea = p;
// assign 3rd series 'downloads' to the 2nd Y axis
myChart.series[2].axisY = axisY2;
myChart.plotAreas.push(p);
```
Note that the plot area in which a series is plotted is determined by which X or Y axis the series is plotted against. So if you move an axis to a different plot area, the series will move with them.

## Understanding the Plot Area Layout

The plot area layout is based on a grid layout of rows and columns. For example, to create 3 vertically stacked plot areas, set the __row__ property for each to 0, 1 and 2 respectively.

To create 3 horizontally stacked plot areas, set the __column__ property for each to 0, 1 and 2 respectively. You can even use both rows and columns to create a 2 x 2 layout.

You can control the size of each plot area by setting its __width__ and __height__ properties. If you want to add some extra space between plot areas, add an empty one to act as a spacer.

```JavaScript
// create a spacer plot area
p = new chart.PlotArea();
p.row = theChart.plotAreas.length;
p.name = 'spacer';
p.height = 25;
theChart.plotAreas.push(p)
```

## Stacking Multiple Charts Using Plot Margin

Stacking chart controls is an alternative to creating a single chart with multiple plot areas. Use the __plotMargin__ property to ensure the charts line up properly.

For example, these two charts stacked vertically have their Y axes aligned by setting both __plotMargin__ properties to have '120' as the left value.

```JavaScript
myChart1.plotMargin = 'NaN 120 10 60'; // top, right, bottom, left
myChart2.plotMargin = '10 120 NaN 60'; // top, right, bottom, left
```
![Plot Margin](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/chart/chart-plot-margin.png)