</ iframe > </noscript> <!-- End Google Tag Manager (noscript) --> <div id="BeforeHeaderContent"> </div> <div id="HeaderContent"> <div id="ProjectTitle">FlexChart for WinForms</div> <div id="PageTitle"><div id="PageTitleText">Layouts</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="TreeMap-Overview.html">TreeMap</a> > Layouts</td></tr></table></div> <div id="BodyContent"> <p>TreeMap enables its data items and groups, represented as rectangles, to be displayed in a variety of arrangements. The tree map rectangles can be arranged into squarified, horizontal, and vertical layouts. To set the desired tree map layout, you need to use <a href="C1.Win.FlexChart.4~C1.Win.Chart.TreeMap~ChartType.html">ChartType</a> property of <a href="C1.Win.FlexChart.4~C1.Win.Chart.TreeMap.html">TreeMap</a> class, which takes <a href="C1.Win.FlexChart.4~C1.Chart.TreeMapType.html">TreeMapType</a> enum. The default layout of TreeMap chart control is squarified.</p> <h3>Squarified</h3> <p>The squarified layout tries to arrange the tree map rectangles (data items and groups) as approximate squares. This layout makes it easier to make comparisons and point patterns, as the accuracy of presentation is enhanced in squarified arrangement. This layout is very useful for large data sets. </p> <p><img border="0" alt="Aquarified layout of TreeMap" src="images/TreeMap-Squarified.png"></p> <div class="TabContainer TabContainerWidget"> <ul> <li class="FilteredContentVB"><a href="#TabContent-VB">Visual Basic</a></li> <li class="FilteredContentCS"><a href="#TabContent-CS">C#</a></li> </ul> <div id="TabContent-VB" class="FilteredContentVB"> <div class="FilteredContentVB TabContainer TabContainerWidget" data-title="Visual Basic" data-itemid="VB"> <ul> <li><a href="#TabContent-dcb4a66f-5a1e-4b55-a73c-56d72acf7a84">Visual Basic</a></li> </ul> <div id="TabContent-dcb4a66f-5a1e-4b55-a73c-56d72acf7a84" class="FilteredContent code"> <pre> treeMap1.ChartType = C1.Chart.TreeMapType.Squarified </pre> </div> </div> </div> <div id="TabContent-CS" class="FilteredContentCS"> <div class="FilteredContentCS TabContainer TabContainerWidget" data-title="C#" data-itemid="CS"> <ul> <li><a href="#TabContent-bfc4c894-5903-44d5-b2a9-aac444a5589b">C#</a></li> </ul> <div id="TabContent-bfc4c894-5903-44d5-b2a9-aac444a5589b" class="FilteredContent code"> <pre> treeMap1.ChartType = C1.Chart.TreeMapType.Squarified; </pre> </div> </div> </div> </div> <p> <h3>Horizontal</h3> <p>The horizontal layout stacks the tree map rectangles one over the other as rows. Here the width of the rectangles is greater than their height.</p> <p><img border="0" alt="Horizontal layout of TreeMap" src="images/TreeMap-Horizontal.png"></p> <div class="TabContainer TabContainerWidget"> <ul> <li class="FilteredContentVB"><a href="#TabContent-VB">Visual Basic</a></li> <li class="FilteredContentCS"><a href="#TabContent-CS">C#</a></li> </ul> <div id="TabContent-VB" class="FilteredContentVB"> <div class="FilteredContentVB TabContainer TabContainerWidget" data-title="Visual Basic" data-itemid="VB"> <ul> <li><a href="#TabContent-090e0e5e-7556-40e0-82de-d1e321e79e92">Visual Basic</a></li> </ul> <div id="TabContent-090e0e5e-7556-40e0-82de-d1e321e79e92" class="FilteredContent code"> <pre> treeMap1.ChartType = C1.Chart.TreeMapType.Horizontal </pre> </div> </div> </div> <div id="TabContent-CS" class="FilteredContentCS"> <div class="FilteredContentCS TabContainer TabContainerWidget" data-title="C#" data-itemid="CS"> <ul> <li><a href="#TabContent-dfb84bd5-ee4f-46c6-aaa0-35ba83a60470">C#</a></li> </ul> <div id="TabContent-dfb84bd5-ee4f-46c6-aaa0-35ba83a60470" class="FilteredContent code"> <pre> treeMap1.ChartType = C1.Chart.TreeMapType.Horizontal; </pre> </div> </div> </div> </div> <p> <h3>Vertical</h3> <p>The vertical layout arranges the tree map rectangles adjacent to each other as columns. Here the height of the rectangles is greater than their width.</p> <p><img border="0" alt="Vertical layout of TreeMap" src="images/TreeMap-Vertical.png"></p> <div class="TabContainer TabContainerWidget"> <ul> <li class="FilteredContentVB"><a href="#TabContent-VB">Visual Basic</a></li> <li class="FilteredContentCS"><a href="#TabContent-CS">C#</a></li> </ul> <div id="TabContent-VB" class="FilteredContentVB"> <div class="FilteredContentVB TabContainer TabContainerWidget" data-title="Visual Basic" data-itemid="VB"> <ul> <li><a href="#TabContent-b9cc0364-9a7d-4199-8d71-1a70cab19f07">Visual Basic</a></li> </ul> <div id="TabContent-b9cc0364-9a7d-4199-8d71-1a70cab19f07" class="FilteredContent code"> <pre> treeMap1.ChartType = C1.Chart.TreeMapType.Vertical </pre> </div> </div> </div> <div id="TabContent-CS" class="FilteredContentCS"> <div class="FilteredContentCS TabContainer TabContainerWidget" data-title="C#" data-itemid="CS"> <ul> <li><a href="#TabContent-1b95a70e-5f69-437c-807e-90ba43095c44">C#</a></li> </ul> <div id="TabContent-1b95a70e-5f69-437c-807e-90ba43095c44" class="FilteredContent code"> <pre> treeMap1.ChartType = C1.Chart.TreeMapType.Vertical; </pre> </div> </div> </div> </div> <p>Horizontal and vertical treemaps are helpful in preserving and displaying the order of information.</p> <a name="seealsobookmark"></a> <div class="SectionHeading" id="seealsoSectionHeading"><span class="SectionHeadingIcon"><!-- --></span><span class="SectionHeadingText">See Also</span></div><div id="seealsoSectionContent" class="SectionContent"><div class="SeeAlsoLink"> <a href="TreeMap-Overview.html">TreeMap</a></div> <div class="SeeAlsoLink"> <a href="TreeMap-QuickStart.html">Quick Start</a></div> <div class="SeeAlsoLink"> <a href="TreeMap-KeyFeatures.html">Key Features</a></div> <div class="SeeAlsoLink"> <a href="TreeMap-Elements.html">Elements</a></div> <div class="SeeAlsoLink"> <a href="TreeMap-DataBinding.html">Data Binding</a></div> <div class="SeeAlsoLink"> <a href="TreeMap-Selection.html">Selection</a></div> <h4 class="SeeAlsoSubHeading">Reference</h4><div class="SeeAlsoLink"> <a href="C1.Win.FlexChart.4~C1.Win.Chart.FlexChart~ChartType.html">ChartType Property</a></div> </div> </div> <div id="FooterContent"> <p> </p><p> </p><hr style="height: 1px"><p> Copyright © <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 href="http://our.componentone.com/groups/" target="_blank">Product Support Forum</a> | <a target="_blank" href="http://feedback.componentone.com/forums/255782-winforms-documentation">Documentation Feedback</a> </div> </body> </html>