Interactivity of the SfChart Control

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

 


    
        
            
        
    

 

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


    

             

 

 

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


       
       

 

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


       
       

 

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


 

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.


    

 

 

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.

 


    

    

 

Figure 11: Editable Text Annotation


    

 

 

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.

 


    

 

 


Loading