diff --git a/winui-toc.html b/winui-toc.html index 413154bcb..44dbfc0a6 100644 --- a/winui-toc.html +++ b/winui-toc.html @@ -233,6 +233,7 @@
  • Selection
  • Tooltip
  • Trackball
    • +
  • Crosshair
  • Zooming and Panning
  • Appearance
    • diff --git a/winui/Cartesian-Charts/Crosshair.md b/winui/Cartesian-Charts/Crosshair.md new file mode 100644 index 000000000..9287c171e --- /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 xml %} + + + + + + ... + + +{% 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 xml %} + + + + + + . . . + + + + + +{% 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..038983200 100644 --- a/winui/Cartesian-Charts/DataLabels.md +++ b/winui/Cartesian-Charts/DataLabels.md @@ -203,7 +203,8 @@ The appearance of the data label can be customized using the [ContentTemplate](h . . . - . . . @@ -221,6 +222,7 @@ ColumnSeries series = new ColumnSeries(); series.DataLabelSettings = new CartesianDataLabelSettings() { Position = DataLabelPosition.Outer, + Context = LabelContext.YValue, ContentTemplate = chart.Resources["dataLabelTemplate"] as DataTemplate }; @@ -232,6 +234,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. diff --git a/winui/Cartesian-Charts/Getting-Started.md b/winui/Cartesian-Charts/Getting-Started.md index 96213e7c0..a07d12dce 100644 --- a/winui/Cartesian-Charts/Getting-Started.md +++ b/winui/Cartesian-Charts/Getting-Started.md @@ -395,7 +395,7 @@ The following code example gives you the complete code of above configurations. - + diff --git a/winui/Cartesian-Charts/Legend.md b/winui/Cartesian-Charts/Legend.md index 3ae575d27..4bf288d38 100644 --- a/winui/Cartesian-Charts/Legend.md +++ b/winui/Cartesian-Charts/Legend.md @@ -469,18 +469,18 @@ Customize each legend item by using the [`ItemTemplate`](https://help.syncfusion - + + 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/Tooltip.md b/winui/Cartesian-Charts/Tooltip.md index 43508676b..98b4b6ac9 100644 --- a/winui/Cartesian-Charts/Tooltip.md +++ b/winui/Cartesian-Charts/Tooltip.md @@ -583,7 +583,7 @@ The [SfCartesianChart](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.C - + 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..1c672f200 100644 --- a/winui/Cartesian-Charts/Trackball.md +++ b/winui/Cartesian-Charts/Trackball.md @@ -516,15 +516,15 @@ The following screenshot illustrates the trackball label for multiple series, wh . . . - + - - + BorderThickness="1" + BorderBrush="Black" + Background="LightGreen" + Padding="5"> + + . . . @@ -568,6 +568,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. diff --git a/winui/Circular-Charts/DataLabels.md b/winui/Circular-Charts/DataLabels.md index dc523860b..f5b39eff9 100644 --- a/winui/Circular-Charts/DataLabels.md +++ b/winui/Circular-Charts/DataLabels.md @@ -207,6 +207,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. diff --git a/winui/Circular-Charts/Legend.md b/winui/Circular-Charts/Legend.md index fd82c3bd2..457e2b7d1 100644 --- a/winui/Circular-Charts/Legend.md +++ b/winui/Circular-Charts/Legend.md @@ -399,32 +399,29 @@ Customize each legend item by using [ItemTemplate](https://help.syncfusion.com/c {% highlight xaml %} - - - - - - + + + + + + FontWeight="SemiBold" + Text="{Binding Item._XAxesData}"/> - - + . . . - {% endhighlight %} @@ -444,3 +441,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/Tooltip.md b/winui/Circular-Charts/Tooltip.md index a175917ec..ad7d20e26 100644 --- a/winui/Circular-Charts/Tooltip.md +++ b/winui/Circular-Charts/Tooltip.md @@ -182,37 +182,37 @@ 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/Data-label.md b/winui/Funnel-Chart/Data-label.md index db5202208..bb72ca425 100644 --- a/winui/Funnel-Chart/Data-label.md +++ b/winui/Funnel-Chart/Data-label.md @@ -195,6 +195,7 @@ The appearance of the data label can be customized by using the [ContentTemplate @@ -210,6 +211,7 @@ chart.ShowDataLabels = true; . . . chart.DataLabelSettings = new FunnelDataLabelSettings() { + Context = LabelContext.YValue, ContentTemplate = this.grid.Resources["dataLabelTemplate"] as DataTemplate }; @@ -221,6 +223,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. diff --git a/winui/Funnel-Chart/Legend.md b/winui/Funnel-Chart/Legend.md index cd88a9947..558e8d2ee 100644 --- a/winui/Funnel-Chart/Legend.md +++ b/winui/Funnel-Chart/Legend.md @@ -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,3 +366,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/Tooltip.md b/winui/Funnel-Chart/Tooltip.md index 53d98bb4b..df0467d20 100644 --- a/winui/Funnel-Chart/Tooltip.md +++ b/winui/Funnel-Chart/Tooltip.md @@ -180,9 +180,9 @@ The following code example explains how to display both x-value and y-value in t {% highlight xaml %} - - - + + + - - + +. . . - + + {% endhighlight %} @@ -243,3 +244,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/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..1ad8ee13a 100644 --- a/winui/Polar-Chart/Legend.md +++ b/winui/Polar-Chart/Legend.md @@ -309,26 +309,26 @@ Customize each legend item by using the [ItemTemplate](https://help.syncfusion.c - + - - + + 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/Pyramid-Chart/Data-label.md b/winui/Pyramid-Chart/Data-label.md index 3d4f8ca98..a898b171b 100644 --- a/winui/Pyramid-Chart/Data-label.md +++ b/winui/Pyramid-Chart/Data-label.md @@ -195,6 +195,7 @@ The appearance of the data label can be customized by using the [ContentTemplate YBindingPath="Value"> @@ -210,6 +211,7 @@ chart.ShowDataLabels = true; . . . chart.DataLabelSettings = new PyramidDataLabelSettings() { + Context = LabelContext.YValue, ContentTemplate = this.grid.Resources["dataLabelTemplate"] as DataTemplate }; @@ -221,6 +223,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. diff --git a/winui/Pyramid-Chart/Legend.md b/winui/Pyramid-Chart/Legend.md index a628d65c5..132b9e038 100644 --- a/winui/Pyramid-Chart/Legend.md +++ b/winui/Pyramid-Chart/Legend.md @@ -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/Tooltip.md b/winui/Pyramid-Chart/Tooltip.md index 668716cf6..c568d6666 100644 --- a/winui/Pyramid-Chart/Tooltip.md +++ b/winui/Pyramid-Chart/Tooltip.md @@ -188,21 +188,21 @@ The pyramid chart provides support to customize the appearance of the tooltip by {% highlight xaml %} - - - + + + - + . . . - - + +. . . - + + {% endhighlight %} @@ -251,3 +252,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.