[Solved] How to change colour and size of number above RadCartesianChart column

[Justin]

Hi,

I am trying to format the color and size of the small number or multiple numbers that show on a column either insize or above. At the moment it is defaulted as white and very small to read.

     15
(~~~~~)
(          )
(     6   )
(          ) 

I.e as above.

My Code for 1 chart below:

<Chart:RadCartesianChart x:Name="chartExcerciseWeight" Visibility="Collapsed" Margin="0,96,0,69" Palette="{Binding DefaultPalette}">
                    <Chart:RadCartesianChart.Grid>
                        <Chart:CartesianChartGrid MajorLinesVisibility="Y" StripLinesVisibility="X">
                            <Chart:CartesianChartGrid.MajorYLineStyle>
                                <Style TargetType="Line">
                                    <Setter Property="Stroke" Value="#FFC3C0C0"/>
                                </Style>
                            </Chart:CartesianChartGrid.MajorYLineStyle>
                        </Chart:CartesianChartGrid>
                    </Chart:RadCartesianChart.Grid>
                    <Chart:RadCartesianChart.HorizontalAxis>
                        <Chart:CategoricalAxis Foreground="#FF595959" PlotMode="OnTicksPadded" FontSize="15" LabelFitMode="Rotate" LabelRotationAngle="340"/>
                    </Chart:RadCartesianChart.HorizontalAxis>
                    <Chart:RadCartesianChart.VerticalAxis>


                        <Chart:LinearAxis
                            Title="."
                            Foreground="#FF595959"
                            FontSize="15"
                            Minimum="0">
                            <Chart:LinearAxis.TitleTemplate>
                                <DataTemplate>
                                    <TextBlock FontSize="20" Padding="10,10,10,10" Foreground="#FF5F5F5F" Text="Weight Lifted"/>
                                    <!-- formats the lable Y-->
                                </DataTemplate>
                            </Chart:LinearAxis.TitleTemplate>
                        </Chart:LinearAxis>
                        
                    </Chart:RadCartesianChart.VerticalAxis>
                    <Chart:BarSeries ShowLabels="True" ItemsSource="{Binding Source={StaticResource itemsViewSource}}">
                        <Chart:BarSeries.CategoryBinding>
                            <Chart:PropertyNameDataPointBinding PropertyName="Excercise"/>
                        </Chart:BarSeries.CategoryBinding>
                        <Chart:BarSeries.ValueBinding>
                            <Chart:PropertyNameDataPointBinding PropertyName="Max_Weight"/>
                        </Chart:BarSeries.ValueBinding>
                    </Chart:BarSeries>
 </Chart:RadCartesianChart>

[Ivaylo Gergov]

Hello, Justin

Thank you for using our RadControls for Windows 8!

In this scenario you can take advantage of chart series label definitions. They can be set by ChartSeriesLabelDefinition
which describe the appearance of labels. More information can be found in our updated documentation (available in the next few days).

Nevertheless, in this case you can override the default template of the labels with the Template property of ChartSeriesLabelDefinition. Here's sample implementation which fits your requirements: 

<Chart:BarSeries.LabelDefinitions>
    <Chart:ChartSeriesLabelDefinition>
        <Chart:ChartSeriesLabelDefinition.Template>
            <DataTemplate>
                <TextBlock
                    Text="{Binding}"
                    FontSize="30"
                    Foreground="Green">
                </TextBlock>
            </DataTemplate>
        </Chart:ChartSeriesLabelDefinition.Template>
    </Chart:ChartSeriesLabelDefinition>
</Chart:BarSeries.LabelDefinitions>

I hope this information is useful. If you have any further questions don't hesitate to contact us again.

Regards,
Ivaylo Gergov
the Telerik team

[Justin]

Hi, thanks for that.

Works very well. The number is now modified by unfortunately shows at the top left of the bar.

I tried padding/margin in the textblock but it only seems to enable it higher or lower (not center)

Can you advise how this is done?

Great Charts btw

[Ivaylo Gergov]

Hello, Justin

Thank you for contacting us again.

In order to change the positioning of your labels you can use the HorizontalAlignment property in your ChartSeriesLabelDefinition. In your desired scenario you need to set it to "Center".

I hope this helps. Let me know if I can assist you in some other way.

Greetings,
Ivaylo Gergov
the Telerik team