Interactive Features in UWP Charts (SfChart)
3 Sep 2020 / 24 minutes to read
SfChart
provides interactive features such as zooming, selection, and tracking data points.
The following interactive features are supported in SfChart.
- ToolTip
- TrackBall
- Visual Data Editing
- Zoom and Pan
- Selection
- Resizing Scrollbar
- CrossHair
ToolTip
The ToolTip
feature allows you to display any information over a ChartSeries
. It is used in conjunction with the pointer. It appears when the mouse hovers over any chart segment. It is set to display the metadata of the particular segment or data point.
By default, a small box containing the data points y values are displayed as the ToolTip. The y values vary depending on the ChartSeries
. For example, a single y value is usually displayed in Column and BarSeries
. In the FinancialSeries
, high, low, open, and close values are displayed in ToolTip.
The tooltip will be visible if you enable ShowTooltip
property as in the below code snippet.
<syncfusion:ColumnSeries ShowTooltip="True"
ItemsSource="{Binding Demands}"
XBindingPath="Demand" YBindingPath="Year2010"/>
<syncfusion:ColumnSeries ItemsSource="{Binding Demands}"
ShowTooltip="True"
XBindingPath="Demand" YBindingPath="Year2011"/>
ColumnSeries series1 = new ColumnSeries()
{
ItemsSource = new ViewModel().Demands,
XBindingPath = "Demand",
YBindingPath = "Year2010",
ShowTooltip = true
};
ColumnSeries series2 = new ColumnSeries()
{
ItemsSource = new ViewModel().Demands,
XBindingPath = "Demand",
YBindingPath = "Year2011",
ShowTooltip = true
};
chart.Series.Add(series1);
chart.Series.Add(series2);
Aligning the ToolTip
The tooltip can be aligned with respect to the cursor position using HorizontalAlignment
and VerticalAlignment
properties.
HorizontalAlignment
The following code example illustrates the positioning of tooltip to left of the cursor.
<Chart:ColumnSeries ShowTooltip="True" ItemsSource="{Binding Demands}"
Chart:ChartTooltip.HorizontalAlignment="Left"
XBindingPath="Demand" YBindingPath="Year2010" />
<Chart:ColumnSeries ItemsSource="{Binding Demands}"
Chart:ChartTooltip.HorizontalAlignment="Left" ShowTooltip="True"
XBindingPath="Demand" YBindingPath="Year2011"/>
ColumnSeries series1 = new ColumnSeries()
{
ItemsSource = new ViewModel().Demands,
XBindingPath = "Demand",
YBindingPath = "Year2010",
ShowTooltip = true
};
ChartTooltip.SetHorizontalAlignment(series1, HorizontalAlignment.Left);
ColumnSeries series2 = new ColumnSeries()
{
ItemsSource = new ViewModel().Demands,
XBindingPath = "Demand",
YBindingPath = "Year2011",
ShowTooltip = true
};
ChartTooltip.SetHorizontalAlignment(series2, HorizontalAlignment.Left);
chart.Series.Add(series1);
chart.Series.Add(series2);
NOTE
By default the
HorizontalAlignment
is center for the tooltip.
VerticalAlignment
The following code example illustrates the positioning of tooltip to bottom of the cursor.
<Chart:ColumnSeries ShowTooltip="True" ItemsSource="{Binding Demands}"
Chart:ChartTooltip.VerticalAlignment="Bottom"
XBindingPath="Demand" YBindingPath="Year2010" />
<Chart:ColumnSeries ItemsSource="{Binding Demands}"
Chart:ChartTooltip.VerticalAlignment="Bottom"
ShowTooltip="True" XBindingPath="Demand" YBindingPath="Year2011"/>
ColumnSeries series1 = new ColumnSeries()
{
ItemsSource = new ViewModel().Demands,
XBindingPath = "Demand",
YBindingPath = "Year2010",
ShowTooltip = true
};
ChartTooltip.SetVerticalAlignment(series1, VerticalAlignment.Bottom);
ColumnSeries series2 = new ColumnSeries()
{
ItemsSource = new ViewModel().Demands,
XBindingPath = "Demand",
YBindingPath = "Year2011",
ShowTooltip = true
};
ChartTooltip.SetVerticalAlignment(series2, VerticalAlignment.Bottom);
chart.Series.Add(series1);
chart.Series.Add(series2);
ToolTipMargin
You can also set the distance for the margin to be positioned from the cursor using ToolTipMargin
property as in the below code snippet.
<Chart:ColumnSeries Label="2010" ShowTooltip="True"
ItemsSource="{Binding Demands}" Interior="#777777"
Chart:ChartTooltip.TooltipMargin="25"
XBindingPath="Demand" YBindingPath="Year2010" />
<Chart:ColumnSeries Label="2011" ItemsSource="{Binding Demands}"
Interior="#4A4A4A"
Chart:ChartTooltip.TooltipMargin="25"
ShowTooltip="True" XBindingPath="Demand" YBindingPath="Year2011"/>
ColumnSeries series1 = new ColumnSeries()
{
ItemsSource = new ViewModel().Demands,
XBindingPath = "Demand",
YBindingPath = "Year2010",
ShowTooltip = true,
Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)),
Label = "2010"
};
ChartTooltip.SetTooltipMargin(series1, new Thickness(25));
ColumnSeries series2 = new ColumnSeries()
{
ItemsSource = new ViewModel().Demands,
XBindingPath = "Demand",
YBindingPath = "Year2011",
ShowTooltip = true,
Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)),
Label = "2011"
};
ChartTooltip.SetTooltipMargin(series2, new Thickness(25));
chart.Series.Add(series1);
chart.Series.Add(series2);
NOTE
By default the
VerticalAlignment
of the Tooltip is Top
VerticalOffset and HorizontalOffset
The tooltip can be positioned at a particular distance from the cursor horizontally using HorizontalOffset
and vertically using VerticalOffset
properties.
<Chart:ColumnSeries ShowTooltip="True"
ItemsSource="{Binding Demands}"
Chart:ChartTooltip.HorizontalOffset="40"
Chart:ChartTooltip.VerticalOffset="40"
XBindingPath="Demand" YBindingPath="Year2010" />
<Chart:ColumnSeries ItemsSource="{Binding Demands}"
Chart:ChartTooltip.HorizontalOffset="40"
Chart:ChartTooltip.VerticalOffset="40" ShowTooltip="True"
XBindingPath="Demand" YBindingPath="Year2011"/>
ColumnSeries series1 = new ColumnSeries()
{
ItemsSource = new ViewModel().Demands,
XBindingPath = "Demand",
YBindingPath = "Year2010",
ShowTooltip = true,
Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)),
Label = "2010"
};
ChartTooltip.SetHorizontalOffset(series1, 40);
ChartTooltip.SetVerticalOffset(series1, 40);
ColumnSeries series2 = new ColumnSeries()
{
ItemsSource = new ViewModel().Demands,
XBindingPath = "Demand",
YBindingPath = "Year2011",
ShowTooltip = true,
Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)),
Label = "2011"
};
ChartTooltip.SetHorizontalOffset(series2, 40);
ChartTooltip.SetVerticalOffset(series2, 40);
chart.Series.Add(series1);
chart.Series.Add(series2);
ToolTip Duration
This property ShowDuration
in ChartToolTip
sets the duration time for tooltip to be displayed in milliseconds.
The following code example demonstrates the duration of the tooltip set as 5 seconds.
<Chart:ColumnSeries ShowTooltip="True"
Chart:ChartTooltip.ShowDuration="5000"
ItemsSource="{Binding Demands}" Interior="#777777"
XBindingPath="Demand" YBindingPath="Year2010">
</Chart:ColumnSeries>
ColumnSeries series = new ColumnSeries()
{
ItemsSource = new ViewModel().Demands,
XBindingPath = "Demand",
YBindingPath = "Year2010",
ShowTooltip = true,
Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)),
Label = "2010"
};
ChartTooltip.SetShowDuration(series, 5000);
chart.Series.Add(series);
NOTE
The tooltip by default will be displayed for 1000 milliseconds.
Show delay
ToolTip also has support for delay the time to display by setting SetInitialShowDelay
property in milliseconds.
The following code example demonstrates the tooltip will be delayed for 1 second at the before display.
<Chart:ColumnSeries Label="2010" ShowTooltip="True"
Chart:ChartTooltip.InitialShowDelay="1000"
ItemsSource="{Binding Demands}" Interior="#777777"
XBindingPath="Demand" YBindingPath="Year2010" />
ColumnSeries series = new ColumnSeries()
{
ItemsSource = new ViewModel().Demands,
XBindingPath = "Demand",
YBindingPath = "Year2010",
ShowTooltip = true,
Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)),
Label = "2010"
};
ChartTooltip.SetInitialShowDelay(series, 1000);
chart.Series.Add(series);
Animation for ToolTip
You can also provide animation effects for tooltip by setting EnableAnimation
property as true as shown in the below code snippet.
<Chart:ColumnSeries Label="2010" ShowTooltip="True"
Chart:ChartTooltip.EnableAnimation="True"
ItemsSource="{Binding Demands}" Interior="#777777"
XBindingPath="Demand" YBindingPath="Year2010">
</Chart:ColumnSeries>
ColumnSeries series = new ColumnSeries()
{
ItemsSource = new ViewModel().Demands,
XBindingPath = "Demand",
YBindingPath = "Year2010",
ShowTooltip = true,
Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)),
Label = "2010"
};
ChartTooltip.SetEnableAnimation(series, true);
chart.Series.Add(series);
Customizing the Tooltip
ToolTipTemplate
property allows you to customize the default appearance of the tooltip as illustrated in the below code snippet.
<syncfusion:ColumnSeries ShowTooltip="True"
ItemsSource="{Binding Demands}"
TooltipTemplate="{StaticResource tooltip}"
XBindingPath="Demand" YBindingPath="Year2010" />
<syncfusion:ColumnSeries ItemsSource="{Binding Demands}"
TooltipTemplate="{StaticResource tooltip}"
ShowTooltip="True" XBindingPath="Demand" YBindingPath="Year2011"/>
ColumnSeries series1 = new ColumnSeries()
{
ItemsSource = new ViewModel().Demands,
XBindingPath = "Demand",
YBindingPath = "Year2010",
Label = "2010",
ShowTooltip = true,
TooltipTemplate = chart.Resources["tooltipTemplate"] as DataTemplate,
Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77))
};
ColumnSeries series2 = new ColumnSeries()
{
ItemsSource = new ViewModel().Demands,
XBindingPath = "Demand",
YBindingPath = "Year2011",
Label = "2011",
ShowTooltip = true,
TooltipTemplate = chart.Resources["tooltipTemplate"] as DataTemplate,
Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77))
};
chart.Series.Add(series1);
chart.Series.Add(series2);
TrackBall
ChartTrackBallBehavior
enables you to track a data point closer to the cursor position. The x values are determined from the position of the vertical line in the axis and y values are determined from the points touching the vertical line in the series.
Adding TrackBall to the SfChart
You can create an instance ChartTrackBallBehavior
and add it to the Behaviors collection.
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartTrackBallBehavior>
</syncfusion:ChartTrackBallBehavior>
</syncfusion:SfChart.Behaviors>
SfChart chart = new SfChart();
ChartTrackBallBehavior behavior = new ChartTrackBallBehavior();
chart.Behaviors.Add(behavior);
To view the TrackBall in the particular Axis you have to enable the ShowTrackBallInfo
property in that axis as in the below code snippet.
<syncfusion:SfChart.PrimaryAxis>
<syncfusion:CategoryAxis ShowTrackBallInfo="True" />
</syncfusion:SfChart.PrimaryAxis>
ChartTrackBallBehavior behavior = new ChartTrackBallBehavior();
chart.Behaviors.Add(behavior);
chart.PrimaryAxis = new CategoryAxis()
{
ShowTrackBallInfo = true
};
The default appearance of the trackball in primary axis (CategoryAxis).
The Trackball is composed of the following parts.
-
Vertical Line
-
Symbol
-
Axis Label
-
Series Label
Vertical line
The vertical line in the trackball is visible when you initialize the TrackBallBehavior.If you want to collapse the visibility of the trackball line then you have to set ShowLine
to false.
The following code snippet illustrates the collapsing the visibility of trackball line.
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartTrackBallBehavior ShowLine="False" />
</syncfusion:SfChart.Behaviors>
ChartTrackBallBehavior behavior = new ChartTrackBallBehavior()
{
ShowLine = false
};
chart.Behaviors.Add(behavior);
Customization of TrackBall line
SfChart
allows you to customize the appearance of trackball vertical line using LineStyle
property.
The following code snippet illustrates the customization of trackball line.
<syncfusion:SfChart x:Name="chart">
<syncfusion:SfChart.Resources>
<Style TargetType="Line" x:Key="lineStyle">
<Setter Property="StrokeDashArray" Value="5,1,2"/>
<Setter Property="Stroke" Value="Red"/>
<Setter Property="StrokeThickness" Value="1.2"/>
</Style>
</syncfusion:SfChart.Resources>
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartTrackBallBehavior LineStyle="{StaticResource lineStyle}"/>
</syncfusion:SfChart.Behaviors>
</syncfusion:SfChart>
ChartTrackBallBehavior trackball = new ChartTrackBallBehavior()
{
LineStyle = chart.Resources["lineStyle"] as Style
};
chart.Behaviors.Add(trackball);
Symbol
By default the trackball symbol is displayed as ellipse, to change the default style of the symbol using ChartTrackBallStyle
property.
<syncfusion:SfChart x:Name="chart">
<syncfusion:SfChart.Resources>
<Style TargetType="syncfusion:ChartTrackBallControl" x:Key="trackballStyle">
<Setter Property="Background" Value="red"></Setter>
</Style>
</syncfusion:SfChart.Resources>
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartTrackBallBehavior ChartTrackBallStyle="{StaticResource trackballStyle}"/>
</syncfusion:SfChart.Behaviors>
</syncfusion:SfChart>
SfChart chart = new SfChart();
ChartTrackBallBehavior trackball = new ChartTrackBallBehavior()
{
ChartTrackBallStyle = chart.Resources["trackballStyle"] as Style
};
chart.Behaviors.Add(trackball);
Axis label
The axis label will be viewed when the ShowTrackBallInfo
property is set to true. If you want to collapse the visibility of axis label in trackball then you have to set ShowTrackballInfo
as false.
NOTE
By default the value of
ShowTrackBallInfo
is false.
Alignment of axis label
The alignment of the axis label while moving trackball can be defined using AxisLabelAlignment
property.
Auto
–Axis label is aligned in Near/Far positions based on the trackball movement.
Far
-Axis label is positioned far from the position of trackball.
Near
- Axis label is near to the position of trackball.
Center
-Axis label is aligned to the center of the trackball. By default the axis label will positioned in center.
Far
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartTrackBallBehavior AxisLabelAlignment="Far">
</syncfusion:ChartTrackBallBehavior>
</syncfusion:SfChart.Behaviors>
ChartTrackBallBehavior behavior = new ChartTrackBallBehavior()
{
AxisLabelAlignment = ChartAlignment.Far
};
chart.Behaviors.Add(behavior);
Near
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartTrackBallBehavior AxisLabelAlignment="Near" >
</syncfusion:ChartTrackBallBehavior>
</syncfusion:SfChart.Behaviors>
ChartTrackBallBehavior behavior = new ChartTrackBallBehavior()
{
AxisLabelAlignment = ChartAlignment.Near
};
chart.Behaviors.Add(behavior);
Customization of axis label
You can change the default appearance of the axis label in trackball using TrackballLabelTemplate
property in ChartAxis
as in the below code snippet.
<syncfusion:SfChart x:Name="chart">
<syncfusion:SfChart.Resources>
<DataTemplate x:Key="labelTemplate">
<Border CornerRadius="4" BorderThickness="1" BorderBrush="Black"
Background="BlueViolet" Margin="8">
<TextBlock Foreground="White" Text="{Binding ValueX}"/>
</Border>
</DataTemplate>
</syncfusion:SfChart.Resources>
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartTrackBallBehavior />
</syncfusion:SfChart.Behaviors>
<syncfusion:SfChart.PrimaryAxis>
<syncfusion:CategoryAxis ShowTrackBallInfo="True"
LabelTemplate="{StaticResource labelTemplate}"/>
</syncfusion:SfChart.PrimaryAxis>
</syncfusion:SfChart>
SfChart chart = new SfChart();
chart.PrimaryAxis = new NumericalAxis()
{
ShowTrackBallInfo = true,
TrackBallLabelTemplate = chart.Resources["labelTemplate"] as DataTemplate
};
Series label
When the trackball is hovered over you can view the label is also displayed over the series in addition the axis label.
ShowTrackballInfo
ShowTrackballInfo
property of Cartesian Series
allows user to enable or disable the trackball
label for corresponding series. By default, ShowTrackballInfo
property is true. The property can be set as shown in the below code example:
<syncfusion:SfChart >
<syncfusion:SplineSeries Interior="#4a4a4a"/>
<syncfusion:SplineSeries Interior="#7f7f7f" ShowTrackballInfo="False"/>
<syncfusion:SplineSeries Interior="#bcbcbc"/>
</syncfusion:SfChart>
SplineSeries series1 = new SplineSeries()
{
Interior = new SolidColorBrush(Color.FromArgb(0, 0x4a, 0x4a, 0x4a))
};
chart.Series.Add(series1);
SplineSeries series2 = new SplineSeries()
{
Interior = new SolidColorBrush(Color.FromArgb(0, 0x7f, 0x7f, 0x7f)),
ShowTrackballInfo = false
};
chart.Series.Add(series2);
SplineSeries series3 = new SplineSeries()
{
Interior = new SolidColorBrush(Color.FromArgb(0, 0xbc, 0xbc, 0xbc))
};
chart.Series.Add(series3);
Alignment of series label
The trackball label displayed over the series can be aligned using LabelHorizontalAlignment
and LabelVerticalAlignment
properties. By default the series label will be horizontally aligned to the left and vertically to the top.
The following code snippet illustrates the aligning the series label to the center of the trackball.
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartTrackBallBehavior LabelHorizontalAlignment="Center"
LabelVerticalAlignment="Center">
</syncfusion:ChartTrackBallBehavior>
</syncfusion:SfChart.Behaviors>
ChartTrackBallBehavior behavior = new ChartTrackBallBehavior()
{
LabelHorizontalAlignment = ChartAlignment.Center,
LabelVerticalAlignment = ChartAlignment.Center
};
chart.Behaviors.Add(behavior);
LabelDisplayMode
When there is a multiple series, by default the trackball series label will be displayed only for the nearest point. If you want to display all the y values with respect to the x value then the LabelDisplayMode
property is set to FloatAllPoints
.
FloatAllPoints
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartTrackBallBehavior LabelDisplayMode="FloatAllPoints" >
</syncfusion:ChartTrackBallBehavior>
</syncfusion:SfChart.Behaviors>
ChartTrackBallBehavior behavior = new ChartTrackBallBehavior()
{
LabelDisplayMode = TrackballLabelDisplayMode.FloatAllPoints
};
chart.Behaviors.Add(behavior);
NearestPoint
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartTrackBallBehavior LabelDisplayMode="NearestPoint" >
</syncfusion:ChartTrackBallBehavior>
</syncfusion:SfChart.Behaviors>
ChartTrackBallBehavior behavior = new ChartTrackBallBehavior()
{
LabelDisplayMode = TrackballLabelDisplayMode.NearestPoint
};
chart.Behaviors.Add(behavior);
TrackBallLabelTemplate
TrackBallLabelTemplate
property in ChartSeries
allows you to customize the appearance of series label in trackball.
<syncfusion:SfChart x:Name="chart">
<syncfusion:SfChart.Resources>
<DataTemplate x:Key="labelTemplate">
<Border CornerRadius="5" BorderThickness="1"
BorderBrush="Black" Background="BlueViolet" Margin="8">
<TextBlock Foreground="White" Text="{Binding ValueY}"/>
</Border>
</DataTemplate>
</syncfusion:SfChart.Resources>
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartTrackBallBehavior />
</syncfusion:SfChart.Behaviors>
<syncfusion:ColumnSeries Label="2010"
Interior="#4A4A4A"
ItemsSource="{Binding Demands}"
XBindingPath="Demand"
YBindingPath="Year2010"
TrackBallLabelTemplate="{StaticResource labelTemplate}"/>
</syncfusion:SfChart>
SfChart chart = new SfChart();
ChartTrackBallBehavior trackball = new ChartTrackBallBehavior();
chart.Behaviors.Add(trackball);
ColumnSeries series = new ColumnSeries()
{
ItemsSource = new ViewModel().Demands,
XBindingPath = "Demand",
YBindingPath = "Year2010",
TrackBallLabelTemplate = chart.Resources["labelTemplate"] as DataTemplate,
Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A))
};
chart.Series.Add(series);
Applying Palette to the Series Label
Palette
or Interior
color of the Series
is applied to the series label by setting UseSeriesPalette
to True as shown in the below code snippet.
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartTrackBallBehavior UseSeriesPalette="True" >
</syncfusion:ChartTrackBallBehavior>
</syncfusion:SfChart.Behaviors>
ChartTrackBallBehavior behavior = new ChartTrackBallBehavior()
{
UseSeriesPalette = true
};
chart.Behaviors.Add(behavior);
Events
The following events are available in ChartTrackBallBehavior,
PositionChanging
The PositionChanging
event occurs when the trackball
position is changing from current mouse position to new mouse position. This argument contains the following information.
-
Cancel
- Gets or sets a value that indicates whether to show the trackball on new mouse pointer position. -
PointInfos
- Gets or sets the currentChartPointInfo
.
PositionChanged
The PositionChanged
event occurs when the trackball
position is changed from current mouse position to new mouse position. This argument contains the following information.
-
PreviousPointInfos
- Gets or sets the previousChartPointInfo
. -
CurrentPointInfos
- Gets or sets the currentChartPointInfo
.
The ChartPointInfo
class contains the following properties to customize the appearance of trackball label:
-
Axis
- Gets the associated axis in which the trackball is activated. -
BaseX
- Gets the x-initial coordinate of the trackball label. -
BaseY
- Gets the y-initial coordinate of the trackball label. -
BorderBrush
- Gets or sets the border color of the trackball label. -
Close
- Gets the close value of the trackball label when it is applicable. -
Foreground
- Gets or sets the foreground color of the trackball label. -
High
- Gets the high value of the trackball label when it is applicable. -
Interior
- Gets or sets the interior color of the trackball label. -
Item
- Gets the respective underlying object of the data in which the trackball is activated. -
Low
- Gets the low value of the trackball label when it is applicable. -
LowerLine
- Gets the y-value of the lower line in indicator. -
Median
- Gets the median value when it is applicable. -
Open
- Gets the open value of the trackball label when it is applicable. -
PolygonPoints
- Gets the point collection to render trackball. -
Series
- Gets the associated series in which the trackball is activated. -
SeriesValues
- Gets the SeriesValues in which the trackball is activated. -
SignalLine
- Gets the y-value of the signal line in indicator. -
UpperLine
- Gets the y-value of the upper line in indicator. -
ValueX
- Gets the x-value of the trackball label. -
ValueY
- Gets the y-value of the trackball label. -
X
- Gets the x-coordinate of the trackball label. -
Y
- Gets the y-coordinate of the trackball label.
Visual data editing
SfChart
has a feature that allows you to edit an entire series or a single data point at run time by dragging the single point or the series as a whole.
Segment dragging
Segment Dragging defines the dragging a particular point or segment based on the series type. The segment dragging can be enabled using EnableSegmentDragging
property as true.
LineSeries
<syncfusion:LineSeries Label="2010" EnableSegmentDragging="True"
XBindingPath="Demand" Interior="#777777"
ItemsSource="{Binding Demands}"
YBindingPath="Year2010">
</syncfusion:LineSeries>
LineSeries series = new LineSeries()
{
ItemsSource = new ViewModel().Demands,
XBindingPath = "Demand",
YBindingPath = "Year2010",
EnableSegmentDragging = true,
Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)),
Label = "2010"
};
chart.Series.Add(series)
ColumnSeries
<syncfusion:ColumnSeries Label="2010" EnableDragTooltip="True" EnableSegmentDragging="True"
XBindingPath="Demand" Interior="#777777"
ItemsSource="{Binding Demands}"
YBindingPath="Year2010">
</syncfusion:ColumnSeries>
ColumnSeries series = new ColumnSeries()
{
ItemsSource = new ViewModel().Demands,
XBindingPath = "Demand",
YBindingPath = "Year2010",
EnableSegmentDragging = true,
EnableDragTooltip = true,
Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)),
Label = "2010"
};
chart.Series.Add(series)
ScatterSeries
This series supports dragging in both the x and y co-ordinates. The dragging co – ordinates can be set by using the enum property DragDirection
.
<syncfusion:ScatterSeries ItemsSource="{Binding Data}" XBindingPath="Index"
YBindingPath="Value" EnableSegmentDragging="True"
Interior="#4A4A4A" DragDirection="XY" />
ScatterSeries scatterSeries = new ScatterSeries()
{
ItemsSource = new ViewModel().Data,
XBindingPath = "Index",
YBindingPath = "Value",
Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)),
EnableSegmentDragging = true
};
chart.Series.Add(series)
NOTE
By default the
DragDirection
of the scatter series is XY.
Series dragging
SfChart
provides support to drag the LineSeries
and SplineSeries
. This allows the series to move to a new position by dragging. To enable the series dragging, you have to set EnableSeriesDragging
property to true.
The following code snippet explains the series dragging feature in LineSeries
<syncfusion:LineSeries Label="2010" EnableDragTooltip="True" EnableSeriesDragging="True"
XBindingPath="Demand" Interior="#777777" ItemsSource="{Binding Demands}"
YBindingPath="Year2010"/>
LineSeries series = new LineSeries()
{
ItemsSource = new ViewModel().Demands,
XBindingPath = "Demand",
YBindingPath = "Year2010",
EnableSeriesDragging = true,
EnableDragTooltip = true ,
Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)),
Label = "2010"
};
chart.Series.Add(series);
NOTE
In line and Spline Series if segment and series dragging is enabled, the series dragging is having higher priority over segment dragging.
Adding ToolTip for dragging
While the series or segment is dragged by default you can view the tooltip showing the new y value. To disable the tooltip while dragging you have to set the EnableDragToolTip
as false.
<syncfusion:LineSeries Label="2010" EnableSegmentDragging="True" EnableDragTooltip="False"
XBindingPath="Demand" Interior="#777777"
Focusable="False"
ItemsSource="{Binding Demands}"
</syncfusion:LineSeries>
LineSeries series = new LineSeries()
{
ItemsSource = new ViewModel().Demands,
XBindingPath = "Demand",
YBindingPath = "Year2010",
EnableSeriesDragging = true,
EnableDragTooltip = true ,
Focusable = false,
Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)),
Label = "2010"
};
chart.Series.Add(series);
DragTooltipTemplate
DragTooltipTemplate
property allows you to customize the default appearance of the tooltip while dragging.
<syncfusion:SfChart x:Name="chart">
<syncfusion:SfChart.Resources>
<DataTemplate x:Key="tooltipTemplate">
<Border CornerRadius="4" BorderBrush="Black"
BorderThickness="1" Background="CadetBlue"
Margin="0,0,0,15">
<TextBlock FontSize="12" Text="{Binding NewValue}"
Width="35" Foreground="White"
Margin="2"></TextBlock>
</Border>
</DataTemplate>
</syncfusion:SfChart.Resources>
<syncfusion:LineSeries Label="2010" EnableSegmentDragging="True"
Interior="#777777" Focusable="False"
XBindingPath="Demand" ItemsSource="{Binding Demands}"
YBindingPath="Year2010"
DragTooltipTemplate="{StaticResource tooltipTemplate }">
</syncfusion:LineSeries>
</syncfusion:SfChart>
ColumnSeries series = new ColumnSeries()
{
ItemsSource = new ViewModel().Demands,
XBindingPath = "Demand",
YBindingPath = "Year2010",
Focusable = false,
EnableSegmentDragging = true,
DragTooltipTemplate = chart.Resources["tooltipTemplate"] as DataTemplate,
Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77))
};
chart.Series.Add(series);
Drag Tooltip style
The dragging tooltip can be customized by using the DragTooltipStyle
property of the series.
The following are the API’s in ChartDragTooltipStyle.
FontFamily
– Gets or sets the font family for dragging tooltip text.
FontSize
– Gets or sets the font size for dragging tooltip text.
FontStyle
– Gets or sets the font style for dragging tooltip text.
Foreground
– Gets or sets the brush for dragging tooltip text.
Background
– Gets or sets the background brush for dragging tooltip.
<syncfusion:LineSeries.DragTooltipStyle>
<syncfusion:ChartDragTooltipStyle FontFamily="Calibri" FontSize="14"
FontStyle="Italic" Background="DarkGray"
Foreground="Black" />
</syncfusion:LineSeries.DragTooltipStyle>
this.lineSeries.DragTooltipStyle = new ChartDragTooltipStyle()
{
FontFamily = new FontFamily("Calibri"),
FontSize = 14,
FontStyle = FontStyle.Italic,
Background = new SolidColorBrush(Colors.DarkGray),
Foreground = new SolidColorBrush(Colors.Black)
};
Rounding Off the dragged value
To round off the dragged values, you have to set the SnapToPoint
and RoundToDecimal
properties. The following code snippet explains rounding the dragged y value to 2 decimal digits.
<syncfusion:SplineSeries EnableSegmentDragging="True"
SnapToPoint="Round" RoundToDecimal="2" YBindingPath = "Year2010"
UpdateSource="True" XBindingPath="Demand" Interior="#777777"
ItemsSource="{Binding Demands}"
</syncfusion:SplineSeries>
SplineSeries series = new SplineSeries()
{
ItemsSource = new ViewModel().Demands,
XBindingPath = "Demand",
YBindingPath = "Year2010",
EnableSegmentDragging = true,
UpdateSource = true ,
RoundToDecimal = 2,
SnapToPoint = SnapToPoint.Round,
Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77))
};
chart.Series.Add(series);
Updating the dragged values to the source
When dragging the series or segment at run time, to update the underlying data based on the values you have to set the UpdateSource
property to true as in the below code snippet.
<syncfusion:SplineSeries EnableSegmentDragging="True" UpdateSource="True"
XBindingPath="Demand" Interior="#777777"
ItemsSource="{Binding Demands}"
YBindingPath="Year2010">
</syncfusion:SplineSeries>
SplineSeries series = new SplineSeries()
{
ItemsSource = new ViewModel().Demands,
XBindingPath = "Demand",
YBindingPath = "Year2010",
EnableSegmentDragging = true,
UpdateSource = true ,
Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77))
};
chart.Series.Add(series);
Drag cancel using KeyModifiers
While you are dragging you can set the KeyModifiers
to cancel the drag by setting DragCancelKeyModifier
property as in the below code snippet.
<syncfusion:SplineSeries
EnableSegmentDragging="True"
DragCancelKeyModifiers="Alt"
UpdateSource="True"
XBindingPath="Demand"
ItemsSource="{Binding Demands}"
YBindingPath="Year2010">
</syncfusion:SplineSeries>
SplineSeries series = new SplineSeries()
{
ItemsSource = new ViewModel().Demands,
XBindingPath = "Demand",
YBindingPath = "Year2010",
EnableSegmentDragging = true,
DragCancelKeyModifiers = ModifierKeys.Alt,
UpdateSource = true ,
Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77))
};
chart.Series.Add(series);
Events
Series with visual data editing has support for following events,
-
DragStart
- Occurs when segment/series drag started. -
DragDelta
- Occurs when segment/series dragging. -
DragEnd
- Occurs when segment/series drag end. -
PreviewDragEnd
- Occurs before drag end triggered. -
SegmentEnter
- Occurs when mouse enters in segment.
Zoom and Pan
SfChart
allows you to zoom the chart area with the help of the zoom feature. This behavior is mostly used to view the data point in the specific area, when there are a number of data points inside the chart.
Zooming and panning provides you to take a close-up look of the data point plotted in the series
Adding zooming/panning to the SfChart
You can create an instance ChartZoomPanBehavior
and add it to the Behaviors
collection.
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartZoomPanBehavior >
</syncfusion:ChartZoomPanBehavior>
</syncfusion:SfChart.Behaviors>
ChartZoomPanBehavior zooming = new ChartZoomPanBehavior();
chart.Behaviors.Add(zooming);
Zooming the ChartArea
Zooming by setting ZoomFactor and ZoomPosition
ZoomFactor
defines the percentage of visible range from the total range of axis values. ZoomPosition
defines the ranges of values that need to be displayed as a result of ZoomFactor
.
The following code example demonstrates the zooming the chart axis by setting zoom position and zoom factor.
<syncfusion:SfChart.PrimaryAxis>
<syncfusion:CategoryAxis
ShowGridLines="False"
ZoomFactor="0.3" ZoomPosition="0.1" />
</syncfusion:SfChart.PrimaryAxis>
chart.PrimaryAxis = new CategoryAxis()
{
ShowGridLines = false,
ZoomFactor = 0.1,
ZoomPosition = 0.3
};
Mouse wheel zooming
Zooming can be performed by mouse wheel action by setting EnableMouseWheelZooming
property to true.
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartZoomPanBehavior EnableMouseWheelZooming="True" >
</syncfusion:ChartZoomPanBehavior>
</syncfusion:SfChart.Behaviors>
ChartZoomPanBehavior zooming = new ChartZoomPanBehavior()
{
EnableMouseWheelZooming = true
};
chart.Behaviors.Add(zooming);
Pinch Zooming
If you want to zoom using fingers by touch, then you have to set EnablePinchZooming
property to true as shown in the below code snippet.
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartZoomPanBehavior EnablePinchZooming="True" >
</syncfusion:ChartZoomPanBehavior>
</syncfusion:SfChart.Behaviors>
ChartZoomPanBehavior zooming = new ChartZoomPanBehavior()
{
EnablePinchZooming = true
};
chart.Behaviors.Add(zooming);
Zooming relative to cursor
To enable the zooming relative to cursor position you can set ZoomRelativeToCursor
property to true. This support is applicable only for mouse wheel zooming.
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartZoomPanBehavior ZoomRelativeToCursor="True" >
</syncfusion:ChartZoomPanBehavior>
</syncfusion:SfChart.Behaviors>
ChartZoomPanBehavior zooming = new ChartZoomPanBehavior()
{
ZoomRelativeToCursor = true
};
chart.Behaviors.Add(zooming);
SelectionZooming
SelectionZooming helps us to zoom a particular area by selecting the region using rectangle.To enable the selection ,you have to set EnableSelectionZooming
property to true.
The following code snippet demonstrated selection zooming.
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartZoomPanBehavior EnableSelectionZooming="True" >
</syncfusion:ChartZoomPanBehavior>
</syncfusion:SfChart.Behaviors>
ChartZoomPanBehavior zooming = new ChartZoomPanBehavior()
{
EnableSelectionZooming = true
};
chart.Behaviors.Add(zooming);
Customization of Selection Rectangle
Selection Rectangle can be customized by setting the following properties
-
Fill
-Represents the brush filled in selection rectangle. -
Stroke
- Represents the outer line color of selection rectangle. -
StrokeThickness
- Represents the selection rectangle outer line thickness.
The following code example demonstrates the customization of selection rectangle
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartZoomPanBehavior EnableSelectionZooming="True"
Fill="LightBlue" Stroke="Blue" StrokeThickness="2" >
</syncfusion:ChartZoomPanBehavior>
</syncfusion:SfChart.Behaviors>
ChartZoomPanBehavior zooming = new ChartZoomPanBehavior()
{
EnableSelectionZooming = true,
Fill = new SolidColorBrush(Colors.LightBlue),
Stroke = new SolidColorBrush(Colors.Blue),
StrokeThickness = 2
};
chart.Behaviors.Add(zooming);
Zooming mode
The zooming can be done both horizontally and vertically. The zooming direction is defined using ZoomMode
property.
Zooming along X
axis
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartZoomPanBehavior EnableSelectionZooming="True" ZoomMode="X">
</syncfusion:ChartZoomPanBehavior>
</syncfusion:SfChart.Behaviors>
ChartZoomPanBehavior zooming = new ChartZoomPanBehavior()
{
EnableSelectionZooming = true,
ZoomMode = ZoomMode.X
};
chart.Behaviors.Add(zooming);
Zooming along Y axis
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartZoomPanBehavior EnableSelectionZooming="True" ZoomMode="Y">
</syncfusion:ChartZoomPanBehavior>
</syncfusion:SfChart.Behaviors>
ChartZoomPanBehavior zooming = new ChartZoomPanBehavior()
{
EnableSelectionZooming = true,
ZoomMode = ZoomMode.Y
};
chart.Behaviors.Add(zooming);
Maximum zoom level
You can also limit the zooming by setting MaximumZoomLevel
property as shown in the below code snippet.
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartZoomPanBehavior EnableSelectionZooming="True" MaximumZoomLevel="100">
</syncfusion:ChartZoomPanBehavior>
</syncfusion:SfChart.Behaviors>
ChartZoomPanBehavior zooming = new ChartZoomPanBehavior()
{
EnableSelectionZooming = true,
MaximumZoomLevel = 100
};
chart.Behaviors.Add(zooming);
Zooming Toolbar
Zooming Toolbar encompassed with buttons for performing actions like Zoom In/Out, Reset, Pan, etc. You can add the zooming toolbar to the chart area by setting EnableZoomingToolBar
property to True.
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartZoomPanBehavior EnableZoomingToolBar="True">
</syncfusion:ChartZoomPanBehavior>
</syncfusion:SfChart.Behaviors>
ChartZoomPanBehavior zooming = new ChartZoomPanBehavior()
{
EnableZoomingToolBar = true
};
chart.Behaviors.Add(zooming);
The following image depicts the default view of the zooming toolbar.
Positioning the zooming toolbar
Zooming Toolbar can be positioned using the HorizontalPosition
and VerticalPosition
properties.The following code demonstrates the positioning of the toolbar.
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartZoomPanBehavior EnableZoomingToolBar="True" HorizontalPosition="Left" VerticalPosition="Bottom">
</syncfusion:ChartZoomPanBehavior>
</syncfusion:SfChart.Behaviors>
ChartZoomPanBehavior zooming = new ChartZoomPanBehavior()
{
EnableZoomingToolBar = true,
HorizontalPosition = HorizontalAlignment.Left,
VerticalPosition = VerticalAlignment.Bottom
};
chart.Behaviors.Add(zooming);
Customization of zooming Toolbar
Zooming Toolbar can be customized using the following API’s
-
ToolBarBackground
- Represents the zooming toolkit background. -
ToolBarItems
- Collection value that contains zooming toolkit items. -
ToolBarItemMargin
-Represents the margin for the toolbar item. -
ToolBarItemWidth
-Represents the width of the toolbar item -
ToolBarItemHeight
-Represents the height of the toolbar item
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartZoomPanBehavior EnableZoomingToolBar="True" ToolBarItemHeight="15"
ToolBarItemWidth="15" ToolBarBackground="Black"
ToolBarItems="All" ToolBarItemMargin="10">
</syncfusion:ChartZoomPanBehavior>
</syncfusion:SfChart.Behaviors>
ChartZoomPanBehavior zooming = new ChartZoomPanBehavior()
{
EnableZoomingToolBar = true,
ToolBarBackground = new SolidColorBrush(Colors.Black),
ToolBarItemHeight = 15,
ToolBarItemWidth = 15,
ToolBarItemMargin = new Thickness(10),
ToolBarItems = ZoomToolBarItems.All
};
chart.Behaviors.Add(zooming);
Orientation of zooming Toolbar
Zooming toolbar orientation is horizontal by default.You can change the orientation to vertical by setting
ToolBarOrientation
property to Vertical.
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartZoomPanBehavior EnableZoomingToolBar="True"
ToolBarOrientation="Vertical">
</syncfusion:ChartZoomPanBehavior>
</syncfusion:SfChart.Behaviors>
ChartZoomPanBehavior zooming = new ChartZoomPanBehavior()
{
EnableZoomingToolBar = true,
ToolBarOrientation = Orientation.Vertical
};
chart.Behaviors.Add(zooming);
Panning the chart area
Panning feature allows moving the visible area of the chart when it is zoomed in. To enable panning, you have to set EnablePanning
property to true.
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartZoomPanBehavior EnableMouseWheelZooming="True" EnablePanning="True">
</syncfusion:ChartZoomPanBehavior>
</syncfusion:SfChart.Behaviors>
ChartZoomPanBehavior zooming = new ChartZoomPanBehavior()
{
EnableMouseWheelZooming = true,
EnablePanning = true
};
chart.Behaviors.Add(zooming);
The following image demonstrates the cursor panning in the left direction.
Resetting the zooming/panning
SfChart
provides support to reset to the default view when you double tap the chart area by setting ResetOnDoubleTap
property to true.
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartZoomPanBehavior ResetOnDoubleTap="True">
</syncfusion:ChartZoomPanBehavior>
</syncfusion:SfChart.Behaviors>
ChartZoomPanBehavior zooming = new ChartZoomPanBehavior()
{
ResetOnDoubleTap = true
};
chart.Behaviors.Add(zooming);
Events
The following events are available in SfChart
for ChartZoomPanBehavior
,
-
ZoomChanging
- Occurs when zoom started in chart area. -
ZoomChanged
- Occurs when zooming done in chart area. -
SelectionZoomingStart
- Occurs when selection zooming started. -
SelectionZoomingDelta
- Occurs when selection zooming. -
SelectionZoomingEnd
- Occurs when selection zooming end. -
ResetZooming
- Occurs when zooming get reset in chart area.
Selection:
SfChart
supports selection that enables you to select a segment in a series or series itself by using ChartSelectionBehavior
.
Adding selection behavior to SfChart
You can create an instance ChartSelectionBehavior
and add it to the Behaviors
collection.
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartSelectionBehavior >
</syncfusion:ChartSelectionBehavior>
</syncfusion:SfChart.Behaviors>
ChartSelectionBehavior selection = new ChartSelectionBehavior();
chart.Behaviors.Add(selection);
SegmentSelection
Segment Selection allows you to highlight a segment in a chart series. To enable a segment selection in a chart series, you have to set the EnableSegmentSelection
property to True.For highlighting a segment the brush color can be set using SegmentSelectionBrush
property.
ColumnSeries
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartSelectionBehavior EnableSegmentSelection="True" >
</syncfusion:ChartSelectionBehavior>
</syncfusion:SfChart.Behaviors>
<syncfusion:ColumnSeries Label="2011" SegmentSelectionBrush="Green" Interior="#777777"
ItemsSource="{Binding Demands}" XBindingPath="Demand" YBindingPath="Year2011"/>
ChartSelectionBehavior selection = new ChartSelectionBehavior()
{
EnableSegmentSelection = true
};
chart.Behaviors.Add(selection);
ColumnSeries series = new ColumnSeries()
{
ItemsSource = new ViewModel().Demands,
XBindingPath = "Demand",
YBindingPath = "Year2010",
Label ="2011",
SegmentSelectionBrush = new SolidColorBrush(Colors.Green),
Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77))
};
chart.Series.Add(series);
SplineSeries
In Linear type series the segment selection can be viewed by changing the adornments symbol interior.
The following code example demonstrates the spline series segment selection by changing the adornments interior.
<syncfusion:SplineSeries SegmentSelectionBrush="Red"
ItemsSource="{Binding Demands}" Interior="#4A4A4A"
XBindingPath="Demand"
YBindingPath="Year2010">
<syncfusion:SplineSeries.AdornmentsInfo>
<syncfusion:ChartAdornmentInfo ShowMarker="True" Symbol="Ellipse" HighlightOnSelection="True"></syncfusion:ChartAdornmentInfo>
</syncfusion:SplineSeries.AdornmentsInfo>
</syncfusion:SplineSeries>
ChartSelectionBehavior selection = new ChartSelectionBehavior()
{
EnableSegmentSelection = true
};
chart.Behaviors.Add(selection);
SplineSeries series = new SplineSeries()
{
ItemsSource = new ViewModel().Demands,
XBindingPath = "Demand",
YBindingPath = "Year2010",
SegmentSelectionBrush = new SolidColorBrush(Colors.Red),
Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A))
};
ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
{
ShowMarker = true,
HighlightOnSelection = true,
Symbol = ChartSymbol.Ellipse
};
series.AdornmentsInfo = adornmentInfo;
chart.Series.Add(series);
Series selection
Series selection is used in case of multiple series when you want to highlight a particular series.Series Selection can be enabled by setting EnableSeriesSelection
property to True. The SeriesSelectionBrush
property is used to set the brush color to highlight the series.
The following code example demonstrates highlighting a series.
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartSelectionBehavior EnableSegmentSelection="False" EnableSeriesSelection="True"/>
</syncfusion:SfChart.Behaviors>
<syncfusion:ScatterSeries Label="2010" SeriesSelectionBrush="Green"
ItemsSource="{Binding Demands}" Interior="#4A4A4A"
XBindingPath="Demand"
YBindingPath="Year2010">
</syncfusion:ScatterSeries>
<syncfusion:ScatterSeries Label="2011" SeriesSelectionBrush="Green" Interior="#777777"
ItemsSource="{Binding Demands}" XBindingPath="Demand"
YBindingPath="Year2011"/>
ChartSelectionBehavior selection = new ChartSelectionBehavior()
{
EnableSegmentSelection = true,
EnableSeriesSelection = true
};
chart.Behaviors.Add(selection);
ScatterSeries series1 = new ScatterSeries()
{
ItemsSource = new ViewModel().Demands,
XBindingPath = "Demand",
YBindingPath = "Year2010",
Label = "2010",
SegmentSelectionBrush = new SolidColorBrush(Colors.Green),
Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A))
};
ScatterSeries series2 = new ScatterSeries()
{
ItemsSource = new ViewModel().Demands,
XBindingPath = "Demand",
YBindingPath = "Year2011",
Label = "2011",
SegmentSelectionBrush = new SolidColorBrush(Colors.Green),
Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77))
};
chart.Series.Add(series1);
chart.Series.Add(series2);
NOTE
By default the segment selection is true, so for selecting series you have to set the
EnableSegmentSelection
property to false.
Selection mode
SfChart
provides support to select using mouse move or mouse click. By default the selection will take place in mouse click. The selection mode can be defined using SelectionMode
property for segment and series selection.
The following code snippet demonstrates the selection mode using MouseMove
.
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartSelectionBehavior SelectionMode="MouseMove" EnableSeriesSelection="True">
</syncfusion:ChartSelectionBehavior>
</syncfusion:SfChart.Behaviors>
ChartSelectionBehavior selection = new ChartSelectionBehavior()
{
SelectionMode = Syncfusion.UI.Xaml.Charts.SelectionMode.MouseMove,
EnableSeriesSelection = true
};
chart.Behaviors.Add(selection);
Selection style
SfChart
allows you to select single or multiple segment /series using SelectionStyle
property. By default the SelectionStyle
is Single
.
The following code snippet demonstrates multiple segment selection.
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartSelectionBehavior SelectionStyle="Multiple" EnableSegmentSelection="True">
</syncfusion:ChartSelectionBehavior>
</syncfusion:SfChart.Behaviors>
ChartSelectionBehavior selection = new ChartSelectionBehavior()
{
SelectionStyle = SelectionStyle.Multiple,
EnableSegmentSelection = true
};
chart.Behaviors.Add(selection);
Changing cursor while selection
SelectionCursor
property allows you to define the cursor when mouse is hovered over the segment with segment or series selection enabled.
The following code snippet demonstrates hand cursor in segment selection.
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartSelectionBehavior SelectionCursor="Hand" EnableSegmentSelection="True">
</syncfusion:ChartSelectionBehavior>
</syncfusion:SfChart.Behaviors>
ChartSelectionBehavior selection = new ChartSelectionBehavior()
{
SelectionCursor = Cursors.Hand,
EnableSegmentSelection = true
};
chart.Behaviors.Add(selection);
Adornment Selection:
SfChart
provides selection for adornments by defining HighlightOnSelection
property which allows you to select the segment or series with the corresponding adornments.
HighlightOnSelection
Segment selection
The following code example demonstrates the segment selection with adornments
<syncfusion:ColumnSeries Interior="#4A4A4A"
ItemsSource="{Binding Demands}" XBindingPath="Demand"
SegmentSelectionBrush="Green"
YBindingPath="Year2010">
<syncfusion:ColumnSeries.AdornmentsInfo>
<syncfusion:ChartAdornmentInfo UseSeriesPalette="True" ShowConnectorLine="True"
ConnectorHeight="30" ShowLabel="True" HighlightOnSelection="True">
</syncfusion:ChartAdornmentInfo>
</syncfusion:ColumnSeries.AdornmentsInfo>
ChartSelectionBehavior selection = new ChartSelectionBehavior()
{
EnableSegmentSelection = true
};
chart.Behaviors.Add(selection);
ColumnSeries series = new ColumnSeries()
{
ItemsSource = new ViewModel().Demands,
XBindingPath = "Demand",
YBindingPath = "Year2010",
SegmentSelectionBrush = new SolidColorBrush(Colors.Green),
Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A))
};
ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
{
ShowLabel = true,
ShowConnectorLine = true,
HighlightOnSelection = true,
UseSeriesPalette = true,
ConnectorHeight = 30
};
series.AdornmentsInfo = adornmentInfo;
chart.Series.Add(series);
Series selection
The following code example demonstrates the series selection with adornments
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartSelectionBehavior EnableSegmentSelection="False"
EnableSeriesSelection="True"/>
</syncfusion:SfChart.Behaviors>
<syncfusion:SplineSeries ItemsSource="{Binding Demands}" SeriesSelectionBrush="Green"
XBindingPath="Demand"
YBindingPath="Year2010">
<syncfusion:SplineSeries.AdornmentsInfo>
<syncfusion:ChartAdornmentInfo Symbol="Ellipse"
ShowMarker="True"
HighlightOnSelection="True">
</syncfusion:ChartAdornmentInfo>
</syncfusion:SplineSeries.AdornmentsInfo>
</syncfusion:SplineSeries>
<syncfusion:SplineSeries Label="2010" Interior="#4A4A4A"
ItemsSource="{Binding Demands}" SeriesSelectionBrush="Green"
XBindingPath="Demand"
YBindingPath="Year2011">
<syncfusion:SplineSeries.AdornmentsInfo>
<syncfusion:ChartAdornmentInfo Symbol="Ellipse"
ShowMarker="True"
HighlightOnSelection="True">
</syncfusion:ChartAdornmentInfo>
</syncfusion:SplineSeries.AdornmentsInfo>
</syncfusion:SplineSeries>
ChartSelectionBehavior selection = new ChartSelectionBehavior()
{
EnableSegmentSelection = false,
EnableSeriesSelection = true
};
chart.Behaviors.Add(selection);
SplineSeries series1 = new SplineSeries()
{
ItemsSource = new ViewModel().Demands,
XBindingPath = "Demand",
YBindingPath = "Year2010",
SeriesSelectionBrush = new SolidColorBrush(Colors.Green)
};
ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
{
ShowMarker = true,
Symbol = ChartSymbol.Ellipse
};
series1.AdornmentsInfo = adornmentInfo;
SplineSeries series2 = new SplineSeries()
{
ItemsSource = new ViewModel().Demands,
XBindingPath = "Demand",
YBindingPath = "Year2011",
SeriesSelectionBrush = new SolidColorBrush(Colors.Green),
Interior = new SolidColorBrush(Color.FromRgb(0x4A,0x4A,0x4A))
};
ChartAdornmentInfo adornmentInfo1 = new ChartAdornmentInfo()
{
ShowMarker = true,
Symbol = ChartSymbol.Ellipse,
HighlightOnSelection = true
};
series2.AdornmentsInfo = adornmentInfo1;
chart.Series.Add(series1);
chart.Series.Add(series2);
Events
The following events are available in SfChart
for ChartSelectionBehavior
,
-
SelectionChanging
- Occurs when selection changing in chart area. -
SelectionChanged
- Occurs when selection changed in chart area.
Resizable Scrollbar
The resizable scrollbar is a type of scrollbar that can be resized within the track area by adjusting the scrolling thumbs. In the SfChart, a resizable scrollbar is used for zooming and panning across different chart segments.
Adding scrollBar to the axis
EnableScrollBar
property allows you to add the scrollbar for the particular axis. The following code snippet illustrates the scrollbar in the primary axis.
<syncfusion:SfChart.PrimaryAxis>
<syncfusion:CategoryAxis EnableScrollBar="True" />
</syncfusion:SfChart.PrimaryAxis>
chart.PrimaryAxis = new CategoryAxis()
{
EnableScrollBar = true
};
Deferred scrolling
SfChart
provides support to suspend the value updates for every thumb values. This can be done using DeferredScrolling
property in chart axis.The following code snippet demonstrates the deferred scrolling.
<syncfusion:SfChart.PrimaryAxis>
<syncfusion:CategoryAxis EnableScrollBar="True" DeferredScrolling="True"/>
</syncfusion:SfChart.PrimaryAxis>
chart.PrimaryAxis = new CategoryAxis()
{
EnableScrollBar = true,
DeferredScrolling = true,
};
Resizing the scrollbar
SfChart
allows you to resize the scrollbar using EnableScrollBarResizing
property to true. By default the EnableScrollBarResizing
property is true. The following code example and image demonstrates scrollbar without resizing option.
<syncfusion:SfChart.PrimaryAxis>
<syncfusion:CategoryAxis EnableScrollBar="True" EnableScrollBarResizing="False"/>
</syncfusion:SfChart.PrimaryAxis>
chart.PrimaryAxis = new CategoryAxis()
{
EnableScrollBar = true,
EnableScrollBarResizing = false,
};
Scrollbar for touch mode
Scrollbar provides a touch mode style by enabling EnableTouchMode
property to true as in the below code snippet.
<syncfusion:SfChart.PrimaryAxis>
<syncfusion:CategoryAxis EnableScrollBar="True" EnableTouchMode="True"/>
</syncfusion:SfChart.PrimaryAxis>
chart.PrimaryAxis = new CategoryAxis()
{
EnableScrollBar = true,
EnableTouchMode = true
};
Thumb label
In touch mode while resizing or dragging the scrollbar to view thumb labels the ThumbLabelVisibility
is set to true.
The following code example demonstrates the thumb labels in scrollbar.
<syncfusion:SfChart.PrimaryAxis>
<syncfusion:CategoryAxis EnableScrollBar="True" ThumbLabelVisibility="Visible" EnableTouchMode="True"/>
</syncfusion:SfChart.PrimaryAxis>
chart.PrimaryAxis = new CategoryAxis()
{
EnableScrollBar = true,
EnableTouchMode = true,
ThumbLabelVisibility = Visibility.Visible
};
ThumbLabelTemplate
ThumbLabelTemplate
property provides the custom template for the scroll bar thumb
<syncfusion:SfChart x:Name="chart">
<syncfusion:SfChart.Resources>
<DataTemplate x:Key="labelTemplate">
<Grid>
<Border BorderBrush="Black" Background="Pink"
BorderThickness="2">
<TextBlock Text="{Binding}" FontSize="15"/>
</Border>
</Grid>
</DataTemplate>
</syncfusion:SfChart.Resources>
<syncfusion:SfChart.PrimaryAxis>
<syncfusion:CategoryAxis EnableTouchMode="True" EnableScrollBar="True"
ThumbLabelVisibility="Visible"
ThumbLabelTemplate="{StaticResource labelTemplate}"/>
</syncfusion:SfChart.PrimaryAxis>
</syncfusion:SfChart>
chart.PrimaryAxis = new CategoryAxis()
{
EnableTouchMode = true,
EnableScrollBar = true,
ThumbLabelVisibility = Visibility.Visible,
ThumbLabelTemplate = chart.Resources["labelTemplate"] as DataTemplate
};
CrossHair
ChartCrossHairBehavior
is used to view the values at mouse point or touch contact point. By moving these lines horizontally, you can get the X values and by moving these lines vertically, you can get the Y values.
Adding CrossHairBehavior to SfChart
You can create an instance ChartCrossHairBehavior
and add it to the Behaviors
collection.
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartCrossHairBehavior />
</syncfusion:SfChart.Behaviors>
ChartCrossHairBehavior behavior = new ChartCrossHairBehavior();
chart.Behaviors.Add(behavior);
To view the axis labels then set the ShowTrackBallInfo
property to true as in the below code snippet.
<syncfusion:SfChart.PrimaryAxis>
<syncfusion:CategoryAxis ShowTrackBallInfo="True"/>
</syncfusion:SfChart.PrimaryAxis>
<syncfusion:SfChart.SecondaryAxis>
<syncfusion:NumericalAxis ShowTrackBallInfo="True"/>
</syncfusion:SfChart.SecondaryAxis>
ChartCrossHairBehavior behavior = new ChartCrossHairBehavior();
chart.Behaviors.Add(behavior);
chart.PrimaryAxis = new CategoryAxis()
{
ShowTrackBallInfo = true
};
chart.SecondaryAxis = new NumericalAxis()
{
ShowTrackBallInfo = true
};
Cross hair is composed of the following parts.
-
Vertical and horizontal line.
-
Axis Labels
Vertical and Horizontal Line
If you add ChartCrossHairBehavior
to chart you can see horizontal and vertical lines.The horizontal and vertical lines can be customized using HorizontalLineStyle
and VerticalLineStyle
properties.
HorizontalLineStyle
The following code snippet demonstrates the line style for horizontal line in cross hair.
<syncfusion:SfChart x:Name="chart">
<syncfusion:SfChart.Resources>
<Style TargetType="Line" x:Key="lineStyle">
<Setter Property="Stroke" Value="Green"></Setter>
<Setter Property="StrokeThickness" Value="1"></Setter>
</Style>
</syncfusion:SfChart.Resources>
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartCrossHairBehavior HorizontalLineStyle="{StaticResource lineStyle}"/>
</syncfusion:SfChart.Behaviors>
</syncfusion:SfChart>
ChartCrossHairBehavior crosshair = new ChartCrossHairBehavior()
{
HorizontalLineStyle = chart.Resources["lineStyle"] as Style
};
chart.Behaviors.Add(crosshair);
VerticalLineStyle
<syncfusion:SfChart x:Name="chart">
<syncfusion:SfChart.Resources>
<Style TargetType="Line" x:Key="lineStyle">
<Setter Property="StrokeDashArray" Value="10,5"/>
<Setter Property="Stroke" Value="Red"/>
<Setter Property="StrokeThickness" Value="1"/>
</Style>
</syncfusion:SfChart.Resources>
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartCrossHairBehavior VerticalLineStyle="{StaticResource lineStyle}"/>
</syncfusion:SfChart.Behaviors>
</syncfusion:SfChart>
ChartCrossHairBehavior crosshair = new ChartCrossHairBehavior()
{
VerticalLineStyle = chart.Resources["lineStyle"] as Style
};
chart.Behaviors.Add(crosshair);
Horizontal axis label
The vertical line in contact with the x axes shows axis label. The horizontal axis label can be aligned using HorizontalAxisLabelAlignment
property.
Axis Label can be aligned by Near, Far, Center, Auto and None Options.
Auto
–Axis label is aligned in Near/Far positions based on the movement of vertical line.
Far
-Axis label is positioned far from the position of vertical line in cross hair.
Near
- Axis label is near to the position of trackball.
Center
-Axis label is aligned to the center of the vertical line. By default the axis label will positioned in center.
The following image demonstrates the horizontal axis label positioned center to the vertical line.
Far
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartCrossHairBehavior HorizontalAxisLabelAlignment="Far ">
</syncfusion:ChartCrossHairBehavior>
</syncfusion:SfChart.Behaviors>
ChartCrossHairBehavior behavior = new ChartCrossHairBehavior()
{
HorizontalAxisLabelAlignment = ChartAlignment.Far
};
chart.Behaviors.Add(behavior);
Near
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartCrossHairBehavior HorizontalAxisLabelAlignment="Near ">
</syncfusion:ChartCrossHairBehavior>
</syncfusion:SfChart.Behaviors>
ChartCrossHairBehavior behavior = new ChartCrossHairBehavior()
{
HorizontalAxisLabelAlignment = ChartAlignment.Near
};
chart.Behaviors.Add(behavior);
Vertical axis label
Vertical axis label is displayed when the horizontal line in contact with x axis.The label can be aligned using VerticalAxisLabelAlignment
property.
Axis Label can be aligned by Near
, Far
, Center
and Auto
Options.
The following image demonstrates the horizontal axis label positioned center to the vertical line.
Near
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartCrossHairBehavior VerticalAxisLabelAlignment="Near">
</syncfusion:ChartCrossHairBehavior>
</syncfusion:SfChart.Behaviors>
ChartCrossHairBehavior behavior = new ChartCrossHairBehavior()
{
VerticalAxisLabelAlignment = ChartAlignment.Near
};
chart.Behaviors.Add(behavior);
Far
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartCrossHairBehavior VerticalAxisLabelAlignment="Far" >
</syncfusion:ChartCrossHairBehavior>
</syncfusion:SfChart.Behaviors>
ChartCrossHairBehavior behavior = new ChartCrossHairBehavior()
{
VerticalAxisLabelAlignment = ChartAlignment.Far
};
chart.Behaviors.Add(behavior);