Sparkline for WPF
スタイルと外観

Sparkline provides various properties in the C1Sparkline class to style the appearance of the control to change its look and feel. It allows you to set the color of the axis, data points, series, and much more. Let us discuss how to change the Sparkline appearance and style in the following sections.

Style Markers

By default, the markers are displayed in the default color, i.e., red. However, you can change the color of the markers using MarkersColor property of the C1Sparkline class.

Displays markers in violet color

プログラムから別の色でデータマーカーを強調表示するには、コードで MarkersColor プロパティを設定します。 Here, we used violet color for the markers.

<c1:C1Sparkline x:Name="sparkline" MarkersColor="Violet" Height="150" Width="250" />
sparkline.MarkersColor = Colors.Violet;

Here is a list of properties provided by the C1Sparkline class that can be used to customize marker colors for highlighting specific data points.

Property Description
FirstMarkerColor スパークラインの最初のデータポイントのマーカーの色を指定できます。
LastMarkerColor スパークラインの最後のデータポイントのマーカーの色を指定できます。
HighMarkerColor スパークラインの最大のデータポイントのマーカーの色を指定できます。
LowMarkerColor スパークラインの最小のデータポイントのマーカーの色を指定できます。
NegativeColor スパークラインの負のデータポイントのマーカーの色を指定できます。

Style Axis

Sparkline lets you set the color of the axis based on your requirements. You can use AxisColor property of the C1Sparkline class to set the color of the axis.

Displays axis in green color

The following code shows how to set the axis color.

<c1:C1Sparkline x:Name="sparkline" AxisColor="Green" Height="150" Width="250" />
sparkline.AxisColor = Colors.Green;

Customize Line

Sparkline lets you customize the line by allowing you to set its direction and thickness. You can use LineWeight property of the C1Sparkline class to change the thickness of the line in a line sparkline by specifying the line weight. Additionally, you can set the line direction by using the RightToLeft property.

The following image shows the Sparkline control after setting RightToLeft property in the sample created in Quick Start topic.

Displays sparkline after chaning appearance of line

The following code shows how to change the appearance of line in a sparkline.

<c1:C1Sparkline x:Name="sparkline" LineWeight="5" RightToLeft="True" Height="150" Width="250" />
sparkline.LineWeight = 5;
sparkline.RightToLeft = true;