<Grid x:Name="LayoutRoot" Background="Transparent"> <telerik:RadCartesianChart HoverMode="FadeOtherSeries" x:Name="MaxAverageAlarms" Palette="Metro"> <telerik:RadCartesianChart.VerticalAxis> <chartView:CategoricalAxis FontFamily="Segoe UI" FontSize="12" LabelInterval="1" LabelFitMode="MultiLine" > <chartView:CategoricalAxis.LabelTemplate> <DataTemplate> <TextBlock Text="{Binding}" Margin="8" /> </DataTemplate> </chartView:CategoricalAxis.LabelTemplate> </chartView:CategoricalAxis> </telerik:RadCartesianChart.VerticalAxis> <telerik:RadCartesianChart.HorizontalAxis> <chartView:LinearAxis FontSize="12" Minimum="0" /> </telerik:RadCartesianChart.HorizontalAxis> <telerik:RadCartesianChart.Grid> <chartView:CartesianChartGrid StripLinesVisibility="X" MajorLinesVisibility="None" > <chartView:CartesianChartGrid.XStripeBrushes> <SolidColorBrush Color="#F2F2F2" /> <SolidColorBrush Color="Transparent" /> </chartView:CartesianChartGrid.XStripeBrushes> </chartView:CartesianChartGrid> </telerik:RadCartesianChart.Grid> <chartView:BarSeries ItemsSource="{Binding ChartData, Mode=TwoWay}" ValueBinding="Value" CategoryBinding="Category" CombineMode="Stack" ShowLabels="True" FontFamily="Segoe UI" FontSize="10" BorderThickness="1" BorderBrush="Black" > <chartView:BarSeries.LabelDefinitions> <chartView:ChartSeriesLabelDefinition HorizontalAlignment="Right" VerticalAlignment="Center"> <chartView:ChartSeriesLabelDefinition.Template> <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding DataItem.Label, Mode=TwoWay}" Visibility="{Binding DataItem.ShowLabel, Mode=TwoWay, Converter={StaticResource BoolToVisibilityConverter}}" /> </StackPanel> </DataTemplate> </chartView:ChartSeriesLabelDefinition.Template> </chartView:ChartSeriesLabelDefinition> </chartView:BarSeries.LabelDefinitions> <chartView:BarSeries.PointTemplate> <DataTemplate> <Grid> <Rectangle Fill="{StaticResource AlarmAnalysisBarSeriesBrush}"/> </Grid> </DataTemplate> </chartView:BarSeries.PointTemplate> </chartView:BarSeries> </telerik:RadCartesianChart> <controls:RadBusyIndicator HorizontalAlignment="Center" VerticalAlignment="Center" IsBusy="{Binding IsLoading}"/> </Grid>The problem is that some of my labels which are shown beside the bar series are long and they go outside the chart area and only part of them can be seen.
I've tried to solve the problem several ways:
1.Setting
chartView:ChartSeriesLabelDefinition HorizontalAlignment to Left - the result is that labels dissapear
2.Setting chartView:ChartSeriesLabelDefinition HorizontalAlignment to Center or Stretch - this time sometimes the labels
are clipped on the left instead on the right3. Leaving
chartView:ChartSeriesLabelDefinition HorizontalAlignment to Right and Binding margin property to label lenght using StringToThickness converter and setting negative left margin if the label has big length. But of course this way, when bar series is small and setting margin to negative value again causes the labels to be clipped on the left.4. I've tried some solutions setting ClipToAreaPlot and ClipToBounds properties with no result at all.
Could you please suggest the solution of this problem? Please note that the labels are perfectly capable to fit inside the chart area (they are never longer than the chart width). I just cannot find a way to position them properly.
Thank you in advance,
Mladen
17 Answers, 1 is accepted
Currently we do not have a "smart labels" feature, we have scheduled this for the next official release. Currently the chart simply locates the label in accordance to the label definition and clips the label if it does not fit inside the plot area.
One solution would be to set the ClipToBounds property of the chart to False and the ClipToPlotArea property of the series to False. This will allow for the label to be fully displayed although it might leave the chart boundaries.
Another approach you may apply is to set the labels to be at the beginning of the bar. I have attached a small project based on your code that demonstrates this.
Alternatively you can create a new strategy (inherit ChartSeriesLabelStrategy) and use it in the label definition (Strategy property).
Let us know if this helps or if you need further assistance.
Regards,
Petar Marchev
Telerik
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
Rank 1
Thank you for your reply - setting ClipToBounds and ClipToAreaProperties worked right away. It was a bit surprising for me because i thought I've tried this approach since i had seen it in another post with no result. But maybe i did something wrong because it solved the problem now.
Ragarding the approach in the attached project - Setting the container of the label to Canvas soved the problem, otherwise (with other panel or with no panel) Left or Center positioning did'n work - label is clipped or hidden as i described in my first post. I'm courious to know why, bacause Canvas should affect its content appearence not the position itself - and regarding the content you didn't set any top, left properties and if Left positioning of other panel hides the label why canvas with Left positioning goes right where it should be?
I haven't tried the Strategy approach.
Thank You,
Mladen
When setting the HorizontalAlignment of the ChartSeriesLabelDefinition to Left, the labels are positioned to the left of the bars. I have attached a snapshot for reference.
In the previously suggested approach I had set the Width of the Canvas to 0. This is the reason that the labels were visible, they were still positioned to the left of the bar, but with Width of 0 the exact position matched the beginning of the bar. Thus the labels are visible.
Regards,
Petar Marchev
Telerik
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
Rank 1
I know this response is almost a year late; but I wanted to share with you or anyone searching for an answer. To keep things simple. I x:Name my vertical axis in XAML. I will later adjust the MajorStep value in code. Since I am data binding my data points to the chart; I sort the values and find the highest value. I divide said value by 3 and round the divided result up to the nearest 100. I take that result and set the MajorStep.
If needed I just the round up value and/or the number I divide by. This is how I get around this issue while also not cluttering up the vertical axis values. I hope this helps whoever is seeking some input to this issue.
Rank 1
Hai,
i have scaling issue in my cartesian chart.Please find the attached screen shot and suggest the solution for the same.
And i reffered Axis smart labels feature in teleirk portal in below link.
http://docs.telerik.com/devtools/wpf/controls/radchartview/axes/axis-smart-labels.html#using-the-smart-labels-mode
but in my telerik version of controls i didnt find the below option.
<telerik:LinearAxis SmartLabelsMode="SmartStep"/>
could please assist solution for this.
The SmartLabelsMode is a brand new feature and it came with the last 2015 Q2, so you will need to update if you want to use it.
Regards,
Petar Marchev
Telerik
Rank 1
Thank you peter for your quick responce.
Is there any other way to fix this issue.by doing any customization in style?
I am afraid that the smart labels mode is a very complex feature and you cannot use a simple property setter in a style. It is best if you upgrade to the latest version and get all the goodies.
Regards,
Petar Marchev
Telerik
Rank 1
Thank you Peter.
We will work on your comments.
Rank 1
Hi Peter,
As per the discussion in the team we decided to upgrade the version to use latest features.
As of now we are having 2014.2.729.40 version in our application.
if we upgrade to 2015 Q2 what will be the impact.
we need your support to move forward.
Since your team know the the difference of the two version and its features , you can suggest us which area will have major impact if we upgrade.
thanks in advance
You can check our release notes history and see which controls you use, to see if there are any features that you use that have been affected somehow.
Regards,
Petar Marchev
Telerik
Rank 1
Rank 1
Hi Peter,
I have Installed the TelerikUIForWpfSetup_2015_3_1104
And copied the libraries from my c-drive respective path C:\Program Files (x86)\Telerik\UI for WPF Q3 2015\Binaries\WPF40
Curently i am using Dot Net framework 4.0 in my project.
After updating the latest libraries in my project i am getting below build error.
Please help me on this.this is issue compleatly blocked my work.
Error 11 Unknown build error, 'Could not load type 'System.Runtime.CompilerServices.ExtensionAttribute' from assembly 'mscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089'.'
Thanks in advance
Since your last question is not related to the original issue in this thread, I will ask that you open a new thread. I ask this because we prefer to keep issues separated as it makes following a conversation easier. We have not had any reports concerning this ExtensionsAttribute and we have not yet looked into that. If you need further assistance I will ask that you open a new thread and provide more information such as the previous. Thank you for understanding.
Regards,
Petar Marchev
Telerik
Rank 1
Thank you.
I will follow as you said
Rank 1
I am facing some issues in RadCartesianChart ChartSeriesLabelDefinition ,point value is not binding properly .please see the below source and suggest some ideas.
<?xml version="1.0" encoding="utf-8"?>
<UserControl x:Class="Dashboard.Views.Controls.GlucoseChart" Height="auto" Width="auto" acb:CommandBehavior.Event="Unloaded" acb:CommandBehavior.Command="{Binding CloseCommand}" DataContext="{Binding Path=GlucoseReadingsViewModel, Source={StaticResource Locator}}"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Dashboard"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:chart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Chart"
xmlns:chartView="clr-namespace:Telerik.Windows.Controls.ChartView;assembly=Telerik.Windows.Controls.Chart"
xmlns:chartEngine="clr-namespace:Telerik.Charting;assembly=Telerik.Windows.Controls.Chart"
xmlns:acb="clr-namespace:AttachedCommandBehavior;assembly=AttachedCommandBehavior">
<UserControl.Resources>
<local:GlucoseActivityTypeToImageSelector x:Key="GlucoseActivityTypeToImageSelector" />
</UserControl.Resources>
<Border Margin="0" CornerRadius="5" BorderThickness="0" Background="{DynamicResource bg_chart}">
<Grid Margin="0">
<Grid.RowDefinitions>
<RowDefinition Height="{DynamicResource HeaderHeight}" />
<RowDefinition Height="*" />
<RowDefinition Height="0" />
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="0">
<Border Style="{StaticResource Border_SubHeader}" />
<TextBlock TextWrapping="Wrap" Text="Blood Glucose Chart" Style="{StaticResource TxtBlock_ChartTitle}" />
</Grid>
<Grid Grid.Column="0" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid Name="PART_ChartTitle" Grid.Column="1" Grid.Row="0" />
<Grid Name="PART_YAxisArea" Grid.Column="0" Grid.Row="1" />
<Grid Name="PART_XAxisArea" Grid.Column="1" Grid.Row="2" />
<Grid Name="PART_BottomLegendArea" Grid.Column="1" Margin="10" Grid.Row="3">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<TextBlock Text="Legend" />
</Grid>
<StackPanel Orientation="Horizontal" Grid.Row="1">
<StackPanel Orientation="Horizontal">
<Rectangle Width="10" Margin="5" Height="10" Fill="{Binding Stroke, ElementName=LineSeries1}" />
<TextBlock Text="{Binding SeriesLabel}" />
</StackPanel>
</StackPanel>
</Grid>
<Grid Name="PART_RightLegendArea" Grid.Column="2" Grid.Row="1" />
<chart:ChartDataSource Name="ChartDataSource1" SamplingUnit="Minute" ItemsSource="{Binding Readings}" />
<chart:RadCartesianChart Name="PART_ChartArea" Grid.Row="1" Grid.Column="1">
<chart:RadCartesianChart.Resources>
<DataTemplate x:Key="BeforeMealLabel">
<StackPanel Orientation="Vertical">
<Image Width="15" Height="15" Source="/Dashboard;component/Images/before_meal.png" />
<Border Padding="2,0,2,0" Background="{Binding Stroke, ElementName=LineSeries1}">
<TextBlock HorizontalAlignment="Center" TextBlock.Foreground="#FFFFFFFF" />
</Border>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="AfterMealLabel">
<StackPanel Orientation="Vertical">
<Image Width="15" Height="15" Source="/Dashboard;component/Images/after_meal.png" />
<Border Padding="2,0,2,0" Background="{Binding Stroke, ElementName=LineSeries1}">
<TextBlock HorizontalAlignment="Center" TextBlock.Foreground="#FFFFFFFF" />
</Border>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="AfterExerciseLabel">
<StackPanel Orientation="Vertical">
<Image Width="15" Height="15" Source="/Dashboard;component/Images/after_exercise.png" />
<Border Padding="2,0,2,0" Background="{Binding Stroke, ElementName=LineSeries1}">
<TextBlock HorizontalAlignment="Center" TextBlock.Foreground="#FFFFFFFF" />
</Border>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="AfterMedicationLabel">
<StackPanel Orientation="Vertical">
<Image Width="15" Height="15" Source="/Dashboard;component/Images/after_medication.png" />
<Border Padding="2,0,2,0" Background="{Binding Stroke, ElementName=LineSeries1}">
<TextBlock HorizontalAlignment="Center" TextBlock.Foreground="#FFFFFFFF" />
</Border>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="FastingLabel">
<StackPanel Orientation="Vertical">
<Image Width="15" Height="15" Source="/Dashboard;component/Images/fasting.png" />
<Border Padding="2,0,2,0" Background="{Binding Stroke, ElementName=LineSeries1}">
<TextBlock HorizontalAlignment="Center" TextBlock.Foreground="#FFFFFFFF" />
</Border>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="OthersLabel">
<StackPanel Orientation="Vertical">
<Image Width="15" Height="15" Source="/Dashboard;component/Images/others.png" />
<Border Padding="2,0,2,0" Background="{Binding Stroke, ElementName=LineSeries1}">
<TextBlock HorizontalAlignment="Center" TextBlock.Foreground="#FFFFFFFF" />
</Border>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="PointTemplate">
<StackPanel Orientation="Vertical">
<Ellipse Height="8" Width="8" Fill="#FFFFFFFF" Stroke="{Binding Stroke, ElementName=LineSeries1}" />
</StackPanel>
</DataTemplate>
</chart:RadCartesianChart.Resources>
<telerik:RadCartesianChart.Behaviors>
<chartView:ChartPanAndZoomBehavior ZoomMode="Horizontal" PanMode="Horizontal" />
<chartView:ChartTrackBallBehavior ShowTrackInfo="True" ShowIntersectionPoints="True" />
</telerik:RadCartesianChart.Behaviors>
<chart:RadCartesianChart.TooltipTemplate>
<DataTemplate>
<Border Background="#FFFFFFFF" BorderBrush="#FF000000" BorderThickness="1" Padding="5" CornerRadius="3">
<StackPanel Orientation="Vertical">
<TextBlock>
<Run Text="Timestamp: " /> <Run Text="{Binding Category, StringFormat={}{0:dd-MMM-yy hh:mm tt}}" /></TextBlock>
<TextBlock>
<Run Text="Blood Glucose: " /> <Run Text="{Binding DataItem.Glucose, StringFormat={}{0:N2}}" /> <Run Text="{Binding DataItem.Unit}" /></TextBlock>
<TextBlock>
<Run Text="Activity: " /> <Run Text="{Binding DataItem.Activity}" /></TextBlock>
</StackPanel>
</Border>
</DataTemplate>
</chart:RadCartesianChart.TooltipTemplate>
<chart:RadCartesianChart.HorizontalAxis>
<chartView:DateTimeContinuousAxis LabelFormat="dd-MMM
HH:mm" LabelFitMode="MultiLine" LabelInterval="2" PlotMode="OnTicksPadded">
<chartView:DateTimeContinuousAxis.PanZoomBarStyle>
<Style TargetType="{x:Type chartView:PanZoomBar}">
<Setter Property="FrameworkElement.Height" Value="30" />
</Style>
</chartView:DateTimeContinuousAxis.PanZoomBarStyle>
</chartView:DateTimeContinuousAxis>
</chart:RadCartesianChart.HorizontalAxis>
<chart:RadCartesianChart.VerticalAxis>
<chartView:LinearAxis Minimum="{Binding YAxisMin}" Maximum="{Binding YAxisMax}" Title="{Binding YAxisLabel}" />
</chart:RadCartesianChart.VerticalAxis>
<chart:RadCartesianChart.Series>
<chartView:LineSeries Name="LineSeries1" Stroke="{StaticResource LineChartColor1}" StrokeThickness="2" ShowLabels="True" CategoryBinding="Timestamp" ValueBinding="Glucose" PointTemplate="{StaticResource PointTemplate}" ItemsSource="{Binding Readings}">
<chartView:LineSeries.LabelDefinitions>
<chartView:ChartSeriesLabelDefinition TemplateSelector="{StaticResource GlucoseActivityTypeToImageSelector}" Margin="20,0,0,0" />
<chartView:ChartSeriesLabelDefinition Margin="-15,0,0,0"
>
<chartView:ChartSeriesLabelDefinition.Template>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding DataItem.Glucose}"
HorizontalAlignment="Center"
Foreground="Black" />
</StackPanel>
</DataTemplate>
</chartView:ChartSeriesLabelDefinition.Template>
</chartView:ChartSeriesLabelDefinition>
</chartView:LineSeries.LabelDefinitions>
<chartView:LineSeries.TrackBallInfoTemplate>
<DataTemplate>
<StackPanel Background="#00FFFFFF">
<TextBlock>
<Run Text="Timestamp: " /> <Run Text="{Binding DataPoint.Category, StringFormat={}{0:dd-MMM-yy hh:mm tt}}" /></TextBlock>
<TextBlock>
<Run Text="Blood Glucose: " /> <Run Text="{Binding DataPoint.Value, StringFormat={}{0:N2}}" /> <Run Text="{Binding DataPoint.DataItem.Unit}" /></TextBlock>
<TextBlock>
<Run Text="Activity: " /> <Run Text="{Binding DataPoint.DataItem.Activity}" /></TextBlock>
</StackPanel>
</DataTemplate>
</chartView:LineSeries.TrackBallInfoTemplate>
</chartView:LineSeries>
</chart:RadCartesianChart.Series>
</chart:RadCartesianChart>
</Grid>
<Grid Grid.Column="0" Grid.Row="2">
<telerik:RadChart Name="radChart" Margin="0" Background="#00FFFFFF" ItemsSource="{Binding Readings}">
<telerik:RadChart.DefaultView>
<telerik:ChartDefaultView ChartLegendPosition="Bottom">
<telerik:ChartDefaultView.ChartLegend>
<telerik:ChartLegend Name="chartLegend" Margin="0" Header="Legend" UseAutoGeneratedItems="True" BorderThickness="0" Background="#00FFFFFF" />
</telerik:ChartDefaultView.ChartLegend>
<telerik:ChartDefaultView.ChartArea>
<telerik:ChartArea LegendName="chartLegend">
<telerik:ChartArea.ZoomScrollSettingsX>
<telerik:ZoomScrollSettings ScrollMode="ScrollAndZoom" RangeStart="0" RangeEnd="1" MinZoomRange="1" PropertyChanged="ZoomScrollSettingsX_PropertyChanged" />
</telerik:ChartArea.ZoomScrollSettingsX>
<telerik:ChartArea.AxisX>
<telerik:AxisX IsDateTime="True" ShouldScaleStepOnZoom="True" StepLabelLevelCount="1" Step="1" LabelStep="1" LayoutMode="Between" AutoRange="True" LabelRotationAngle="0" DefaultLabelFormat="dd-MMM
HH:mm" />
</telerik:ChartArea.AxisX>
<telerik:ChartArea.AxisY>
<telerik:AxisY AutoRange="True" Title="{Binding YAxisLabel}" />
</telerik:ChartArea.AxisY>
</telerik:ChartArea>
</telerik:ChartDefaultView.ChartArea>
</telerik:ChartDefaultView>
</telerik:RadChart.DefaultView>
<telerik:RadChart.SamplingSettings>
<telerik:SamplingSettings SamplingThreshold="0" />
</telerik:RadChart.SamplingSettings>
<telerik:RadChart.SeriesMappings>
<telerik:SeriesMapping LegendLabel="{Binding SeriesLabel}">
<telerik:SeriesMapping.SeriesDefinition>
<telerik:LineSeriesDefinition ShowItemToolTips="True" ItemToolTipFormat="Date: #X{dd-MMM-yy hh:mm tt}
Value: #Y{###.##}" />
</telerik:SeriesMapping.SeriesDefinition>
<telerik:ItemMapping DataPointMember="XValue" FieldName="Timestamp" />
<telerik:ItemMapping DataPointMember="YValue" FieldName="Glucose" />
</telerik:SeriesMapping>
</telerik:RadChart.SeriesMappings>
</telerik:RadChart>
</Grid>
</Grid>
</Border>
</UserControl>
The question in this thread is duplicate at the one in the ticket thread with ID 1071091 which you post. We have answered your question in the other ticket thread. If you have any additional questions lets continue there. This way we can more easily answer your questions and track communication. Thank you for the understanding.
Regards,
Dinko
Telerik by Progress