</ iframe > </noscript> <!-- End Google Tag Manager (noscript) --> <div id="BeforeHeaderContent"> </div> <div id="HeaderContent"> <div id="ProjectTitle">Chart for WinRT</div> <div id="PageTitle"><div id="PageTitleText">Area Charts</div></div> </div> <div id="AfterHeaderContent"> <!-- Spacing --> <span id="ToggleAllSectionsLink" class="FunctionLink"> <label id="CollapseAllLabel">Collapse All</label> <label id="ExpandAllLabel" style="display: none;">Expand All</label> </span> </div> <div class="BreadcrumbsContainer"><table><tr><td> <a href="Chart_for_WinRT.html">Chart for WinRT</a> > <a href="Chart_Types.html">Chart Types</a> > Area Charts</td></tr></table></div> <div id="BodyContent"> <p><script language="JavaScript" type="text/javascript"> //<![CDATA[ <!-- if (typeof d2hProcessTopicNavForCSH != "undefined") d2hProcessTopicNavForCSH(); //--> //]]> </script> An <b>Area</b> chart draws each series as connected points of data, filled below the points. Each series is drawn on top of the preceding series. The series can be drawn independently or stacked. <b>Chart for WinRT</b> supports the following types of <b>Area</b> charts:</p> <ul> <li>Area</li> <li>AreaSmoothed</li> <li>AreaStacked</li> <li>AreaStacked100pc</li> </ul> <p class="AutoBodyCaption"> Area Chart</p> <p>The following image represents the <a href="C1.Xaml.Chart~C1.Xaml.Chart.C1Chart.html">C1Chart</a> control when you set the <a href="C1.Xaml.Chart~C1.Xaml.Chart.C1Chart~ChartType.html">C1Chart.ChartType</a> property to <b>Area</b>:</p> <p> </p> <p> <img border="0" alt="" src="images/Graphics/Narrative/CTArea.png"></p> <p> </p> <p class="AutoBodyCaption">AreaSmoothed</p> <p>The following image represents the <b>Area Smoothed</b> chart when you set the <a href="C1.Xaml.Chart~C1.Xaml.Chart.C1Chart~ChartType.html">C1Chart.ChartType</a> property to <b>AreaSmoothed</b>:</p> <p> </p> <p> <img border="0" alt="" src="images/Graphics/Narrative/CTAreaSmoothed.png"></p> <p> </p> <p class="AutoBodyCaption">AreaStacked</p> <p>The following image represents the <b>Area Stacked</b> chart when you set the <a href="C1.Xaml.Chart~C1.Xaml.Chart.C1Chart~ChartType.html">C1Chart.ChartType</a> property to <b>AreaStacked</b>:</p> <p> </p> <p><img border="0" alt="" src="images/Graphics/Narrative/CTAreaStacked2.png"></p> <p> </p> <p class="AutoBodyCaption">AreaStacked100pc</p> <p>The following image represents the <b>Area Stacked 100 Percent</b> chart when you set the <a href="C1.Xaml.Chart~C1.Xaml.Chart.C1Chart~ChartType.html">C1Chart.ChartType</a> property to <b>AreaStacked100pc</b>:</p> <p> </p> <p> <img border="0" alt="" src="images/Graphics/Narrative/CTAreaStacked100pc.png"></p> <p> </p> <p>Use the following XAML markup to create an Area chart:</p> <div class="FilteredContentCS" data-title="CS" data-itemid="CS"> <table class="SyntaxTable"> <tbody> <tr> <th>XAML Markup</th> <th> <div class="CopyCodeWrapper"> <span class="CopyCode">Copy Code</span> </div> </th> </tr> <tr> <td colspan="2"> <pre> <Chart:C1Chart x:Name=<span style="COLOR: #800000">"chart0"</span> Height=<span style="COLOR: #800000">"350"</span> Width=<span style="COLOR: #800000">"450"</span> ChartType=<span style="COLOR: #800000">"Area"</span> Palette=<span style="COLOR: #800000">"Solstice"</span> Foreground=<span style="COLOR: #800000">"Black"</span> > <!-- Populate the chart with three series --> <Chart:C1Chart.Data> <Chart:ChartData > <Chart:ChartData.Children> <Chart:DataSeries Label=<span style="COLOR: #800000">"Revenue"</span> Values=<span style="COLOR: #800000">"1200, 1205, 400, 1410"</span> ></Chart:DataSeries> <Chart:DataSeries Label=<span style="COLOR: #800000">"Profit"</span> Values=<span style="COLOR: #800000">"790, 990, 175, 1205"</span> ></Chart:DataSeries> <Chart:DataSeries Label=<span style="COLOR: #800000">"Expense"</span> Values=<span style="COLOR: #800000">"400, 300, 300, 210"</span> ></Chart:DataSeries> </Chart:ChartData.Children> </Chart:ChartData> </Chart:C1Chart.Data> <!-- Configure axes --> <Chart:C1Chart.View> <Chart:ChartView> <Chart:ChartView.AxisX> <Chart:Axis Title=<span style="COLOR: #800000">"Region"</span> Height=<span style="COLOR: #800000">"35"</span>/> </Chart:ChartView.AxisX> <Chart:ChartView.AxisY> <Chart:Axis Title=<span style="COLOR: #800000">"Amount($1000)"</span> Min=<span style="COLOR: #800000">"0"</span> Max=<span style="COLOR: #800000">"1450"</span> MajorUnit=<span style="COLOR: #800000">"200"</span> /> </Chart:ChartView.AxisY> </Chart:ChartView> </Chart:C1Chart.View> <Chart:C1ChartLegend Visibility=<span style="COLOR: #800000">"Visible"</span> Position=<span style="COLOR: #800000">"Right"</span> /> </Chart:C1Chart> </pre> </td> </tr> </tbody> </table> </div> <p> </p> <a name="seealsobookmark"></a> </div> <div id="FooterContent"> <p> </p><p> </p><hr style="height: 1px"><p>Copyright (c) <script type="text/javascript"> var theDate=new Date() document.write(theDate.getFullYear()) </script> GrapeCity, inc. All rights reserved. <script> $(document).ready(function() { if (!(window.self !== window.top)) { // Not running in a frameset // Get the page name var pageName = location.href.substring(location.href.lastIndexOf("/") + 1); if (pageName.indexOf("#") != -1) { pageName = pageName.substring(0, pageName.indexOf("#")); } // Append to webframe.html var framePage = "webframe.html#" + pageName; location.href = framePage; } }); </script></p> <a target="_blank" href="http://our.componentone.com/groups/">Product Support Forum</a> | <a target="_blank" href="http://feedback.componentone.com/forums/255783-xaml-documentation">Documentation Feedback</a> </div> </body> </html>