# Wijmo_Chart.Plotarea

## Content

<div class="content__tsd">
						<div style="display:flex;justify-content:space-between;align-items:center">
							<h1>
								PlotArea Class
							</h1>
						</div>
						<section class="tsd-comment">
							<div class="tsd-comment">
								<div class="lead">
									<p>Represents a plot area on the chart.</p>
								</div>
								<p>The chart can have multiple plot areas with multiple axes.
								To assign axis to plot area use <b>Axis.plotArea</b> property. For example:</p>
								<pre> // create a plot area
 var pa = new PlotArea();
 pa.row = 1;
 chart.plotAreas.push(pa);
 // create auxiliary y-axis
 var ay2 = new Axis(Position.Left);
 ay2.plotArea = pa; // attach axis to the plot area
 chart.axes.push(ay2);
 // plot first series along y-axis
 chart.series[0].axisY = ay2;
</pre>
							</div>
						</section>
						<section class="tsd-hierarchy">
							<h3>Heirarchy</h3>
							<ul class="tsd-hierarchy">
								<li>
									<span class="target">PlotArea</span>
									<ul class="tsd-hierarchy">
										<li>
											<a href="wijmo_angular2_chart.wjflexchartplotarea.html" class="tsd-signature-type">WjFlexChartPlotArea</a>
										</li>
									</ul>
								</li>
							</ul>
						</section>
						<section class="tsd-index-group">
							<section class="tsd-index-panel">
								<div class="tsd-index-content">
									<section class="tsd-index-section ">
										<div class="title">
											<div class="gc_api_tree-item_icon_img_wrapper">
												<div class="gc_api_tree-item_icon_img" data-expand="true">
												</div>
											</div>
											<h3>
												Constructors
											</h3>
										</div>
										<ul class="tsd-index-list">
											<li class="tsd-kind-constructor tsd-parent-kind-class"><a href="wijmo_chart.plotarea.html#constructor" class="tsd-kind-icon">constructor</a></li>
										</ul>
									</section>
									<section class="tsd-index-section ">
										<div class="title">
											<div class="gc_api_tree-item_icon_img_wrapper">
												<div class="gc_api_tree-item_icon_img" data-expand="true">
												</div>
											</div>
											<h3>
												Properties
											</h3>
										</div>
										<ul class="tsd-index-list">
											<li class="tsd-kind-property tsd-parent-kind-class"><a href="wijmo_chart.plotarea.html#column" class="tsd-kind-icon">column</a></li>
											<li class="tsd-kind-property tsd-parent-kind-class"><a href="wijmo_chart.plotarea.html#height" class="tsd-kind-icon">height</a></li>
											<li class="tsd-kind-property tsd-parent-kind-class"><a href="wijmo_chart.plotarea.html#name" class="tsd-kind-icon">name</a></li>
											<li class="tsd-kind-property tsd-parent-kind-class"><a href="wijmo_chart.plotarea.html#row" class="tsd-kind-icon">row</a></li>
											<li class="tsd-kind-property tsd-parent-kind-class"><a href="wijmo_chart.plotarea.html#style" class="tsd-kind-icon">style</a></li>
											<li class="tsd-kind-property tsd-parent-kind-class"><a href="wijmo_chart.plotarea.html#width" class="tsd-kind-icon">width</a></li>
										</ul>
									</section>
								</div>
							</section>
						</section>
						<section class="tsd-panel-group tsd-member-group ">
							<h2>Constructors</h2>
							<section class="tsd-panel tsd-member tsd-kind-constructor tsd-parent-kind-class">
								<a name="constructor" class="tsd-anchor"></a>
								<h3>constructor</h3>
								<ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-class">
									<li class="tsd-signature tsd-kind-icon">new <wbr>Plot<wbr>Area<span class="tsd-signature-symbol">(</span>options<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="wijmo_chart.plotarea.html" class="tsd-signature-type">PlotArea</a></li>
								</ul>
								<ul class="tsd-descriptions">
									<li class="tsd-description">
										<aside class="tsd-sources">
										</aside>
										<div class="tsd-comment">
											<div class="lead">
												<p>Initializes a new instance of the <a href="wijmo_chart.plotarea.html">PlotArea</a> class.</p>
											</div>
										</div>
										<h4 class="tsd-parameters-title">Parameters</h4>
										<ul class="tsd-parameters">
											<li>
												<h5><span class="tsd-flag ts-flagOptional">Optional</span> options: <span class="tsd-signature-type">any</span></h5>
												<div class="tsd-comment">
													<div class="lead">
														<p>Initialization options for the plot area.</p>
													</div>
												</div>
											</li>
										</ul>
										<h4 class="tsd-returns-title">Returns <a href="wijmo_chart.plotarea.html" class="tsd-signature-type">PlotArea</a></h4>
									</li>
								</ul>
							</section>
						</section>
						<section class="tsd-panel-group tsd-member-group ">
							<h2>Properties</h2>
							<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class">
								<a name="column" class="tsd-anchor"></a>
								<h3>column</h3>
								<div class="tsd-signature tsd-kind-icon">column<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div>
								<aside class="tsd-sources">
								</aside>
								<div class="tsd-comment">
									<div class="lead">
										<p>Gets or sets the column index of plot area.
											This determines the horizontal position of the plot
										area on the chart.</p>
									</div>
								</div>
							</section>
							<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class">
								<a name="height" class="tsd-anchor"></a>
								<h3>height</h3>
								<div class="tsd-signature tsd-kind-icon">height<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span></div>
								<aside class="tsd-sources">
								</aside>
								<div class="tsd-comment">
									<div class="lead">
										<p>Gets or sets the height of the plot area.</p>
									</div>
									<p>The height can be specified as a number (in pixels) or
									as a string in the format '{number}*' (star sizing).</p>
								</div>
							</section>
							<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class">
								<a name="name" class="tsd-anchor"></a>
								<h3>name</h3>
								<div class="tsd-signature tsd-kind-icon">name<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
								<aside class="tsd-sources">
								</aside>
								<div class="tsd-comment">
									<div class="lead">
										<p>Gets or sets the plot area name.</p>
									</div>
								</div>
							</section>
							<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class">
								<a name="row" class="tsd-anchor"></a>
								<h3>row</h3>
								<div class="tsd-signature tsd-kind-icon">row<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div>
								<aside class="tsd-sources">
								</aside>
								<div class="tsd-comment">
									<div class="lead">
										<p>Gets or sets the row index of plot area.
											This determines the vertical position of the plot area
										on the chart.</p>
									</div>
								</div>
							</section>
							<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class">
								<a name="style" class="tsd-anchor"></a>
								<h3>style</h3>
								<div class="tsd-signature tsd-kind-icon">style<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span></div>
								<aside class="tsd-sources">
								</aside>
								<div class="tsd-comment">
									<div class="lead">
										<p>Gets or sets the style of the plot area.</p>
									</div>
									<p>Using <b>style</b> property, you can set appearance of the plot area.
									For example:</p>
									<pre>  pa.style = { fill: 'rgba(0,255,0,0.1)' };
</pre>
								</div>
							</section>
							<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class">
								<a name="width" class="tsd-anchor"></a>
								<h3>width</h3>
								<div class="tsd-signature tsd-kind-icon">width<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span></div>
								<aside class="tsd-sources">
								</aside>
								<div class="tsd-comment">
									<div class="lead">
										<p>Gets or sets width of the plot area.</p>
									</div>
									<p>The width can be specified as a number (in pixels) or
									as a string in the format '{number}*' (star sizing).</p>
								</div>
							</section>
						</section>
					</div>