-
Notifications
You must be signed in to change notification settings - Fork 219
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2842 from telerik/martinivanoff/m-chartview-axis-…
…title ChartView: Add information about the Title and TitleTemplate properti…
- Loading branch information
Showing
3 changed files
with
121 additions
and
0 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| --- | ||
| title: Axis Title | ||
| page_title: Axis Title | ||
| description: This article outlines the axis title customization abilities in the RadChartView suite. | ||
| slug: radchartview-axes-title | ||
| tags: axis,title | ||
| published: True | ||
| position: 4 | ||
| --- | ||
|
|
||
| # Axis Title | ||
|
|
||
| The chart axes allows you to display a title aligned next to the axis line. | ||
|
|
||
| To show the title, set the `Title` property of the axis element (`LinearAxis`, `CategoricalAxis`, etc.). | ||
|
|
||
| #### __[XAML] Setting the axis title to a string value__ | ||
| {{region radchartview-axes-title-0}} | ||
| <telerik:RadCartesianChart> | ||
| <telerik:RadCartesianChart.HorizontalAxis> | ||
| <telerik:CategoricalAxis Title="Month"/> | ||
| </telerik:RadCartesianChart.HorizontalAxis> | ||
| <telerik:RadCartesianChart.VerticalAxis> | ||
| <telerik:LinearAxis Title="Value" /> | ||
| </telerik:RadCartesianChart.VerticalAxis> | ||
| <telerik:RadCartesianChart.Series> | ||
| <telerik:BarSeries> | ||
| <telerik:BarSeries.DataPoints> | ||
| <telerik:CategoricalDataPoint Category="January" Value="2" /> | ||
| <telerik:CategoricalDataPoint Category="February" Value="5" /> | ||
| <telerik:CategoricalDataPoint Category="March" Value="3" /> | ||
| </telerik:BarSeries.DataPoints> | ||
| </telerik:BarSeries> | ||
| </telerik:RadCartesianChart.Series> | ||
| </telerik:RadCartesianChart> | ||
| {{endregion}} | ||
|
|
||
|  | ||
|
|
||
| #### __[XAML] Setting the axis title to a visual element__ | ||
| {{region radchartview-axes-title-1}} | ||
| <telerik:RadCartesianChart> | ||
| <telerik:RadCartesianChart.HorizontalAxis> | ||
| <telerik:CategoricalAxis> | ||
| <telerik:CategoricalAxis.Title> | ||
| <Border Background="Bisque" Padding="10 5"> | ||
| <TextBlock Text="Month" /> | ||
| </Border> | ||
| </telerik:CategoricalAxis.Title> | ||
| </telerik:CategoricalAxis> | ||
| </telerik:RadCartesianChart.HorizontalAxis> | ||
| <telerik:RadCartesianChart.VerticalAxis> | ||
| <telerik:LinearAxis> | ||
| <telerik:LinearAxis.Title> | ||
| <Border Background="BlueViolet" Padding="10 5"> | ||
| <TextBlock Text="Value" Foreground="White"/> | ||
| </Border> | ||
| </telerik:LinearAxis.Title> | ||
| </telerik:LinearAxis> | ||
| </telerik:RadCartesianChart.VerticalAxis> | ||
| <telerik:RadCartesianChart.Series> | ||
| <telerik:BarSeries> | ||
| <telerik:BarSeries.DataPoints> | ||
| <telerik:CategoricalDataPoint Category="January" Value="2" /> | ||
| <telerik:CategoricalDataPoint Category="February" Value="5" /> | ||
| <telerik:CategoricalDataPoint Category="March" Value="3" /> | ||
| </telerik:BarSeries.DataPoints> | ||
| </telerik:BarSeries> | ||
| </telerik:RadCartesianChart.Series> | ||
| </telerik:RadCartesianChart> | ||
| {{endregion}} | ||
|
|
||
|  | ||
|
|
||
| The axis can be customized also through the `TitleTemplate` property. | ||
|
|
||
| #### __[XAML] Setting Axis TitleTemplate__ | ||
| {{region radchartview-axes-title-2}} | ||
| <telerik:RadCartesianChart > | ||
| <telerik:RadCartesianChart.HorizontalAxis> | ||
| <telerik:CategoricalAxis Title="Month"> | ||
| <telerik:CategoricalAxis.TitleTemplate> | ||
| <DataTemplate> | ||
| <Border Background="Bisque" Padding="10 5"> | ||
| <TextBlock Text="{Binding}" /> | ||
| </Border> | ||
| </DataTemplate> | ||
| </telerik:CategoricalAxis.TitleTemplate> | ||
| </telerik:CategoricalAxis> | ||
| </telerik:RadCartesianChart.HorizontalAxis> | ||
| <telerik:RadCartesianChart.VerticalAxis> | ||
| <telerik:LinearAxis Title="Value"> | ||
| <telerik:LinearAxis.TitleTemplate> | ||
| <DataTemplate> | ||
| <Border Background="BlueViolet" Padding="10 5"> | ||
| <TextBlock Text="{Binding}" Foreground="White"/> | ||
| </Border> | ||
| </DataTemplate> | ||
| </telerik:LinearAxis.TitleTemplate> | ||
| </telerik:LinearAxis> | ||
| </telerik:RadCartesianChart.VerticalAxis> | ||
| <telerik:RadCartesianChart.Series> | ||
| <telerik:BarSeries> | ||
| <telerik:BarSeries.DataPoints> | ||
| <telerik:CategoricalDataPoint Category="January" Value="2" /> | ||
| <telerik:CategoricalDataPoint Category="February" Value="5" /> | ||
| <telerik:CategoricalDataPoint Category="March" Value="3" /> | ||
| </telerik:BarSeries.DataPoints> | ||
| </telerik:BarSeries> | ||
| </telerik:RadCartesianChart.Series> | ||
| </telerik:RadCartesianChart> | ||
| {{endregion}} | ||
|
|
||
| The data context in the `DataTemplate` will be the value of the `Title` property. | ||
|
|
||
|  | ||
|
|
||
| ## See Also | ||
| * [Getting Started]({%slug radchartview-introduction%}) | ||
| * [Events]({%slug radchartview-events%}) | ||
| * [Create Data-Bound Chart]({%slug radchartview-series-databinding%}) |