diff --git a/winui-toc.html b/winui-toc.html index d7d14e662..18bd11ef7 100644 --- a/winui-toc.html +++ b/winui-toc.html @@ -234,6 +234,7 @@
  • Selection
  • Tooltip
  • Trackball
    • +
  • Crosshair
  • Zooming and Panning
  • Appearance
    • diff --git a/winui/Cartesian-Charts/Axis/AutoScrollingDelta.md b/winui/Cartesian-Charts/Axis/AutoScrollingDelta.md index dbfbcb7f9..1df2cbb5a 100644 --- a/winui/Cartesian-Charts/Axis/AutoScrollingDelta.md +++ b/winui/Cartesian-Charts/Axis/AutoScrollingDelta.md @@ -26,7 +26,7 @@ By adding the [ChartZoomPanBehavior](https://help.syncfusion.com/cr/winui/Syncfu ... - + @@ -34,7 +34,7 @@ By adding the [ChartZoomPanBehavior](https://help.syncfusion.com/cr/winui/Syncfu - + ... @@ -63,6 +63,7 @@ By adding the [ChartZoomPanBehavior](https://help.syncfusion.com/cr/winui/Syncfu chart.ZoomPanBehavior = zoomPanBehavior; ... this.Content = chart; + {% endhighlight %} {% endtabs %} @@ -80,8 +81,7 @@ The [AutoScrollingMode](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml. ... - + @@ -89,7 +89,7 @@ The [AutoScrollingMode](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml. - + ... @@ -117,6 +117,7 @@ The [AutoScrollingMode](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml. chart.ZoomPanBehavior = zoomPanBehavior; ... this.Content = chart; + {% endhighlight %} {% endtabs %} @@ -131,12 +132,10 @@ In the [DateTimeAxis](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Ch {% highlight xaml %} - + ... - + @@ -148,10 +147,10 @@ In the [DateTimeAxis](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Ch - + ... - + {% endhighlight %} @@ -181,6 +180,7 @@ In the [DateTimeAxis](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Ch chart.ZoomPanBehavior = zoomPanBehavior; ... this.Content = chart; + {% endhighlight %} {% endtabs %} diff --git a/winui/Cartesian-Charts/Axis/Axislabels.md b/winui/Cartesian-Charts/Axis/Axislabels.md index 0e08fb0ef..a174de71f 100644 --- a/winui/Cartesian-Charts/Axis/Axislabels.md +++ b/winui/Cartesian-Charts/Axis/Axislabels.md @@ -93,11 +93,11 @@ chart.XAxes.Add(primaryAxis); . . . - + - - + + @@ -133,13 +133,13 @@ The appearance of the axis labels can be customized by using the [LabelTemplate] + CornerRadius="5" + BorderThickness="1"> + FontSize="12" + FontStyle="Italic" + FontWeight="Bold" + Margin="3"/> @@ -179,8 +179,7 @@ The [LabelExtent](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts . . . - + diff --git a/winui/Cartesian-Charts/Axis/Axisline.md b/winui/Cartesian-Charts/Axis/Axisline.md index fd0cb9168..e366adc29 100644 --- a/winui/Cartesian-Charts/Axis/Axisline.md +++ b/winui/Cartesian-Charts/Axis/Axisline.md @@ -77,7 +77,7 @@ SfCartesianChart chart = new SfCartesianChart(); . . . NumericalAxis primaryAxis = new NumericalAxis() { - AxisLineOffset = 25 + AxisLineOffset = 25, AxisLineStyle = chart.Resources["lineStyle"] as Style }; chart.XAxes.Add(primaryAxis); diff --git a/winui/Cartesian-Charts/Axis/Header.md b/winui/Cartesian-Charts/Axis/Header.md index 97bc07f96..456562d00 100644 --- a/winui/Cartesian-Charts/Axis/Header.md +++ b/winui/Cartesian-Charts/Axis/Header.md @@ -98,13 +98,13 @@ The appearance of the header can be customized using the [HeaderTemplate](https: + CornerRadius="5" + BorderThickness="1"> + FontSize="12" + FontStyle="Italic" + FontWeight="Bold" + Margin="3"/> diff --git a/winui/Cartesian-Charts/Axis/Range-padding.md b/winui/Cartesian-Charts/Axis/Range-padding.md index 7eafb2743..97b32f74c 100644 --- a/winui/Cartesian-Charts/Axis/Range-padding.md +++ b/winui/Cartesian-Charts/Axis/Range-padding.md @@ -173,10 +173,10 @@ The [RangePadding](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Chart . . . - - - - + + + + @@ -218,10 +218,10 @@ this.Content = chart; . . . - - - - + + + + diff --git a/winui/Cartesian-Charts/Axis/Types.md b/winui/Cartesian-Charts/Axis/Types.md index 7069e3068..f5caaa8f2 100644 --- a/winui/Cartesian-Charts/Axis/Types.md +++ b/winui/Cartesian-Charts/Axis/Types.md @@ -103,8 +103,8 @@ N> If minimum or maximum value is set, the other value is calculated by default + Minimum="250" + Interval="250"/> {% endhighlight %} @@ -565,8 +565,7 @@ By default, all the series are plotted based on the 0th index axis of XAxes and - + @@ -574,7 +573,7 @@ By default, all the series are plotted based on the 0th index axis of XAxes and + YAxisName="Series_YAxis"> - - {% endhighlight %} {% highlight c# %} diff --git a/winui/Cartesian-Charts/Crosshair.md b/winui/Cartesian-Charts/Crosshair.md new file mode 100644 index 000000000..dfac5a261 --- /dev/null +++ b/winui/Cartesian-Charts/Crosshair.md @@ -0,0 +1,307 @@ +--- +layout: post +title: Crosshair in WinUI Chart control | Syncfusion +description: Learn here all about crosshair and its customziation in Syncfusion® WinUI Chart (SfCartesianChart) control +platform: WinUI +control: SfCartesianChart +documentation: ug +keywords: crosshair in winui chart, winui sfcartesianchart crosshair, winui chart crosshair customization, syncfusion winui chart crosshair, winui sfcartesianchart crosshair settings. +--- + +# Crosshair in WinUI Chart (SfCartesianChart) + +The Chart crosshair behavior allows you to view the data values at the current mouse pointer or touch contact point. By moving the crosshair lines horizontally, you can identify the corresponding X values, and by moving them vertically, you can identify the Y values. + +## Define crosshair + +To add the crosshair in the chart, create an instance [ChartCrosshairBehavior](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartCrosshairBehavior.html) and set it to the [CrosshairBehavior](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfCartesianChart.html#Syncfusion_UI_Xaml_Charts_SfCartesianChart_CrosshairBehavior) property of the chart. + +{% tabs %} + +{% highlight xaml %} + + + + + + ... + + +{% endhighlight %} + +{% highlight c# %} + +SfCartesianChart chart = new SfCartesianChart(); +. . . +ChartCrosshairBehavior behavior = new ChartCrosshairBehavior(); +chart.CrosshairBehavior = behavior; +... + +{% endhighlight %} + +{% endtabs %} + +![Crosshair support in WinUI chart](Crosshair_images/WinUI_Chart_Crosshair.png) + +To view the crosshair label in the particular axis, you have to enable the [ShowTrackballLabel](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_ShowTrackballLabel) property in that axis as in the following code snippet. + +{% tabs %} + +{% highlight xaml %} + + + + + + . . . + + + + + +{% endhighlight %} + +{% highlight c# %} + +SfCartesianChart chart = new SfCartesianChart(); +ChartCrosshairBehavior behavior = new ChartCrosshairBehavior(); +chart.CrosshairBehavior = behavior; + +CategoryAxis primaryAxis = new CategoryAxis() +{ + ShowTrackballLabel = true +}; +chart.XAxes.Add(primaryAxis); +... + +{% endhighlight %} + +{% endtabs %} + +![Crosshair ShowTrackballLabel support in WinUI chart](Crosshair_images/WinUI_Chart_Crosshair_ShowTrackballLabel.png) + +## Horizontal and vertical line style + +When you add [ChartCrossHairBehavior](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartCrosshairBehavior.html) to a chart in WinUI, horizontal and vertical crosshair lines will appear to indicate the current pointer position. These lines help you track the corresponding X and Y values on the chart. You can customize the appearance of these lines using the [HorizontalLineStyle](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartCrosshairBehavior.html#Syncfusion_UI_Xaml_Charts_ChartCrosshairBehavior_HorizontalLineStyle) and [VerticalLineStyle](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartCrosshairBehavior.html#Syncfusion_UI_Xaml_Charts_ChartCrosshairBehavior_VerticalLineStyle) properties. + +**Horizontal line style** + +The following code snippet demonstrates how to customize the line style for the horizontal line in the crosshair. + +{% tabs %} + +{% highlight xaml %} + + + + + + + + + + + + + +{% endhighlight %} + +{% highlight c# %} + +ChartCrossHairBehavior crosshair = new ChartCrossHairBehavior() +{ + HorizontalLineStyle = chart.Resources["horizontalLineStyle"] as Style +}; + +chart.Behaviors.Add(crosshair); + +{% endhighlight %} + +{% endtabs %} + +![Crosshair HorizontalLineStyle support in WinUI chart](Crosshair_images/WinUI_Chart_Crosshair_HorizontalLineStyle.png) + +**Vertical line style** + +The following code snippet demonstrates how to customize the line style for the vertical line in the crosshair. + +{% tabs %} + +{% highlight xaml %} + + + + + + + + + + + + + +{% endhighlight %} + +{% highlight c# %} + +ChartCrossHairBehavior crosshair = new ChartCrossHairBehavior() +{ + VerticalLineStyle = chart.Resources["verticalLineStyle"] as Style +}; + +chart.Behaviors.Add(crosshair); + +{% endhighlight %} + +{% endtabs %} + +![Crosshair VerticalLineStyle support in WinUI chart](Crosshair_images/WinUI_Chart_Crosshair_VerticalLineStyle.png) + +## Horizontal and vertical axis label + +The horizontal axis label appears when the vertical line intersects the X-axis, and the vertical axis label appears when the horizontal line intersects the Y-axis. These labels can be customized using the [HorizontalAxisLabelAlignment](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartCrosshairBehavior.html#Syncfusion_UI_Xaml_Charts_ChartCrosshairBehavior_HorizontalAxisLabelAlignment) and [VerticalAxisLabelAlignment](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartCrosshairBehavior.html#Syncfusion_UI_Xaml_Charts_ChartCrosshairBehavior_VerticalAxisLabelAlignment) properties. By default the axis label will positioned in center. + +Axis label can be aligned by Near, Far, Center, and Auto 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 crosshair line. +* `Center` - Axis label is aligned to the center of the line. + +**Horizontal axis label alignment** + +The following code snippet demonstrates how to customize the horizontal axis label alignment in the crosshair. + +{% tabs %} + +{% highlight xaml %} + + + + + + +{% endhighlight %} + +{% highlight c# %} + +ChartCrossHairBehavior crosshair = new ChartCrossHairBehavior() +{ + HorizontalAxisLabelAlignment = ChartAlignment.Far +}; + +chart.Behaviors.Add(crosshair); + +{% endhighlight %} + +{% endtabs %} + +![Crosshair HorizontalAxisLabelAlignment support in WinUI chart](Crosshair_images/WinUI_Chart_Crosshair_HorizontalAxisLabelAlignment.png) + +**Vertical axis label alignment** + +The following code snippet demonstrates how to customize the vertical axis label alignment in the crosshair. + +{% tabs %} + +{% highlight xaml %} + + + + + +{% endhighlight %} + +{% highlight c# %} + +ChartCrossHairBehavior crosshair = new ChartCrossHairBehavior() +{ + VerticalAxisLabelAlignment = ChartAlignment.Far +}; + +chart.Behaviors.Add(crosshair); + +{% endhighlight %} + +{% endtabs %} + +![Crosshair VerticalAxisLabelAlignment support in WinUI chart](Crosshair_images/WinUI_Chart_Crosshair_VerticalAxisLabelAlignment.png) + +## Template + +The default appearance of the crosshair axis labels can be customized by using the [CrosshairLabelTemplate](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_CrosshairLabelTemplate) property of chart axis. The following example demonstrates how to set the crosshair label template. + +{% tabs %} + +{% highlight xaml %} + + +. . . + + + + + + + + + + + + + + . . . + + + + + + + + + + + + + ... + + +{% endhighlight %} + +{% highlight c# %} + +SfCartesianChart chart = new SfCartesianChart(); +ChartCrosshairBehavior behavior = new ChartCrosshairBehavior(); +chart.CrosshairBehavior = behavior; + +CategoryAxis primaryAxis = new CategoryAxis() +{ + ShowTrackballLabel = true, + CrosshairLabelTemplate = chart.Resources["xaxesCrossHairTemplate"] as DataTemplate +}; +chart.XAxes.Add(primaryAxis); + +NumericalAxis secondaryAxis = new NumericalAxis() +{ + ShowTrackballLabel = true, + CrosshairLabelTemplate = chart.Resources["yaxesCrossHairTemplate"] as DataTemplate +}; +chart.XAxes.Add(secondaryAxis); +... + +{% endhighlight %} + +{% endtabs %} + +![Crosshair Template support in WinUI chart](Crosshair_images/WinUI_Chart_Crosshair_Template.png) + +N> The binding context for `CrosshairLabelTemplate` is [ChartPointInfo](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartPointInfo.html), which provides the necessary data for the cross hair labels. diff --git a/winui/Cartesian-Charts/Crosshair_images/WinUI_Chart_Crosshair.png b/winui/Cartesian-Charts/Crosshair_images/WinUI_Chart_Crosshair.png new file mode 100644 index 000000000..a9f256a76 Binary files /dev/null and b/winui/Cartesian-Charts/Crosshair_images/WinUI_Chart_Crosshair.png differ diff --git a/winui/Cartesian-Charts/Crosshair_images/WinUI_Chart_Crosshair_HorizontalAxisLabelAlignment.png b/winui/Cartesian-Charts/Crosshair_images/WinUI_Chart_Crosshair_HorizontalAxisLabelAlignment.png new file mode 100644 index 000000000..65e2e3667 Binary files /dev/null and b/winui/Cartesian-Charts/Crosshair_images/WinUI_Chart_Crosshair_HorizontalAxisLabelAlignment.png differ diff --git a/winui/Cartesian-Charts/Crosshair_images/WinUI_Chart_Crosshair_HorizontalLineStyle.png b/winui/Cartesian-Charts/Crosshair_images/WinUI_Chart_Crosshair_HorizontalLineStyle.png new file mode 100644 index 000000000..508cadca3 Binary files /dev/null and b/winui/Cartesian-Charts/Crosshair_images/WinUI_Chart_Crosshair_HorizontalLineStyle.png differ diff --git a/winui/Cartesian-Charts/Crosshair_images/WinUI_Chart_Crosshair_ShowTrackballLabel.png b/winui/Cartesian-Charts/Crosshair_images/WinUI_Chart_Crosshair_ShowTrackballLabel.png new file mode 100644 index 000000000..29e7350ee Binary files /dev/null and b/winui/Cartesian-Charts/Crosshair_images/WinUI_Chart_Crosshair_ShowTrackballLabel.png differ diff --git a/winui/Cartesian-Charts/Crosshair_images/WinUI_Chart_Crosshair_Template.png b/winui/Cartesian-Charts/Crosshair_images/WinUI_Chart_Crosshair_Template.png new file mode 100644 index 000000000..5d3fd2f9e Binary files /dev/null and b/winui/Cartesian-Charts/Crosshair_images/WinUI_Chart_Crosshair_Template.png differ diff --git a/winui/Cartesian-Charts/Crosshair_images/WinUI_Chart_Crosshair_VerticalAxisLabelAlignment.png b/winui/Cartesian-Charts/Crosshair_images/WinUI_Chart_Crosshair_VerticalAxisLabelAlignment.png new file mode 100644 index 000000000..c1597be15 Binary files /dev/null and b/winui/Cartesian-Charts/Crosshair_images/WinUI_Chart_Crosshair_VerticalAxisLabelAlignment.png differ diff --git a/winui/Cartesian-Charts/Crosshair_images/WinUI_Chart_Crosshair_VerticalLineStyle.png b/winui/Cartesian-Charts/Crosshair_images/WinUI_Chart_Crosshair_VerticalLineStyle.png new file mode 100644 index 000000000..86c385923 Binary files /dev/null and b/winui/Cartesian-Charts/Crosshair_images/WinUI_Chart_Crosshair_VerticalLineStyle.png differ diff --git a/winui/Cartesian-Charts/DataLabels.md b/winui/Cartesian-Charts/DataLabels.md index ac78363c3..1693ed703 100644 --- a/winui/Cartesian-Charts/DataLabels.md +++ b/winui/Cartesian-Charts/DataLabels.md @@ -172,38 +172,38 @@ The appearance of the data label can be customized using the [ContentTemplate](h + Stretch="Uniform" + Fill="#1E88E5" + Width="15" + Height="15" + Margin="0,0,0,0" + RenderTransformOrigin="0.5,0.5" + Data="M22.5,15.8899993896484L37.5, + 30.8899993896484 7.5, + 30.8899993896484 22.5, + 15.8899993896484z"> - + - + Text="{Binding}" + FontSize="11" + Foreground="Black"> + . . . - . . . @@ -221,6 +221,7 @@ ColumnSeries series = new ColumnSeries(); series.DataLabelSettings = new CartesianDataLabelSettings() { Position = DataLabelPosition.Outer, + Context = LabelContext.YValue, ContentTemplate = chart.Resources["dataLabelTemplate"] as DataTemplate }; @@ -232,6 +233,8 @@ chart.Series.Add(series); ![Data label template in WinUI chart](DataLabel_images/winui_chart_data_label_template.png) +N> The binding context for the DataLabelSettings `ContentTemplate` is [Context](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_Context), which is used to customize the content of data labels. This property defines the value displayed in the data label, such as the X value or any other value from the underlying model object. By default, the value of `Context` is [YValue](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.LabelContext.html#Syncfusion_UI_Xaml_Charts_LabelContext_YValue). + ## Format The [Format](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_Format) property can be used to format the data labels. @@ -239,6 +242,7 @@ The [Format](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.Char {% tabs %} {% highlight xaml %} + . . . @@ -261,8 +265,8 @@ ColumnSeries series = new ColumnSeries(); series.DataLabelSettings = new CartesianDataLabelSettings() { Format = "#.000", - Position = DataLabelPosition.Outer - Background = new SolidColorBrush(Colors.Transparent), + Position = DataLabelPosition.Outer, + Background = new SolidColorBrush(Colors.Transparent), }; chart.Series.Add(series); @@ -290,6 +294,7 @@ The [Rotation](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.Ch + {% endhighlight %} {% highlight c# %} @@ -329,8 +334,7 @@ N> This behavior varies based on the chart series type. . . . - + @@ -381,10 +385,8 @@ The connector line can be customized using the below properties. . . . @@ -433,8 +435,7 @@ chart.Series.Add(series); . . . - + diff --git a/winui/Cartesian-Charts/Getting-Started.md b/winui/Cartesian-Charts/Getting-Started.md index 96213e7c0..e21023f5c 100644 --- a/winui/Cartesian-Charts/Getting-Started.md +++ b/winui/Cartesian-Charts/Getting-Started.md @@ -47,7 +47,6 @@ namespace SfChart_GettingStarted public MainWindow() { InitializeComponent(); - SfCartesianChart chart = new SfCartesianChart(); grid.Children.Add(chart); } @@ -128,7 +127,7 @@ N> Add namespace of `ViewModel` class to your XAML Page if you prefer to set `Da - + @@ -352,11 +351,10 @@ Tooltips are used to show information about the segment, when hovers on the segm ... - + ... @@ -394,22 +392,23 @@ The following code example gives you the complete code of above configurations. + - + + - - + + Text="{Binding Item._XAxesData}"/> @@ -505,3 +505,5 @@ chart.Legend = new ChartLegend() {% endtabs %} ![Legend ItemTemplate support in WinUI Chart](Legend_images/WinUI_chart_legend_itemTemplate.png) + +N> The [Item](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.LegendItem.html#Syncfusion_UI_Xaml_Charts_LegendItem_Item) can be used to access the data linked to the associated model class. The binding context for ChartLegend `ItemTemplate` is [LegendItem](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.LegendItem.html), which provides the necessary data for the legend labels. \ No newline at end of file diff --git a/winui/Cartesian-Charts/Line.md b/winui/Cartesian-Charts/Line.md index ecb2bdf14..a7cccfc09 100644 --- a/winui/Cartesian-Charts/Line.md +++ b/winui/Cartesian-Charts/Line.md @@ -30,7 +30,7 @@ keywords: winui line chart, winui sfcartesianchart, winui line chart customizati . . . - - + {% endhighlight %} @@ -85,16 +84,14 @@ The following code example demonstrates the spline series segment selection by c . . . - - + - + {% endhighlight %} @@ -108,7 +105,7 @@ SplineSeries series = new SplineSeries() { ItemsSource = new ViewModel().Data, XBindingPath = "Demand", - YBindingPath = "Year2010" + YBindingPath = "Year2010", ShowDataLabels="True" }; @@ -136,9 +133,8 @@ Series selection is used to highlight a particular series when using multiple se . . . - - + + . . . @@ -169,20 +165,17 @@ Cartesian chart provides support to select single or multiple segments/series by {% highlight xaml %} -. . . - +. . . - + - {% endhighlight %} @@ -264,13 +257,11 @@ Cartesian chart provides support to select a point programmatically on a chart u XBindingPath="Demand" YBindingPath="Year2010"> - + - {% endhighlight %} @@ -310,9 +301,8 @@ Select a series programmatically on a chart using the [SelectedIndex](https://he . . . - + . . . @@ -350,10 +340,9 @@ Cartesian chart provides support to select multiple points programmatically on a XBindingPath="Demand" YBindingPath="Year2010"> - + @@ -373,7 +362,7 @@ ColumnSeries series = new ColumnSeries() DataPointSelectionBehavior selection = new DataPointSelectionBehavior() { - SelectionBrush = new SolidColorBrush(Colors.BlueViolet), + SelectionBrush = new SolidColorBrush(Colors.BlueViolet), Type = ChartSelectionType.Multiple, SelectedIndexes = new List() { 1, 3 } }; diff --git a/winui/Cartesian-Charts/Stacked.md b/winui/Cartesian-Charts/Stacked.md index 24b782da5..26d066f79 100644 --- a/winui/Cartesian-Charts/Stacked.md +++ b/winui/Cartesian-Charts/Stacked.md @@ -41,6 +41,7 @@ The [StackedColumnSeries](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xam ItemsSource="{Binding MedalDetails}"/> ... + {% endhighlight %} {% highlight c# %} diff --git a/winui/Cartesian-Charts/Title.md b/winui/Cartesian-Charts/Title.md index dfdb892a1..04bf2f963 100644 --- a/winui/Cartesian-Charts/Title.md +++ b/winui/Cartesian-Charts/Title.md @@ -43,7 +43,7 @@ Chart provides support to add any `UIElement` as a title. The following code exa {% highlight xaml %} - + + Text="Chart Area Header" + Margin="5"/> @@ -98,8 +98,7 @@ The title text content can be aligned horizontally to the left, center or right {% highlight xaml %} - + . . . + Text="Chart Area Header" + Margin="5"/> . . . diff --git a/winui/Cartesian-Charts/Tooltip.md b/winui/Cartesian-Charts/Tooltip.md index 43508676b..bc0f2a773 100644 --- a/winui/Cartesian-Charts/Tooltip.md +++ b/winui/Cartesian-Charts/Tooltip.md @@ -583,26 +583,26 @@ The [SfCartesianChart](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.C - + + Foreground="Black" + FontWeight="Medium" + FontSize="12" + HorizontalAlignment="Center" + VerticalAlignment="Center"/> + Foreground="Black" + FontWeight="Medium" + FontSize="12" + HorizontalAlignment="Center" + VerticalAlignment="Center"/> + Foreground="Black" + FontWeight="Medium" + FontSize="12" + HorizontalAlignment="Center" + VerticalAlignment="Center"/> . . . @@ -667,3 +667,5 @@ this.Content = chart; ![Tooltip template in WinUI Chart](Tooltip_images/WinUI_chart_tooltip_customization.png) +N> The [Item](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartSegment.html#Syncfusion_UI_Xaml_Charts_ChartSegment_Item) can be used to access the data linked to the associated model class. The binding context for Chart `TooltipTemplate` is [ChartSegment](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartSegment.html), which provides the necessary data for the tooltip labels. + diff --git a/winui/Cartesian-Charts/Trackball.md b/winui/Cartesian-Charts/Trackball.md index 73a0b3823..55d1ce39a 100644 --- a/winui/Cartesian-Charts/Trackball.md +++ b/winui/Cartesian-Charts/Trackball.md @@ -177,15 +177,13 @@ By default, the trackball symbol is displayed as ellipse. To change the default . . - . . . - + . . . @@ -274,13 +272,13 @@ The appearance of the axis label can be customized by using the [TrackballLabelT + Padding="6,0,6,6"> + Text="{Binding ValueX}" + FontSize="15"/> @@ -516,14 +514,13 @@ The following screenshot illustrates the trackball label for multiple series, wh . . . - + - + BorderThickness="1" + BorderBrush="Black" + Background="LightGreen" + Padding="5"> + @@ -568,6 +565,8 @@ chart.Series.Add(series); ![Trackball templte support for Trackball in WinUI Chart](Trackball_images/WinUI_chart_trackball_label_template.png) +N> The binding context for Chart `TrackballLabelTemplate` is [ChartPointInfo](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartPointInfo.html), which provides the necessary data for the trackball labels. + ### Applying Series Interior Interior color of the series is applied to the series label by setting [UseSeriesPalette](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartTrackballBehavior.html#Syncfusion_UI_Xaml_Charts_ChartTrackballBehavior_UseSeriesPalette) to true as shown in the following code snippet. @@ -582,6 +581,7 @@ Interior color of the series is applied to the series label by setting [UseSerie ... + {% endhighlight %} {% highlight c# %} diff --git a/winui/Circular-Charts/Appearance.md b/winui/Circular-Charts/Appearance.md index 065b636cc..30beb621d 100644 --- a/winui/Circular-Charts/Appearance.md +++ b/winui/Circular-Charts/Appearance.md @@ -1,6 +1,6 @@ --- layout: post -title: Appearance in WinUI Chart control | Syncfusion +title: Appearance in WinUI Circular Chart control | Syncfusion description: This section explains about how to apply palettes and gradient in the Syncfusion® WinUI Chart (SfCircularChart) control platform: WinUI control: SfCircularChart @@ -110,25 +110,25 @@ The gradient for the circular chart can be set by using the [PaletteBrushes](htt - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + diff --git a/winui/Circular-Charts/DataLabels.md b/winui/Circular-Charts/DataLabels.md index dc523860b..0c1047453 100644 --- a/winui/Circular-Charts/DataLabels.md +++ b/winui/Circular-Charts/DataLabels.md @@ -111,9 +111,9 @@ The following properties are used to customize the data label. FontFamily="Calibri" BorderBrush="Black" BorderThickness="1" - Margin="1" + Margin="1" FontStyle="Italic" - Background="#1E88E5" + Background="#1E88E5" Context="Percentage"/> . . . @@ -164,26 +164,27 @@ The appearance of the data label can be customized using [ContentTemplate](https + Text="{Binding Item.Product}"/> + -... + ... - + -. . . + ... + {% endhighlight %} {% highlight c# %} @@ -207,6 +208,8 @@ chart.Series.Add(series); ![Template support for data label in WinUI Chart](DataLabel_Images/WinUI_pie_chart_data_label_template.png) +N> The binding context for the DataLabelSettings `ContentTemplate` is [Context](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_Context), which is used to customize the content of data labels. This property defines the value displayed in the data label, such as the X value or any other value from the underlying model object. By default, the value of `Context` is [YValue](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.LabelContext.html#Syncfusion_UI_Xaml_Charts_LabelContext_YValue). + ## Position [SfCircularChart](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfCircularChart.html) providing additional customization option to position the data label smartly based on series types using [Position](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.CircularDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_CircularDataLabelSettings_Position) property. @@ -227,10 +230,9 @@ The following are the values for this property: . . . - + . . . @@ -271,10 +273,9 @@ chart.Series.Add(series); . . . - + . . . @@ -328,13 +329,12 @@ The connector line can be customized using the below properties. . . . - + @@ -377,15 +377,15 @@ chart.Series.Add(series); . . . - + + {% endhighlight %} {% highlight c# %} @@ -424,11 +424,10 @@ The [UseSeriesPalette](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.C . . . - + diff --git a/winui/Circular-Charts/DoughnutChart.md b/winui/Circular-Charts/DoughnutChart.md index 962d63f76..fce2a961d 100644 --- a/winui/Circular-Charts/DoughnutChart.md +++ b/winui/Circular-Charts/DoughnutChart.md @@ -56,21 +56,22 @@ Circular chart provides support add the multiple doughnut series in a single cha + XBindingPath="Product" + YBindingPath="SalesRate1"> + XBindingPath="Product" + YBindingPath="SalesRate2"> + XBindingPath="Product" + YBindingPath="SalesRate3"> + {% endhighlight %} {% highlight c# %} @@ -111,8 +112,8 @@ The [InnerRadius](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts + XBindingPath="Product" + YBindingPath="SalesRate" /> @@ -148,9 +149,9 @@ By using the [StartAngle](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xam + ItemsSource="{Binding Data}" + XBindingPath="Product" + YBindingPath="SalesRate" /> diff --git a/winui/Circular-Charts/Explode.md b/winui/Circular-Charts/Explode.md index a99a10e26..2c8fb7f4a 100644 --- a/winui/Circular-Charts/Explode.md +++ b/winui/Circular-Charts/Explode.md @@ -25,12 +25,11 @@ Exploding a segment is used to pull attention to a specific area of the circular . . . - + ItemsSource="{Binding Data}" + ExplodeIndex="2" + ExplodeRadius="10" + XBindingPath="Utilization" + YBindingPath="ResponseTime" /> {% endhighlight %} @@ -67,11 +66,10 @@ N> By default [ExplodeRadius](https://help.syncfusion.com/cr/winui/Syncfusion.UI . . . - + ExplodeRadius="15" + XBindingPath="Category" + ItemsSource="{Binding Data}" + YBindingPath="Value"> {% endhighlight %} diff --git a/winui/Circular-Charts/Getting-Started.md b/winui/Circular-Charts/Getting-Started.md index 8b609d951..428aaae42 100644 --- a/winui/Circular-Charts/Getting-Started.md +++ b/winui/Circular-Charts/Getting-Started.md @@ -294,9 +294,9 @@ The following code example gives you the complete code of above configurations. diff --git a/winui/Circular-Charts/Legend.md b/winui/Circular-Charts/Legend.md index fd82c3bd2..3c59616e8 100644 --- a/winui/Circular-Charts/Legend.md +++ b/winui/Circular-Charts/Legend.md @@ -94,7 +94,6 @@ Legend icon represents a symbol associated with the each legend item. [LegendIco - @@ -175,16 +174,16 @@ Circular chart provides support to add custom icon for the legend using [LegendI + Width="15" + Fill="White" + Stroke="#4a4a4a" + StrokeThickness="2"/> + - + . . . - + @@ -361,12 +359,13 @@ The legend background appearance can be customized by using the below properties {% tabs %} {% highlight xaml %} + . . . @@ -399,32 +398,29 @@ Customize each legend item by using [ItemTemplate](https://help.syncfusion.com/c {% highlight xaml %} - - - - - - + + + + + + FontWeight="SemiBold" + Text="{Binding Item._XAxesData}"/> - - + . . . - {% endhighlight %} @@ -434,7 +430,6 @@ SfCircularChart chart = new SfCircularChart(); . . . chart.Legend = new ChartLegend() { - ItemTemplate = grid.Resources["itemTemplate"] as DataTemplate }; @@ -444,3 +439,5 @@ chart.Legend = new ChartLegend() ![Item template support for legend in WinUI Pie Chart](Legend_Images/WinUI_pie_chart_legend_template.png) +N> The [Item](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.LegendItem.html#Syncfusion_UI_Xaml_Charts_LegendItem_Item) can be used to access the data linked to the associated model class. The binding context for ChartLegend `ItemTemplate` is [LegendItem](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.LegendItem.html), which provides the necessary data for the legend labels. + diff --git a/winui/Circular-Charts/PieChart.md b/winui/Circular-Charts/PieChart.md index fa36a66bd..9457f85a6 100644 --- a/winui/Circular-Charts/PieChart.md +++ b/winui/Circular-Charts/PieChart.md @@ -99,6 +99,7 @@ The default value of the [GroupTo](https://help.syncfusion.com/cr/winui/Syncfusi {% tabs %} {% highlight xaml %} + @@ -107,12 +108,11 @@ The default value of the [GroupTo](https://help.syncfusion.com/cr/winui/Syncfusi YBindingPath="SalesRate" ShowDataLabels="True" GroupTo="1000" - GroupMode="Value"> + GroupMode="Value"> - + diff --git a/winui/Circular-Charts/Selection.md b/winui/Circular-Charts/Selection.md index 779a603a9..b0d6cce3a 100644 --- a/winui/Circular-Charts/Selection.md +++ b/winui/Circular-Charts/Selection.md @@ -1,6 +1,6 @@ --- layout: post -title: Selection in WinUI Chart control | Syncfusion +title: Selection in WinUI Circular Chart control | Syncfusion description: This section explains about how to configure the selection support and its features applying in WinUI Chart (SfCircularChart). platform: WinUI control: SfCircularChart @@ -79,8 +79,7 @@ The circular chart allows to select single or multiple segments using the [Type] - + @@ -124,9 +123,8 @@ The circular chart provides support to select a point programmatically on a char - + @@ -168,10 +166,9 @@ The circular chart provides support to select multiple points programmatically o - + diff --git a/winui/Circular-Charts/Title.md b/winui/Circular-Charts/Title.md index 27d8991a0..79d29fd49 100644 --- a/winui/Circular-Charts/Title.md +++ b/winui/Circular-Charts/Title.md @@ -15,8 +15,8 @@ documentation: ug {% highlight xaml %} - + . . . @@ -47,13 +47,13 @@ Chart provides support to add any `UIElement` as a title. The following code exa . . . + BorderBrush="Black" + Margin="10" + CornerRadius="5"> @@ -101,18 +101,18 @@ The title text content can be aligned horizontally to the left, center or right {% highlight xaml %} + HorizontalHeaderAlignment="Right"> + BorderBrush="Black" + Margin="10" + CornerRadius="5"> diff --git a/winui/Circular-Charts/Tooltip.md b/winui/Circular-Charts/Tooltip.md index a175917ec..3f3d2c3fa 100644 --- a/winui/Circular-Charts/Tooltip.md +++ b/winui/Circular-Charts/Tooltip.md @@ -1,6 +1,6 @@ --- layout: post -title: Tooltip in WinUI Chart control | Syncfusion +title: Tooltip in WinUI Circular Chart control | Syncfusion description: This section explains about how to enable tooltip and its customization in Syncfusion® WinUI Chart (SfCircularChart) control platform: WinUI control: SfCircularChart @@ -182,38 +182,38 @@ Circular chart provides support to customize the appearance of the tooltip by us {% highlight xaml %} - - - - - - - - - - - - -. . . + + + + + + + + + + + + + . . . The [Item](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartSegment.html#Syncfusion_UI_Xaml_Charts_ChartSegment_Item) can be used to access the data linked to the associated model class. The binding context for Chart `TooltipTemplate` is [ChartSegment](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartSegment.html), which provides the necessary data for the tooltip labels. + diff --git a/winui/Funnel-Chart/Appearance.md b/winui/Funnel-Chart/Appearance.md index 1882edfeb..b696e2077 100644 --- a/winui/Funnel-Chart/Appearance.md +++ b/winui/Funnel-Chart/Appearance.md @@ -1,6 +1,6 @@ --- layout: post -title: Appearance in WinUI Chart control | Syncfusion +title: Appearance in WinUI Funnel Chart control | Syncfusion description: This section explains about how to apply palettes and gradient in the Syncfusion® WinUI Chart (SfFunnelChart) control platform: WinUI control: SfFunnelChart @@ -20,10 +20,9 @@ Currently, the [SfFunnelChart](https://help.syncfusion.com/cr/winui/Syncfusion.U {% highlight xaml %} - + ItemsSource="{Binding Data}" + XBindingPath="Category" + YBindingPath="Value"> {% endhighlight %} @@ -64,13 +63,14 @@ The [SfFunnelChart](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Char + ItemsSource="{Binding Data}" + XBindingPath="Category" + YBindingPath="Value" + PaletteBrushes="{StaticResource customBrushes}"> . . . + {% endhighlight %} {% highlight c# %} @@ -113,31 +113,31 @@ The gradient for the funnel chart can be set by using the [PaletteBrushes](https - - + + - - + + - - + + - - + + - + + ItemsSource="{Binding Data}" + XBindingPath="Category" + YBindingPath="Value" + PaletteBrushes="{StaticResource customBrushes}"> . . . diff --git a/winui/Funnel-Chart/Data-label.md b/winui/Funnel-Chart/Data-label.md index db5202208..ec20bfa2b 100644 --- a/winui/Funnel-Chart/Data-label.md +++ b/winui/Funnel-Chart/Data-label.md @@ -1,6 +1,6 @@ --- layout: post -title: Data label in WinUI Chart control | Syncfusion +title: Data label in WinUI Funnel Chart control | Syncfusion description: This section explains about how to add and customize the data labels in Syncfusion® WinUI Chart (SfFunnelChart) control. platform: WinUI control: SfFunnelChart @@ -20,10 +20,10 @@ To define the data label in the chart, set the [ShowDataLabels](https://help.syn {% highlight xaml %} + ShowDataLabels="True" + ItemsSource="{Binding Data}" + XBindingPath="Category" + YBindingPath="Value"> . . . @@ -54,10 +54,10 @@ To customize the content of data labels, need to define [DataLabelSettings](http {% highlight xaml %} + ShowDataLabels="True" + ItemsSource="{Binding Data}" + XBindingPath="Category" + YBindingPath="Value"> . . . @@ -103,21 +103,20 @@ The following properties are used to customize the data label: {% highlight xaml %} + ShowDataLabels="True" + ItemsSource="{Binding Data}" + XBindingPath="Category" + YBindingPath="Value"> . . . - + . . . @@ -162,42 +161,42 @@ The appearance of the data label can be customized by using the [ContentTemplate + Stretch="Uniform" + Fill="LightGreen" + Width="15" + Height="15" + Margin="0,0,0,0" + RenderTransformOrigin="0.5,0.5" + Data="M11.771002,1.993L5.0080013,14.284 10.752002,14.284 6.6450019,22.804 17.900003,11.921 11.655003,11.921 18.472004,1.993z M10.593002,0L22.256004,0 15.440003,9.9280005 22.827004,9.9280005 0,32 7.5790019,16.277 1.637001,16.277z"> + ScaleY="1" /> - + Text="{Binding}" + FontSize="12" + Foreground="White"> + + + ShowDataLabels="True" + ItemsSource="{Binding Data}" + XBindingPath="Category" + YBindingPath="Value"> - + - @@ -210,6 +209,7 @@ chart.ShowDataLabels = true; . . . chart.DataLabelSettings = new FunnelDataLabelSettings() { + Context = LabelContext.YValue, ContentTemplate = this.grid.Resources["dataLabelTemplate"] as DataTemplate }; @@ -221,6 +221,8 @@ this.Content = chart; ![Template support for data label in WinUI Chart](Data-label_images/winui-chart_data_labeltemplate.png) +N> The binding context for the DataLabelSettings `ContentTemplate` is [Context](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_Context), which is used to customize the content of data labels. This property defines the value displayed in the data label, such as the X value or any other value from the underlying model object. By default, the value of `Context` is [YValue](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.LabelContext.html#Syncfusion_UI_Xaml_Charts_LabelContext_YValue). + ## Format The [Format](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_Format) property can be used to format the data labels. The following code example demonstrates how to format data labels with three decimal digits. @@ -230,16 +232,14 @@ The [Format](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.Char {% highlight xaml %} + ShowDataLabels="True" + ItemsSource="{Binding Data}" + XBindingPath="Category" + YBindingPath="Value"> - + - {% endhighlight %} @@ -272,16 +272,16 @@ The [Rotation](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.Ch {% highlight xaml %} + ShowDataLabels="True" + ItemsSource="{Binding Data}" + XBindingPath="Category" + YBindingPath="Value"> - + diff --git a/winui/Funnel-Chart/Explode-segments.md b/winui/Funnel-Chart/Explode-segments.md index fe7a0055f..b96e2ccf9 100644 --- a/winui/Funnel-Chart/Explode-segments.md +++ b/winui/Funnel-Chart/Explode-segments.md @@ -1,6 +1,6 @@ --- layout: post -title: Explode segments in WinUI Chart control | Syncfusion +title: Explode segments in WinUI Funnel Chart control | Syncfusion description: This section explains about how to explode single segment or all segments in Syncfusion® WinUI Chart (SfFunnelChart) control. platform: WinUI control: SfFunnelChart @@ -20,12 +20,11 @@ Exploding a segment is used to pull attention to a specific area of the funnel. {% highlight xaml %} - + ExplodeIndex="3" + ExplodeOffset="30" + ItemsSource="{Binding Data}" + XBindingPath="Category" + YBindingPath="Value"> {% endhighlight %} diff --git a/winui/Funnel-Chart/Getting-Started.md b/winui/Funnel-Chart/Getting-Started.md index 10db791e4..4c13530d3 100644 --- a/winui/Funnel-Chart/Getting-Started.md +++ b/winui/Funnel-Chart/Getting-Started.md @@ -42,7 +42,6 @@ using Syncfusion.UI.Xaml.Charts; public sealed partial class MainWindow : Window { - public MainWindow() { this.InitializeComponent(); @@ -114,7 +113,6 @@ N> If you prefer to set `DataContext` in XAML, add the namespace of the `ViewMod . . . - xmlns:chart="using:Syncfusion.UI.Xaml.Charts" xmlns:model="using:ChartDemo.ViewModel"> @@ -146,9 +144,7 @@ The title of the chart provide quick information to the user about the data bein {% highlight xaml %} - . . . - {% endhighlight %} @@ -156,9 +152,7 @@ The title of the chart provide quick information to the user about the data bein {% highlight C# %} SfFunnelChart chart = new SfFunnelChart(); - . . . - chart.Header = "PRODUCT SALES"; {% endhighlight %} @@ -182,9 +176,7 @@ The [ShowDataLabels](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Cha {% highlight C# %} SfFunnelChart chart = new SfFunnelChart(); - . . . - chart.ShowDataLabels = true; {% endhighlight %} @@ -250,13 +242,14 @@ N> To plot the chart, the [XBindingPath](https://help.syncfusion.com/cr/winui/Sy {% highlight xaml %} - + diff --git a/winui/Funnel-Chart/Legend.md b/winui/Funnel-Chart/Legend.md index cd88a9947..925ec9d5f 100644 --- a/winui/Funnel-Chart/Legend.md +++ b/winui/Funnel-Chart/Legend.md @@ -1,6 +1,6 @@ --- layout: post -title: Legend in WinUI Chart control | Syncfusion +title: Legend in WinUI Funnel Chart control | Syncfusion description: This sections explains about how to configure the legend and its features title, icons, labels, and template in WinUI Chart (SfFunnelChart). platform: WinUI control: SfFunnelChart @@ -54,9 +54,9 @@ The funnel chart provides support to add any `UIElement` as a title for legend. + HorizontalAlignment="Center" + FontWeight="Bold" + Foreground="Blue"/> @@ -105,8 +105,8 @@ The legend icon represents a symbol associated with each legend item. The appear . . . + IconHeight="15" + IconVisibility="Visible"> . . . @@ -248,7 +248,7 @@ To display the legend at the right, set the [Placement](https://help.syncfusion. . . . + Placement="Right"/> . . . @@ -289,9 +289,9 @@ The legend background appearance can be customized by using the following proper . . . + BorderBrush="Black" + BorderThickness="1" + CornerRadius="5" > . . . @@ -324,32 +324,29 @@ Customize each legend item by using the [ItemTemplate](https://help.syncfusion.c {% highlight xaml %} - - - - - - + + + + + + FontWeight="SemiBold" + Text="{Binding Item._XAxesData}"/> - - -. . . + + . . . - {% endhighlight %} @@ -358,7 +355,6 @@ Customize each legend item by using the [ItemTemplate](https://help.syncfusion.c SfFunnelChart chart = new SfFunnelChart(); chart.Legend = new ChartLegend() { - ItemTemplate = grid.Resources["labelTemplate"] as DataTemplate }; . . . @@ -369,3 +365,5 @@ this.Content = chart; {% endtabs %} ![Legend ItemTemplate support in WinUI Chart](Legend_images/winui-chart_legend_item_customizing.png) + +N> The [Item](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.LegendItem.html#Syncfusion_UI_Xaml_Charts_LegendItem_Item) can be used to access the data linked to the associated model class. The binding context for ChartLegend `ItemTemplate` is [LegendItem](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.LegendItem.html), which provides the necessary data for the legend labels. diff --git a/winui/Funnel-Chart/Neck-width.md b/winui/Funnel-Chart/Neck-width.md index 03a648dd6..6bbeac082 100644 --- a/winui/Funnel-Chart/Neck-width.md +++ b/winui/Funnel-Chart/Neck-width.md @@ -50,7 +50,7 @@ The funnel chart can be customized to the inverted pyramid chart by setting the + YBindingPath="Value"> {% endhighlight %} diff --git a/winui/Funnel-Chart/Selection.md b/winui/Funnel-Chart/Selection.md index ca9f2b8e8..f33235698 100644 --- a/winui/Funnel-Chart/Selection.md +++ b/winui/Funnel-Chart/Selection.md @@ -1,6 +1,6 @@ --- layout: post -title: Selection in WinUI Chart control | Syncfusion +title: Selection in WinUI Funnel Chart control | Syncfusion description: Learn here all about selection and multi-selection support in Syncfusion® WinUI Chart (SfFunnelChart) control. platform: WinUI control: SfFunnelChart @@ -84,8 +84,7 @@ N> The `Series` and `MultiSeries` selection types are not supported for the funn YBindingPath="Value"> - + . . . @@ -130,8 +129,7 @@ The funnel chart provides support to select a point programmatically on a chart YBindingPath="Value"> - + @@ -173,9 +171,8 @@ Funnel chart provides support to select multiple points programmatically on a ch YBindingPath="Value"> - + . . . diff --git a/winui/Funnel-Chart/Title.md b/winui/Funnel-Chart/Title.md index 991355023..e817712ad 100644 --- a/winui/Funnel-Chart/Title.md +++ b/winui/Funnel-Chart/Title.md @@ -1,6 +1,6 @@ --- layout: post -title: Title in WinUI Chart control | Syncfusion +title: Title in WinUI Funnel Chart control | Syncfusion description: Learn here all about title with Syncfusion® WinUI Chart (SfFunnelChart) control and its customization. platform: WinUI control: SfFunnelChart @@ -42,16 +42,16 @@ this.Content = chart; {% highlight xaml %} - + + BorderBrush="Black" + Margin="10" + CornerRadius="5"> + Text="PRODUCT SALES" + Margin="5"/> @@ -97,7 +97,7 @@ The title text content can be aligned horizontally to the left, center or right {% highlight xaml %} - + Background="LightBlue" + BorderBrush="Black" + Margin="10" + CornerRadius="5"> + Text="PRODUCT SALES" + Margin="5"/> diff --git a/winui/Funnel-Chart/Tooltip.md b/winui/Funnel-Chart/Tooltip.md index 53d98bb4b..db5c79d98 100644 --- a/winui/Funnel-Chart/Tooltip.md +++ b/winui/Funnel-Chart/Tooltip.md @@ -1,6 +1,6 @@ --- layout: post -title: Tooltip in WinUI Chart control | Syncfusion +title: Tooltip in WinUI Funnel Chart control | Syncfusion description: This section explains about how to enable tooltip and its customization in Syncfusion® WinUI Chart (SfFunnelChart) control platform: WinUI control: SfFunnelChart @@ -144,8 +144,7 @@ The following code example explains how to apply the style for a tooltip label. - + @@ -180,28 +179,28 @@ The following code example explains how to display both x-value and y-value in t {% highlight xaml %} - - - + + + + Foreground="Black" + FontWeight="Medium" + FontSize="12" + HorizontalAlignment="Center" + VerticalAlignment="Center"/> + Foreground="Black" + FontWeight="Medium" + FontSize="12" + HorizontalAlignment="Center" + VerticalAlignment="Center"/> + Foreground="Black" + FontWeight="Medium" + FontSize="12" + HorizontalAlignment="Center" + VerticalAlignment="Center"/> @@ -210,8 +209,8 @@ The following code example explains how to display both x-value and y-value in t - - + +. . . - + + {% endhighlight %} @@ -243,3 +243,5 @@ this.Content = chart; {% endtabs %} ![Tooltip template in WinUI Chart](Tooltip_Images/winui-chart_tooltip_template.png) + +N> The [Item](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartSegment.html#Syncfusion_UI_Xaml_Charts_ChartSegment_Item) can be used to access the data linked to the associated model class. The binding context for Chart `TooltipTemplate` is [ChartSegment](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartSegment.html), which provides the necessary data for the tooltip labels. diff --git a/winui/Polar-Chart/Appearance.md b/winui/Polar-Chart/Appearance.md index fdb95a892..31d4b71e6 100644 --- a/winui/Polar-Chart/Appearance.md +++ b/winui/Polar-Chart/Appearance.md @@ -1,6 +1,6 @@ --- layout: post -title: Appearance in WinUI Chart control | Syncfusion +title: Appearance in WinUI Polar Chart control | Syncfusion description: This section explains about how to apply palettes and gradient in the Syncfusion® WinUI Chart (SfPolarChart) control platform: WinUI control: SfPolarChart @@ -23,22 +23,19 @@ Currently, the [SfPolarChart](https://help.syncfusion.com/cr/winui/Syncfusion.UI GridLineType="Polygon"> ... - + - + - + ... @@ -202,8 +199,7 @@ Gradient color using the [Fill](https://help.syncfusion.com/cr/winui/Syncfusion. - - + ... diff --git a/winui/Polar-Chart/Axis-Labels.md b/winui/Polar-Chart/Axis-Labels.md index fd95d8810..c41fd047d 100644 --- a/winui/Polar-Chart/Axis-Labels.md +++ b/winui/Polar-Chart/Axis-Labels.md @@ -1,6 +1,6 @@ --- layout: post -title: Axis labels in WinUI Chart control | Syncfusion +title: Axis labels in WinUI Polar Chart control | Syncfusion description: Learn here all about the chart axis lables and its customization in Syncfusion® WinUI Chart (SfPolarChart) control. platform: WinUI control: SfPolarChart diff --git a/winui/Polar-Chart/Axis-Types.md b/winui/Polar-Chart/Axis-Types.md index 4c9955a13..533ab2fc4 100644 --- a/winui/Polar-Chart/Axis-Types.md +++ b/winui/Polar-Chart/Axis-Types.md @@ -1,6 +1,6 @@ --- layout: post -title: Axis types in WinUI Chart control | Syncfusion +title: Axis types in WinUI Polar Chart control | Syncfusion description: Learn here all about the axis types and its features in Syncfusion® WinUI Chart (SfPolarChart) control. platform: WinUI control: SfPolarChart diff --git a/winui/Polar-Chart/DataLabel.md b/winui/Polar-Chart/DataLabel.md index d7065583e..32ceeda31 100644 --- a/winui/Polar-Chart/DataLabel.md +++ b/winui/Polar-Chart/DataLabel.md @@ -183,7 +183,7 @@ The appearance of the data label can be customized using the [ContentTemplate](h ... - + ... @@ -201,6 +201,7 @@ series.ShowDataLabels = true; series.DataLabelSettings = new PolarDataLabelSettings() { + Context = LabelContext.YValue, ContentTemplate = grid.Resources["datalabelTemplate"] as DataTemplate, }; ... @@ -211,6 +212,8 @@ series.DataLabelSettings = new PolarDataLabelSettings() ![Template support for data label in WinUI Chart](DataLabel_Images/WinUI_Chart_DataLabel_LabelTemplate.png) +N> The binding context for the DataLabelSettings `ContentTemplate` is [Context](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_Context), which is used to customize the content of data labels. This property defines the value displayed in the data label, such as the X value or any other value from the underlying model object. By default, the value of `Context` is [YValue](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.LabelContext.html#Syncfusion_UI_Xaml_Charts_LabelContext_YValue). + ## Format The [Format](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_Format) property can be used to format the data labels. diff --git a/winui/Polar-Chart/Legend.md b/winui/Polar-Chart/Legend.md index 1a5d573c7..fde1a41e7 100644 --- a/winui/Polar-Chart/Legend.md +++ b/winui/Polar-Chart/Legend.md @@ -1,6 +1,6 @@ --- layout: post -title: Legend in WinUI Chart control | Syncfusion +title: Legend in WinUI Polar Chart control | Syncfusion description: This sections explains about how to configure the legend and its features title, icons, labels, and template in WinUI Chart (SfPolarChart). platform: WinUI control: SfPolarChart @@ -307,28 +307,28 @@ Customize each legend item by using the [ItemTemplate](https://help.syncfusion.c {% highlight xaml %} - + - + - - + + FontWeight="SemiBold" + Text="{Binding Item._XAxesData}"/> - ... + . . . - ... + {% endhighlight %} @@ -348,3 +348,5 @@ chart.Legend = new ChartLegend() ![Legend ItemTemplate support in WinUI Chart](Legend_images/WinUI_Chart_Legend_Item_customizing.png) +N> The [Item](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.LegendItem.html#Syncfusion_UI_Xaml_Charts_LegendItem_Item) can be used to access the data linked to the associated model class. The binding context for ChartLegend `ItemTemplate` is [LegendItem](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.LegendItem.html), which provides the necessary data for the legend labels. + diff --git a/winui/Polar-Chart/Title.md b/winui/Polar-Chart/Title.md index 068784f2f..bceb723c5 100644 --- a/winui/Polar-Chart/Title.md +++ b/winui/Polar-Chart/Title.md @@ -1,6 +1,6 @@ --- layout: post -title: Title in WinUI Chart control | Syncfusion +title: Title in WinUI Polar Chart control | Syncfusion description: Learn here all about the title in Syncfusion® WinUI Chart (SfPolarChart) control and its customization. platform: WinUI control: SfPolarChart @@ -93,10 +93,10 @@ The title text content can be aligned horizontally to the left, center or right + BorderBrush="Black" + Background="LightBlue" + Margin="10" + CornerRadius="5"> - + YBindingPath="Value" {% endhighlight %} @@ -72,6 +71,7 @@ The [SfPyramidChart](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Cha . . . + {% endhighlight %} {% highlight c# %} @@ -114,23 +114,23 @@ Gradient for the pyramid chart can be set by using the [PaletteBrushes](https:// - - + + - - + + - - + + - - + + - + @@ -143,6 +143,7 @@ Gradient for the pyramid chart can be set by using the [PaletteBrushes](https:// . . . + {% endhighlight %} {% highlight c# %} diff --git a/winui/Pyramid-Chart/Data-label.md b/winui/Pyramid-Chart/Data-label.md index 3d4f8ca98..ac2e96204 100644 --- a/winui/Pyramid-Chart/Data-label.md +++ b/winui/Pyramid-Chart/Data-label.md @@ -111,13 +111,13 @@ The following properties are used to customize the data label: . . . + FontSize="16" + FontFamily="Calibri" + BorderBrush="White" + BorderThickness="1" + Margin="1" + FontStyle="Italic" + Background="#1E88E5" /> . . . @@ -162,28 +162,28 @@ The appearance of the data label can be customized by using the [ContentTemplate + Stretch="Uniform" + Fill="LightGreen" + Width="15" + Height="15" + Margin="0,0,0,0" + RenderTransformOrigin="0.5,0.5" + Data="M11.771002,1.993L5.0080013,14.284 10.752002,14.284 6.6450019,22.804 17.900003,11.921 11.655003,11.921 18.472004,1.993z M10.593002,0L22.256004,0 15.440003,9.9280005 22.827004,9.9280005 0,32 7.5790019,16.277 1.637001,16.277z"> + ScaleY="1" /> - + Text="{Binding}" + FontSize="12" + Foreground="White"> + @@ -194,10 +194,9 @@ The appearance of the data label can be customized by using the [ContentTemplate XBindingPath="Category" YBindingPath="Value"> - + - @@ -210,6 +209,7 @@ chart.ShowDataLabels = true; . . . chart.DataLabelSettings = new PyramidDataLabelSettings() { + Context = LabelContext.YValue, ContentTemplate = this.grid.Resources["dataLabelTemplate"] as DataTemplate }; @@ -221,6 +221,8 @@ this.Content = chart; ![Template support for data label in WinUI Chart](Data-label_images/WinUI_chart_data_labeltemplate.png) +N> The binding context for the DataLabelSettings `ContentTemplate` is [Context](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_Context), which is used to customize the content of data labels. This property defines the value displayed in the data label, such as the X value or any other value from the underlying model object. By default, the value of `Context` is [YValue](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.LabelContext.html#Syncfusion_UI_Xaml_Charts_LabelContext_YValue). + ## Format The [Format](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_Format) property is used to format the data labels. The following code example demonstrates how to format data labels with three decimal digits. @@ -237,7 +239,7 @@ The [Format](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.Char + Foreground="White" /> @@ -279,9 +281,9 @@ The [Rotation](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.Ch + BorderBrush="White" + BorderThickness="1" + Background="#1E88E5"/> diff --git a/winui/Pyramid-Chart/Explode-segments.md b/winui/Pyramid-Chart/Explode-segments.md index dc4415ad2..3e1325f3a 100644 --- a/winui/Pyramid-Chart/Explode-segments.md +++ b/winui/Pyramid-Chart/Explode-segments.md @@ -1,6 +1,6 @@ --- layout: post -title: Explode segments in WinUI Chart control | Syncfusion +title: Explode segments in WinUI Pyramid Chart control | Syncfusion description: This section explains about how to explode single segment or all segments in Syncfusion® WinUI Chart (SfPyramidChart) control. platform: WinUI control: SfPyramidChart @@ -20,12 +20,11 @@ Exploding a segment is used to pull attention to a specific area of the pyramid. {% highlight xaml %} - + ExplodeIndex="3" + ExplodeOffset="30" + ItemsSource="{Binding Data}" + XBindingPath="Category" + YBindingPath="Value"> {% endhighlight %} diff --git a/winui/Pyramid-Chart/Legend.md b/winui/Pyramid-Chart/Legend.md index a628d65c5..207be5f75 100644 --- a/winui/Pyramid-Chart/Legend.md +++ b/winui/Pyramid-Chart/Legend.md @@ -1,6 +1,6 @@ --- layout: post -title: Legend in WinUI Chart control | Syncfusion +title: Legend in WinUI Pyramid Chart control | Syncfusion description: This sections explains about how to configure the legend and its features title, icons, labels, and template in WinUI Chart(SfPyramidChart) control. platform: WinUI control: SfPyramidChart @@ -107,7 +107,7 @@ The legend icon represents a symbol associated with each legend item. The appear . . . @@ -248,7 +248,7 @@ By using the [Placement](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml . . . + Placement="Left"/> . . . @@ -324,32 +324,29 @@ Customize each legend item by using the [ItemTemplate](https://help.syncfusion.c {% highlight xaml %} - - - - - - + + + + + + FontWeight="SemiBold" + Text="{Binding Item._XAxesData}"/> - - + . . . - - - - - + + + + + {% endhighlight %} @@ -369,4 +366,6 @@ this.Content = chart; ![Legend ItemTemplate support in WinUI Chart](Legend_Images/WinUI_chart_legend_itemTemplate.png) +N> The [Item](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.LegendItem.html#Syncfusion_UI_Xaml_Charts_LegendItem_Item) can be used to access the data linked to the associated model class. The binding context for ChartLegend `ItemTemplate` is [LegendItem](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.LegendItem.html), which provides the necessary data for the legend labels. + diff --git a/winui/Pyramid-Chart/Selection.md b/winui/Pyramid-Chart/Selection.md index da449ec34..75a8799e2 100644 --- a/winui/Pyramid-Chart/Selection.md +++ b/winui/Pyramid-Chart/Selection.md @@ -1,6 +1,6 @@ --- layout: post -title: Selection in WinUI Chart control | Syncfusion +title: Selection in WinUI Pyramid Chart control | Syncfusion description: Learn here all about selection and multi-selection support in Syncfusion® WinUI Chart (SfPyramidChart) control. platform: WinUI control: SfPyramidChart @@ -38,11 +38,9 @@ To enable the selection in the chart, create an instance of the [DataPointSelect ItemsSource="{Binding Data}" XBindingPath="Category" YBindingPath="Value"> - - {% endhighlight %} @@ -83,9 +81,8 @@ N> `Series` and `MultiSeries` selection type is not support for pyramid chart. YBindingPath="Value"> - + . . . @@ -130,9 +127,8 @@ Pyramid chart provides support to select a point programmatically on a chart usi YBindingPath="Value"> - + @@ -174,10 +170,9 @@ Pyramid chart provides support to select multiple points programmatically on a c YBindingPath="Value"> - + . . . diff --git a/winui/Pyramid-Chart/Title.md b/winui/Pyramid-Chart/Title.md index 38a12b583..54459ed3e 100644 --- a/winui/Pyramid-Chart/Title.md +++ b/winui/Pyramid-Chart/Title.md @@ -1,6 +1,6 @@ --- layout: post -title: Title in WinUI Chart control | Syncfusion +title: Title in WinUI Pyramid Chart control | Syncfusion description: Learn here all about title with Syncfusion® WinUI Chart(SfPyramidChart) control and its customization. platform: WinUI control: SfPyramidChart @@ -42,16 +42,16 @@ The pyramid chart provides support to add any `UIElement` as a title. The follow {% highlight xaml %} - + + BorderBrush="Black" + Margin="10" + CornerRadius="5"> + Text="The Food Comparison Pyramid" + Margin="5"/> diff --git a/winui/Pyramid-Chart/Tooltip.md b/winui/Pyramid-Chart/Tooltip.md index 668716cf6..cf6af18b2 100644 --- a/winui/Pyramid-Chart/Tooltip.md +++ b/winui/Pyramid-Chart/Tooltip.md @@ -1,6 +1,6 @@ --- layout: post -title: Tooltip in WinUI Chart control | Syncfusion +title: Tooltip in WinUI Pyramid Chart control | Syncfusion description: This section explains about how to enable tooltip and its customization in Syncfusion® WinUI Chart(SfPyramidChart) control. platform: WinUI control: SfPyramidChart @@ -23,8 +23,7 @@ To define the tooltip in the chart, set the [EnableTooltip](https://help.syncfus EnableTooltip="True" ItemsSource="{Binding Data}" XBindingPath="Category" - YBindingPath="Value"> - + YBindingPath="Value"> {% endhighlight %} @@ -151,8 +150,7 @@ The tooltip label style can be customized by using the [LabelStyle](https://help - + . . . @@ -188,38 +186,38 @@ The pyramid chart provides support to customize the appearance of the tooltip by {% highlight xaml %} - - - + + + + Foreground="Black" + FontWeight="Medium" + FontSize="12" + HorizontalAlignment="Center" + VerticalAlignment="Center"/> + Foreground="Black" + FontWeight="Medium" + FontSize="12" + HorizontalAlignment="Center" + VerticalAlignment="Center"/> + Foreground="Black" + FontWeight="Medium" + FontSize="12" + HorizontalAlignment="Center" + VerticalAlignment="Center"/> - + . . . - - + +. . . - + + {% endhighlight %} @@ -251,3 +250,5 @@ this.Content = chart; {% endtabs %} ![Tooltip template in WinUI Chart](Tooltip_Images/WinUI_chart_tooltip_template.png) + +N> The [Item](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartSegment.html#Syncfusion_UI_Xaml_Charts_ChartSegment_Item) can be used to access the data linked to the associated model class. The binding context for Chart `TooltipTemplate` is [ChartSegment](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartSegment.html), which provides the necessary data for the tooltip labels.