Essential Chart offers highly interactive features like selection, tracking, tooltip, and more. Here we will introduce you to all the possible interactions of SfChart.
Tooltips
Tooltip is the most common interaction on any visual elements, and SfChart includes this feature with complete customization. This feature is used to define additional information (metadata) about the chart points.
For instance, if we are plotting a chart about product sales, we may have the product name as the X value and sales value as the Y value. If we wish to know more information about that product or sales separately or sales by region, we can display that value using a tooltip. The following image shows a customized tooltip in action, and the accompanying code sample demonstrates the code behind the tooltip.
Figure 1: Customized Tooltip
<chart:barseries.tooltiptemplate>
<datatemplate>
<border borderbrush="Black" borderthickness="1">
<textblock verticalalignment="Center" margin="3,3,6,3" textalignment="Left" text="{Binding Item.Rank}" horizontalalignment="Left" foreground="Black" fontsize="16"></textblock>
</border>
</datatemplate>
</chart:barseries.tooltiptemplate>
Note: In the code “{Binding Item.Rank}” the Item will be an instance for the underlying model.
Selection
Essential Chart supports selection for the chart series as well for the individual points (here segments). These selection can be done using the respective index programmatically.
This feature is highly useful when we require to perform any action for a particular series or a segment (data point), mostly important on runtime. By selecting the segment or series, we will be notified with selected value so that we can perform our required actions.
The below image shows a chart with more than 50 series. I have defined the selection brush for the series in order to identify a specific trend. The accompanying code sample shows the code behind the chart.
Figure 2: Series Selection
<chart:sfchart.behaviors>
<chart:chartselectionbehavior x_name="selection" enableseriesselection="True"></chart:chartselectionbehavior>
</chart:sfchart.behaviors>
<chart:fastlinebitmapseries x_name="column1" itemssource="{Binding SalesCollection}" seriesselectionbrush="Red" xbindingpath="Time" ybindingpath="Value">
</chart:fastlinebitmapseries>
Figure 3: Segment Selection
Trackball
This feature helps to trace each data point in a chart series to identify its X and Y values. This feature is useful when we have multiple series plotted one over another and need to track the data points of a specific series.
It will display the corresponding X and Y values of each point and, most importantly, we need not place the mouse exactly over the point as with the tooltip feature (which would be tedious in this scenario). By moving the pointer, it will track all nearby data points.
Figure 4:. Trackball
<chart:sfchart.behaviors>
<chart:chartcrosshairbehavior horizontallinestyle="{StaticResource trackLine}" verticallinestyle="{StaticResource trackLine}" horizontalaxislabelalignment="Center" verticalaxislabelalignment="Center">
</chart:chartcrosshairbehavior>
</chart:sfchart.behaviors>
Crosshair
This feature is similar to trackball, but traces the X and Y values of any point inside the chart area (plot area).
This feature is useful when we need to find or map the axis values for the corresponding pixel values. It acts as a sighting reference for the chart and data points.
Figure 5: Crosshair
<chart:sfchart.behaviors>
<chart:chartcrosshairbehavior horizontallinestyle="{StaticResource trackLine}" verticallinestyle="{StaticResource trackLine}" horizontalaxislabelalignment="Center" verticalaxislabelalignment="Center">
</chart:chartcrosshairbehavior>
</chart:sfchart.behaviors>
Visual Data Editing
Essential Chart supports data editing for the chart series. A chart can be edited interactively using drag and drop.
This feature was introduced to edit underlying values dynamically, and these will be used especially for presentation purposes.
Figure 6: Visual Data Editing
<charts:lineseries enablesegmentdragging="True" itemssource="{Binding SalesData}" xbindingpath="Year" ybindingpath="Income"></charts:lineseries>
Zooming and Panning
Chart series can be zoomed and panned using the mouse-wheel or by touch (pinch zooming) or by using the zooming toolbar.
This feature is useful for giving more attention to a specific region or set of data points, especially when a chart features a large number of data points.
Figure 7: Zooming using Toolbar.
Figure 8: Zooming using selection.
Figure 9: Enable Panning using Toolbar.
<chart:sfchart.behaviors>
<chart:chartzoompanbehavior enablepinchzooming="True" enablezoomingtoolbar="True" enableselectionzooming="True" horizontalposition="Left" enablemousewheelzooming="True" enablepanning="True" zoommode="XY" resetondoubletap="True"></chart:chartzoompanbehavior>
</chart:sfchart.behaviors>
Annotations
Essential Chart provides various types of customizable and highly interactive annotations, including text annotation, line annotation, and more. These annotations can be dragged or resized interactively.
Figure 10: Line Annotation with Resizing (i.e., Resizer)
In the above image, we have annotated two trends on the chart to highlight the demand increasing time and demand decreasing time. These kind of annotations are widely used in stock exchanges, scientific charts, and similar venues.
<chart:sfchart.annotations>
<chart:lineannotation candrag="True" stroke="Green" canresize="True" linecap="Arrow" text="Increasing Demand" coordinateunit="Axis" x1="2" y1="48" x2="3" y2="44"></chart:lineannotation>
<chart:lineannotation candrag="True" stroke="Red" canresize="True" linecap="Arrow" text="Decreasing Demand" coordinateunit="Axis" x1="2" y1="48" x2="3" y2="44"></chart:lineannotation>
</chart:sfchart.annotations>
Figure 11: Editable Text Annotation
<chart:sfchart.annotations>
<chart:textannotation enableediting="True" x1="4.3" y1="33.6" foreground="Black" fontfamily="Segoe UI" fontsize="14" text="Click here to add custom text"></chart:textannotation>
</chart:sfchart.annotations>
Figure 12: Interactive Ellipse Annotation.
In the above image, we have drawn an ellipse to mark that area (circular) as the average value region, and we can expand this region dynamically using the transformation controls.
<chart:sfchart.annotations>
<chart:ellipseannotation x1="1" y1="36" x2="2" y2="42" canresize="True" candrag="True"></chart:ellipseannotation>
</chart:sfchart.annotations>