</ iframe > </noscript> <!-- End Google Tag Manager (noscript) --> <div id="BeforeHeaderContent"> </div> <div id="HeaderContent"> <div id="ProjectTitle">Sparkline for WPF</div> <div id="PageTitle"><div id="PageTitleText">Sparkline Types</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="SparklineforWPF.html">Sparkline for WPF Overview</a> > Features > Sparkline Types</td></tr></table></div> <div id="BodyContent"> <p>Sparkline supports three different chart types, namely Line, Column and Winloss, for visualizing data in different context. For example, Line charts are suitable to visualize continuous data, while Column sparklines are used in scenarios where data comparison is involved. Similarly, a Win-Loss sparkline is best used to visualize a true-false (that is, win-loss) scenario.</p> <h3>Line Sparkline</h3> <p>Line sparkline is drawn as a linear graph that best suits scenarios where a user wants to visualize some trend in the data. Commonly, this type of sparkline is used to visualize sales figures or stock values.</p> <p>Here is how a Sparkline control with <a href="C1.WPF.Sparkline.4~C1.WPF.Sparkline.C1Sparkline~SparklineType.html">SparklineType</a> property set to Line appears.</p> <p align="center"><img border="0" alt="Sparkline with ChartType set to Line" src="images/Sparkline-ChartType-Line.png"></p> <div style="WIDTH: 100%"> <table class="hs-box"> <tbody> <tr> <td class="hs-box-icon" valign="top"><img src="images/hs-note.gif"></td> <td class="hs-box-content" valign="top">By default, Sparkline renders as a Line sparkline.</td> </tr> </tbody> </table> </div> <p> </p> <h3>Column Sparkline</h3> <p>Column sparkline renders data points in columns. This type of sparkline is suitable to visualize comparison in data. In Column Sparkline, positive data points are drawn in upward direction, while negative data points are drawn in downward direction.</p> <p>Here is how a Sparkline control with <a href="C1.WPF.Sparkline.4~C1.WPF.Sparkline.C1Sparkline~SparklineType.html"><font color="#0066CC">SparklineType</font></a> property set to Column appears.</p> <p align="center"><img border="0" alt="Column Sparkline" src="images/Sparkline-ChartType-Column.png"></p> <h3>Win-Loss Sparkline</h3> <p>Win-Loss sparkline displays data points through equal-sized columns drawn in upward and downward direction. This type of Sparkline is used to visualize win/profit-loss scenarios. Columns drawn in upward direction indicate a win, while downward columns indicate a loss.</p> <p>Here is how a Sparkline control with <a href="C1.WPF.Sparkline.4~C1.WPF.Sparkline.C1Sparkline~SparklineType.html"><font color="#0066CC">SparklineType</font></a> property set to Win-Loss appears.</p> <p align="center"><img border="0" alt="Win-Loss Sparkline" src="images/Sparkline-ChartType-WinLoss.png"></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/255782-winforms-documentation">Documentation Feedback</a> </div> </body> </html>