Interactivity of the SfChart Control | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (181).NET Core  (28).NET MAUI  (227)Angular  (113)ASP.NET  (49)ASP.NET Core  (81)ASP.NET MVC  (87)Azure  (42)Black Friday Deal  (1)Blazor  (236)BoldSign  (14)DocIO  (24)Essential JS 2  (110)Essential Studio  (200)File Formats  (73)Flutter  (136)JavaScript  (226)Microsoft  (122)PDF  (83)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (964)TypeScript  (33)Uno Platform  (3)UWP  (3)Vue  (46)Webinar  (53)Windows Forms  (59)WinUI  (72)WPF  (163)Xamarin  (159)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (11)Business intelligence  (55)Button  (4)C#  (164)Chart  (147)Chart of the week  (58)Cloud  (15)Company  (440)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (73)Development  (681)Doc  (7)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (13)Excel  (43)Extensions  (23)File Manager  (7)Gantt  (21)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (522)Mobile MVC  (9)OLAP server  (2)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (45)Performance  (13)PHP  (2)PivotGrid  (5)Predictive Analytics  (6)Report Server  (3)Reporting  (8)Reporting / Back Office  (9)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (5)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (32)Solution Services  (4)Spreadsheet  (11)SQL  (15)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (406)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (628)What's new  (341)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)

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.


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

        <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>


Note: In the code “{Binding Item.Rank}” the Item will be an instance for the underlying model.



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:chartselectionbehavior x_name="selection" enableseriesselection="True"></chart:chartselectionbehavior>
<chart:fastlinebitmapseries x_name="column1" itemssource="{Binding SalesCollection}" seriesselectionbrush="Red" xbindingpath="Time" ybindingpath="Value">             



Figure 3: Segment Selection


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:chartcrosshairbehavior horizontallinestyle="{StaticResource trackLine}" verticallinestyle="{StaticResource trackLine}" horizontalaxislabelalignment="Center" verticalaxislabelalignment="Center">



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:chartcrosshairbehavior horizontallinestyle="{StaticResource trackLine}" verticallinestyle="{StaticResource trackLine}" horizontalaxislabelalignment="Center" verticalaxislabelalignment="Center">


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:chartzoompanbehavior enablepinchzooming="True" enablezoomingtoolbar="True" enableselectionzooming="True" horizontalposition="Left" enablemousewheelzooming="True" enablepanning="True" zoommode="XY" resetondoubletap="True"></chart:chartzoompanbehavior>


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: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>

Figure 11: Editable Text Annotation

    <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>

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:ellipseannotation x1="1" y1="36" x2="2" y2="42" canresize="True" candrag="True"></chart:ellipseannotation>


Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed