[Solved] Customizing X axis Lablels

[Abdu]

Hi,

I am trying to build a Bar Chart , see the attached Picture "what I produced". But how can I Label each block in X axis , Q1 Q2 Q3 Q4 like in the "what I need" picture.

Below shows my code. Please help me.


    <Page.DataContext>
        <local:ViewModel/>
    </Page.DataContext>


<Grid Background="{StaticResource C_BackgroundThemeBrush}">
    <Chart:RadCartesianChart x:Name="Chart1" PaletteName="DefaultDark" DataContext="{Binding}" Margin="10 10 10 50">
        <Chart:RadCartesianChart.HorizontalAxis>
            <Chart:CategoricalAxis Foreground="{StaticResource TelerikChartAxisLabelsForegroundBrush}">
                <Chart:CategoricalAxis.LineStyle>
                    <Style TargetType="Line">
                        <Setter Property="Stroke" Value="{StaticResource TelerikChartAxisBorderBrush}"/>
                    </Style>
                </Chart:CategoricalAxis.LineStyle>
            </Chart:CategoricalAxis>
        </Chart:RadCartesianChart.HorizontalAxis>
        <Chart:RadCartesianChart.VerticalAxis>
            <Chart:LinearAxis Foreground="{StaticResource TelerikChartAxisLabelsForegroundBrush}">
                <Chart:LinearAxis.LineStyle>
                    <Style TargetType="Line">
                        <Setter Property="Stroke" Value="{StaticResource TelerikChartAxisBorderBrush}"/>
                    </Style>
                </Chart:LinearAxis.LineStyle>
            </Chart:LinearAxis>
        </Chart:RadCartesianChart.VerticalAxis>
        <Chart:RadCartesianChart.Grid>
            <Chart:CartesianChartGrid StripLinesVisibility="XY" MajorLinesVisibility="XY">
                <Chart:CartesianChartGrid.MajorXLineStyle>
                    <Style TargetType="Line">
                        <Setter Property="Stroke"  Value="#FFCCCACA"/>
                        <Setter Property="StrokeDashArray" Value="10, 2"/>
                    </Style>
                </Chart:CartesianChartGrid.MajorXLineStyle>
                <Chart:CartesianChartGrid.YStripeBrushes>
                    <SolidColorBrush Color="#11CACACA"/>
                    <SolidColorBrush Color="Transparent"/>
                </Chart:CartesianChartGrid.YStripeBrushes>
            </Chart:CartesianChartGrid>
        </Chart:RadCartesianChart.Grid>

        <Chart:RadCartesianChart.Series>
            <Chart:BarSeries x:Name="q1Series" CombineMode="Cluster" ItemsSource="{Binding Q1}"  LegendTitle="Primary" ShowLabels="True" >
                <Chart:BarSeries.ValueBinding>
                    <Chart:PropertyNameDataPointBinding PropertyName="Value"/>
                </Chart:BarSeries.ValueBinding>
                <Chart:BarSeries.CategoryBinding>
                    <Chart:PropertyNameDataPointBinding PropertyName="Category"/>
                </Chart:BarSeries.CategoryBinding>
                <Chart:BarSeries.LabelDefinitions>
                    <Chart:ChartSeriesLabelDefinition HorizontalAlignment="Center"  VerticalAlignment="Center">
                        <Chart:ChartSeriesLabelDefinition.Template>
                            <DataTemplate>
                                <TextBlock Text="Q1" Foreground="Red" Margin="0,0,0,10"/>
                            </DataTemplate>
                        </Chart:ChartSeriesLabelDefinition.Template>
                    </Chart:ChartSeriesLabelDefinition>
                </Chart:BarSeries.LabelDefinitions>

            </Chart:BarSeries>

            <Chart:BarSeries CombineMode="Cluster" ItemsSource="{Binding Q2}" LegendTitle="Secondary" ShowLabels="True">
                <Chart:BarSeries.ValueBinding>
                    <Chart:PropertyNameDataPointBinding PropertyName="Value"/>
                </Chart:BarSeries.ValueBinding>
                <Chart:BarSeries.CategoryBinding>
                    <Chart:PropertyNameDataPointBinding PropertyName="Category"/>
                </Chart:BarSeries.CategoryBinding>
                <Chart:BarSeries.LabelDefinitions>
                    <Chart:ChartSeriesLabelDefinition HorizontalAlignment="Center" VerticalAlignment="Center">
                        <Chart:ChartSeriesLabelDefinition.Template>
                            <DataTemplate>
                                <TextBlock Text="Q2" Foreground="Red" Margin="0,0,0,10"/>
                            </DataTemplate>
                        </Chart:ChartSeriesLabelDefinition.Template>
                    </Chart:ChartSeriesLabelDefinition>
                </Chart:BarSeries.LabelDefinitions>
            </Chart:BarSeries>

            <Chart:BarSeries CombineMode="Cluster" ItemsSource="{Binding Q3}"  LegendTitle="Primary" ShowLabels="True" >
                <Chart:BarSeries.ValueBinding>
                    <Chart:PropertyNameDataPointBinding PropertyName="Value"/>
                </Chart:BarSeries.ValueBinding>
                <Chart:BarSeries.CategoryBinding>
                    <Chart:PropertyNameDataPointBinding PropertyName="Category"/>
                </Chart:BarSeries.CategoryBinding>
                <Chart:BarSeries.LabelDefinitions>
                    <Chart:ChartSeriesLabelDefinition HorizontalAlignment="Center"  VerticalAlignment="Center">
                        <Chart:ChartSeriesLabelDefinition.Template>
                            <DataTemplate>
                                <TextBlock Text="Q3" Foreground="Black" Margin="0,0,0,10"/>
                            </DataTemplate>
                        </Chart:ChartSeriesLabelDefinition.Template>
                    </Chart:ChartSeriesLabelDefinition>
                </Chart:BarSeries.LabelDefinitions>

            </Chart:BarSeries>

            <Chart:BarSeries CombineMode="Cluster" ItemsSource="{Binding Q4}"  LegendTitle="Primary" ShowLabels="True" >
                <Chart:BarSeries.ValueBinding>
                    <Chart:PropertyNameDataPointBinding PropertyName="Value"/>
                </Chart:BarSeries.ValueBinding>
                <Chart:BarSeries.CategoryBinding>
                    <Chart:PropertyNameDataPointBinding PropertyName="Category"/>
                </Chart:BarSeries.CategoryBinding>
                <Chart:BarSeries.LabelDefinitions>
                    <Chart:ChartSeriesLabelDefinition HorizontalAlignment="Center"  VerticalAlignment="Center">
                        <Chart:ChartSeriesLabelDefinition.Template>
                            <DataTemplate>
                                <TextBlock Text="Q4" Foreground="Red" Margin="0,0,0,10"/>
                            </DataTemplate>
                        </Chart:ChartSeriesLabelDefinition.Template>
                    </Chart:ChartSeriesLabelDefinition>
                </Chart:BarSeries.LabelDefinitions>
            </Chart:BarSeries>
        </Chart:RadCartesianChart.Series>
    </Chart:RadCartesianChart>

</Grid>



  public class ViewModel
    {
        
        public List<Data> Q1 { get; set; }
        public List<Data> Q2 { get; set; }
        public List<Data> Q3 { get; set; }
        public List<Data> Q4 { get; set; }
        public ViewModel()
        {

            Q1 = new List<MoveOutKPI>            
            {
                    new Data{  Category = "2011", Value = 1},
                    new Data{ Category = "2012", Value = 2},
                    new Data{  Category = "2013", Value = 3},
                   new Data{  Category = "2014", Value = 3},
            };

            Q2 = new List<MoveOutKPI>
            {
                    new Data{  Category = "2011", Value = 1},
                    new Data{ Category = "2012", Value = 2},
                    new Data{  Category = "2013", Value = 3},
            };
            Q3 = new List<MoveOutKPI>            
            {
                    new Data{  Category = "2011", Value = 1},
                    new Data{ Category = "2012", Value = 2},
                    new Data{  Category = "2013", Value = 3},
            };

            Q4 = new List<Data>
            {
                    new Data{  Category = "2011", Value = 3},
                    new Data{ Category = "2012", Value = 4},
                    new Data{  Category = "2013", Value = 5},
                   
            };

        }
}


   public class Data
    {
        public string Category;
        public int Value;
    }

[Ivaylo Gergov]

Hi,

I am not sure if that can be easily achieved. Currently, for more advanced customizations of the series labels you can take advantage of the Series Label Strategy. Also, you will need to change the position and the template of the Axis Labels.

Regards,
Ivaylo Gergov
Telerik