The Sparkline control supports three different sparkline 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.
The different sparkline types are explained in greater detail below:
| SparklineType | Descriptions |
|---|---|
Line |
A line sparkline consists of data points connected by line segments. It is best suited for visualizing continuous data and can be used to visualize sales figures, stock values or website traffic. By default, Sparkline renders as a line sparkline. |
Column |
Each data point in this type of sparkline is depicted as a vertical rectangle/column. In a column sparkline, positive data points are drawn in upward direction, while negative data points are drawn in downward direction. Column sparklines are used to facilitate comparison and are best suited for visualizing categorial data, for example, to visualize the revenues/profits earned from different departments in a store. |
WinLoss |
WinLoss sparkline displays data points through equal-sized columns drawn in upward and downward direction. The winloss sparkline is only concerned with whether a datapoint is positive or negative, it does not take the relative value of the data point into account. It is used to visualize a win/loss scenario. Columns drawn in upward direction indicate a win, while downward columns indicate a loss. For example, winloss sparkline can be used to track a sports season. |
The C1Sparkline class provides SparklineType property to set the sparkline type in designer or code. The SparklineType property accepts the following values from the SparklineType enumeration:
- Line - Allows you to draw the line sparkline.
- Column - Allows you to draw the column sparkline.
- WinLoss - Allows you to draw the winloss sparkline.
The code example below shows how you can set the SparklineType property to a specific sparkline type.