Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (151).NET Core  (25)Angular  (49)ASP.NET  (48)ASP.NET Core  (64)ASP.NET MVC  (86)Azure  (28)Blazor  (97)DocIO  (20)Essential JS 2  (71)Essential Studio  (163)File Formats  (20)Flutter  (111)JavaScript  (148)Microsoft  (101)PDF  (59)React  (33)Succinctly series  (122)Syncfusion  (480)TypeScript  (30)Uno Platform  (3)UWP  (4)Vue  (26)Webinar  (25)Windows Forms  (55)WinUI  (21)WPF  (122)Xamarin  (130)XlsIO  (24)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (107)Chart  (51)Cloud  (9)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (5)DataGrid  (47)Development  (257)Doc  (7)DockingManager  (1)eBook  (93)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (20)Extensions  (13)File Manager  (4)Gantt  (9)Gauge  (7)Git  (4)Grid  (27)HTML  (9)Installer  (2)Knockout  (2)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (227)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (23)Performance  (6)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (6)Road Map  (9)Scheduler  (26)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (19)Solution Services  (2)Spreadsheet  (9)SQL  (7)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (11)Tips and Tricks  (60)UI  (131)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (1)Visual Studio  (19)Visual Studio Code  (11)Web  (215)What's new  (140)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
API Improvements in WINUI 3 Charts: 2021 Volume 2

API Improvements in WinUI 3 Charts: 2021 Volume 2

The Syncfusion WinUI 3 Charts control was designed to visually represent a huge amount of data in an elegant way. Its feature set includes data binding, multiple axes, legends, animations, data labels, trackballs, tooltip, gradient, and zooming. In this blog post, we are going to look at the various API changes in our WinUI Charts in the 2021 Volume 2 release. Most importantly, the SfChart control has been deprecated in favor of the following five new controls:

Now, let’s look at them and code examples for them in the new API structure.

Cartesian charts

The WinUI Cartesian chart is one of the basic chart categories. It supports more than 15 chart types such as line, spline, column, bar, area, scatter, and bubble.

For more details about the WinUI Cartesian chart, refer to the demos on GitHub and API documentation.

The following code example shows how to create the WinUI column chart.

<chart:SfCartesianChart Header="Height Comparison">
        <chart:SfCartesianChart.Legends>
            <chart:ChartLegend/>
        </chart:SfCartesianChart.Legend>
        <chart:SfCartesianChart.PrimaryAxis>
            <chart:CategoryAxis Header="Names"/>
        </chart:SfCartesianChart.PrimaryAxis>
        <chart:SfCartesianChart.SecondaryAxis>
            <chart:NumericalAxis Header="Height(in cm)"/>
        </chart:SfCartesianChart.SecondaryAxis>
        <chart:ColumnSeries Label="Heights" ShowTooltip="True"
                            ShowDataLabels="True"
                            ItemsSource="{Binding Data}"
                            XBindingPath="Name" 
                            YBindingPath="Height">
            <chart:ColumnSeries.DataLabelSettings>
                <chart:CartesianDataLabelSettings Position="Inner"/>
            </chart:ColumnSeries.DataLabelSettings>
        </chart:ColumnSeries>
</chart:SfCartesianChart>
WinUI Cartesian (Column) Chart
WinUI Cartesian (Column) Chart

Circular chart

The WinUI Circular chart (pie, doughnut, multiple pie) is user-friendly and gives greater UI visualization of data with proportions and percentages of different categories.

For more details about the WinUI Circular charts, refer to the demos on GitHub and API documentation.

The following code example shows how to create the WinUI pie chart.

<chart:SfCircularChart Header="Number of Internet Users in World (Users In Millions)">
    <chart:SfCircularChart.Legend>
        <chart:ChartLegend/>
    </chart:SfCircularChart.Legend>
    <chart:SfCircularChart.Series>
        <chart:DoughnutSeries ItemsSource="{Binding Data}" XBindingPath="Category" 
                              YBindingPath="Value1" ShowDataLabels="True" 
                              ShowTooltip="True" >
        </chart:DoughnutSeries>
    </chart:SfCircularChart.Series>
</chart:SfCircularChart>
WinUI Circular (Pie) Chart
WinUI Circular (Pie) Chart

Polar chart

The WinUI Polar chart is used to visualize data in terms of values and angles. It visually compares several quantitative or qualitative aspects of a situation. It is a variant of the radar chart (spider chart).

For more details about the WinUI Polar chart, refer to the demos on GitHub and API documentation.

The following code example shows how to use the WinUI Polar chart to design a radar chart by specifying the GridLineType property as Polygon.

<chart:SfPolarChart Header="Radar Chart" GridLineType="Polygon">
      <chart:SfPolarChart.PrimaryAxis>
           <chart:CategoryAxis />
      </chart:SfPolarChart.PrimaryAxis>
      <chart:SfPolarChart.SecondaryAxis>
           <chart:NumericalAxis/>
      </chart:SfPolarChart.SecondaryAxis>
      <chart:SfPolarChart.Series>
           <chart:PolarAreaSeries  ItemsSource="{Binding PlantDetails}"
                                   XBindingPath="Direction" YBindingPath="Tree" >
           </chart:PolarAreaSeries>
       </chart:SfPolarChart.Series>
</chart:SfPolarChart>
Designing a Radar Chart Using WinUI Polar Chart
Designing a Radar Chart Using WinUI Polar Chart

Pyramid chart

The WinUI Pyramid chart is used to visually represent hierarchies in a pyramid-like structure that shows the proportions of a total.

For more details about the WinUI Pyramid chart, refer to the demos on GitHub and API documentation.

The following code example shows how to create the WinUI Pyramid chart.

<chart:SfPyramidChart Header="PRODUCT SALES"
            ShowTooltip="True" ShowDataLabels="True" Palette="BlueChrome"
            ItemsSource="{Binding Data}" XBindingPath="Product" YBindingPath="Value">
       <chart:SfPyramidChart.Legend>
             <chart:ChartLegend />
       </chart:SfPyramidChart.Legend>
</chart:SfPyramidChart>
WinUI Pyramid Chart
WinUI Pyramid Chart

Funnel chart

The WinUI Funnel chart is used to plot streamlined data to show various stages in a process.

For more details about the WinUI Funnel chart, refer to the demos on GitHub and API documentation.

The following code example shows how to create the WinUI Funnel Chart.

<chart:SfFunnelChart Header="PRODUCT SALES"
                     ShowTooltip="True" ShowDataLabels="True" Palette="BlueChrome"
                     ItemsSource="{Binding Data}" XBindingPath="Product" YBindingPath="Value">
    <chart:SfFunnelChart.Legend>
        <chart:ChartLegend />
    </chart:SfFunnelChart.Legend>
</chart:SfFunnelChart>
WinUI Funnel Chart
WinUI Funnel Chart

Note: Also, refer to the WinUI Charts feature tour page, and demos on the App Center.

API breaking changes

Let’s discuss the API-breaking changes in the WinUI Charts control that rolled out in the 2021 Volume 2 release.

Classes

Previous ClassCurrent Class
SfChartSfCartesianChart

SfCircularChart

SfPolarChart

SfPyramidChart

SfFunnelChart

ChartDataMarkerCartesianDataLabelSettings

CircularDataLabelSettings

PyramidDataLabelSettings

FunnelDataLabelSettings

PolarDataLabelSettings

ChartDataMarkerLabelChartDataLabel

Property

ClassPrevious APICurrent API
ChartSeriesDataMarkerDataLabelSettings
SfChartAreaBackground

AreaBorderThickness

AreaBorderBrush

SideBySideSeriesPlacement

PlotAreaBackground

PlotAreaBorderThickness

PlotAreaBorderBrush

EnableSideBySideSeriesPlacement

ChartSelectionBehaviorSelectionCursor

SelectionType

Cursor

Type

ChartSelectionBehaviorThe following properties have been removed.

EnableSegmentSelection

EnableSeriesSelection

SelectionMode

The following new enum SelectionType values have been added.

Point

Series

MultiPoint

MultiSeries

UG link – Selection

ChartDataMarkerShowLabelShowDataLabels ( Moved from ChartDataMarker to ChartSeriesBase.)

Note: For more details, refer to the API Breaking Changes in the 2021 Volume 2: WinUI Charts documentation.

Conclusion

Thanks for reading! We have seen the API improvements and breaking changes in our Syncfusion WinUI 3 Charts control in the 2021 Volume 2 release. These updates are available in our Release Notes and What’s New pages, too. So, try out them and leave your feedback in the comments section of this blog post!

For existing customers, the newest version is available for download from the License and Downloads page. If you are not yet a Syncfusion customer, you can try our 30-day free trial to check out the available features. Also, you can try our samples on GitHub.

You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top