Rank 1
The default brush style on a bar chart data series is some kind of gradient. How do I set the style to solid? I prefer to set this in the code behind. I'm using below to set palette brushes. I assumed wrong that "SolidColorBrush" would paint a solid bar. thanks.
| RadChart1.PaletteBrushes.Add(new SolidColorBrush(Color.FromArgb(255, 108, 117, 128))); |
| RadChart1.PaletteBrushes.Add(new SolidColorBrush(Color.FromArgb(255, 139, 155, 173))); |
| RadChart1.PaletteBrushes.Add(new SolidColorBrush(Color.FromArgb(255, 175, 188, 199))); |
31 Answers, 1 is accepted
Unfortunately, providing a SolidColorBrush in the PaletteBrushes collection will not remove the mask from the bars in RadChart. I have attached a small example, showing how to achieve solid colored bars. Our developers are already aware of this scenario, so they will consider improving the control behavior.
Best regards,
Ves
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Rank 1
Invalid attribute value chart:Bar for property TargetType
Any Ideas?
| void Chart_Performance_SetProperties(string valueType) |
| { |
| SeriesMapping sm = new SeriesMapping(); |
| ChartSortDescriptor sort = new ChartSortDescriptor(); |
| PerfomanceChart.ItemsSource = null; |
| PerfomanceChart.SeriesMappings.Clear(); |
| PerfomanceChart.DefaultView.ChartArea.DataSeries.Clear(); |
| sort.Member = "Name"; |
| sort.SortDirection = System.ComponentModel.ListSortDirection.Ascending; |
| sm.SeriesDefinition = new BarSeriesDefinition(); |
| sm.ItemMappings.Add(new ItemMapping(valueType, DataPointMember.YValue)); |
| sm.ItemMappings.Add(new ItemMapping("Name", DataPointMember.XCategory)); |
| sm.SeriesDefinition.ShowItemLabels = false; |
| sm.SeriesDefinition.ItemStyle = this.Resources["MyBarStyle"] as Style; |
| sm.SeriesDefinition.LegendDisplayMode = Telerik.Windows.Controls.Charting.LegendDisplayMode.DataPointLabel; |
| if (valueType == "Cost") |
| { |
| PerfomanceChart.DefaultView.ChartArea.AxisY.DefaultLabelFormat = "#VAL{C2}"; |
| } |
| else |
| { |
| PerfomanceChart.DefaultView.ChartArea.AxisY.DefaultLabelFormat = null; |
| } |
| PerfomanceChart.SeriesMappings.Add(sm); |
| PerfomanceChart.SortDescriptors.Add(sort); |
| PerfomanceChart.PaletteBrushes.AddRange(ChartHelper.Palette); |
| PerfomanceChart.DefaultView.ChartArea.AxisX.LayoutMode = AxisLayoutMode.Between; |
| PerfomanceChart.DefaultView.ChartArea.AxisX.StepLabelLevelCount = 2; |
| PerfomanceChart.DefaultView.ChartArea.AxisX.Step = 1; |
| } |
| public void LoadChart(IEnumerable<Commodity> list, string valueType) |
| { |
| if (list != null) |
| { |
| Chart_Performance_SetProperties(valueType); |
| PerfomanceChart.ItemsSource = getData(list, valueType); |
| } |
| } |
| <UserControl x:Class="McKinstry.Energy.Dashboard.UserControls.Chart_Performance" |
| xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" |
| xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
| xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls" |
| xmlns:telerikChart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting" |
| > |
| <UserControl.Resources> |
| <Style x:Key="MyBarStyle" TargetType="chart:Bar"> |
| <Setter Property="Template" > |
| <Setter.Value> |
| <ControlTemplate TargetType="chart:Bar"> |
| <Rectangle x:Name="PART_DefiningGeometry" |
| Height="{TemplateBinding ItemActualHeight}" |
| Width="{TemplateBinding ItemActualWidth}" |
| Style="{TemplateBinding ItemStyle}" |
| > |
| </Rectangle> |
| </ControlTemplate> |
| </Setter.Value> |
| </Setter> |
| </Style> |
| </UserControl.Resources> |
| <Grid x:Name="LayoutRoot" Background="White"> |
| <telerikChart:RadChart x:Name="PerfomanceChart" Width="780" Height="320" BorderThickness="0" PaletteBrushesRepeat="True" /> |
| </Grid> |
| </UserControl> |
The problem seems to be in missing xml namespace declaration. Please add this:
xmlns:chart="clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting"Best regards,
Ves
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Rank 1
You can add the animation like this:
<ControlTemplate TargetType="chart:Bar"> <Canvas Opacity="0" x:Name="PART_CanvasContainer"> <Rectangle x:Name="PART_DefiningGeometry" Height="{TemplateBinding ItemActualHeight}" Width="{TemplateBinding ItemActualWidth}" Style="{TemplateBinding ItemStyle}" > </Rectangle> <Canvas.RenderTransform> <ScaleTransform x:Name="PART_AnimationTransform" ScaleY="0" /> </Canvas.RenderTransform> </Canvas></ControlTemplate>Sincerely,
Ves
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Rank 1
Rank 1
Setting the TargetType properties of both the Style and the ControlTemplate to "chart:StackedBar" should do it.
Best regards,
Ves
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Rank 1
Also, I removed the line below because it was causing my Stack bar to unstack.
smStacked.SeriesDefinition.LegendDisplayMode = Telerik.Windows.Controls.Charting.LegendDisplayMode.DataPointLabel;
Rank 2
This is the original template for the Pie Chart:
<Style x:Key="MyPieStyle" TargetType="telerikCharting:Pie"> <Setter Property="Template" > <Setter.Value> <ControlTemplate TargetType="telerikCharting:Pie"> <Canvas> <Ellipse Clip="{TemplateBinding FigurePath}" Width="{TemplateBinding ItemActualWidth}" Height="{TemplateBinding ItemActualHeight}" StrokeThickness="0" Style="{TemplateBinding ItemStyle}"/> <Path x:Name="PART_DefiningGeometry" Data="{TemplateBinding FigurePath2}" Fill="Transparent" Style="{TemplateBinding ItemStyle}"/> <Ellipse Clip="{TemplateBinding FigurePath3}" Fill="{StaticResource PieMaskBrush}" Width="{TemplateBinding ItemActualWidth}" Height="{TemplateBinding ItemActualHeight}"/> <Canvas.RenderTransform> <ScaleTransform x:Name="PART_AnimationTransform" ScaleX="0" ScaleY="0" /> </Canvas.RenderTransform> </Canvas> </ControlTemplate> </Setter.Value> </Setter> </Style> I hope this helps.
Greetings,
Evgenia
the Telerik team
Rank 2
Rank 1
This is my XAML:
<telerik:RadChart ItemsSource="{Binding TheData}" HorizontalAlignment="Left" MaxHeight="450" Width="Auto" SeriesMappings="{Binding Mapping}" Name="radChart" MinWidth="250" MinHeight="250" BorderThickness="0" Background="Transparent" ></telerik:RadChart>As you can see here, I am using DataBinding to bind to my ViewModel. The SeriesMappings property binds to a SeriesMappingCollection in the ViewModel.
I have added your code/xaml to my page and I get no errors. But no solid colours, it seems like the "MyBarStyle" is being ignored for some reason.
In your codebind file you have:
RadChart1.DefaultSeriesDefinition.ItemStyle = this.Resources["MyBarStyle"] as Style;Should this still be the same when binding the SeriesMappings property?
Thanks in advance
Bruce
The approach which my colleague Ves used is applicable to RadChart databound using SeriesMappings. If you want to have Solid colored Bars with MVVM approach - take a look at our demo with full source code - http://demos.telerik.com/silverlight/#Chart/MVVM.
I hope this gets you started properly.
Greetings,
Evgenia
the Telerik team
Rank 1
I had solved it this way:
In the UserControl constructor I did the following:
foreach (SeriesMapping map in this.radChart.SeriesMappings) map.SeriesDefinition.ItemStyle = this.Resources["MyBarStyle"] as Style;It worked and that is all I needed (for the time being). But I am sure your example will come in handy in the future.
Rank 1
The proper style which should be set is as follows:
<Style x:Key="FlatBarStyle" TargetType="charting:StackedBar"> <Setter Property="Template" > <Setter.Value> <ControlTemplate TargetType="charting:StackedBar"> <Canvas Opacity="0" x:Name="PART_MainContainer"> <Rectangle x:Name="PART_DefiningGeometry" Height="{TemplateBinding ItemActualHeight}" Width="{TemplateBinding ItemActualWidth}" Style="{TemplateBinding ItemStyle}" /> <Canvas.RenderTransform> <ScaleTransform x:Name="PART_AnimationTransform" ScaleY="0" /> </Canvas.RenderTransform> </Canvas> </ControlTemplate> </Setter.Value> </Setter></Style>If you use older version of our controls, this may cause your problem.
Greetings,
Sia
the Telerik team
Rank 1
Second question on this. I'm still having problems getting the gradient to go away. I think I left out a few things last time I posted the code. Let me post this again.
The Style as per your suggestion:
<Style x:Key="FlatBarStyle" TargetType="chart:StackedBar">
<Setter Property="Template" >
<Setter.Value>
<ControlTemplate TargetType="chart:StackedBar">
<Canvas Opacity="0" x:Name="PART_MainContainer">
<Rectangle x:Name="PART_DefiningGeometry"
Height="{TemplateBinding ItemActualHeight}"
Width="{TemplateBinding ItemActualWidth}"
Style="{TemplateBinding ItemStyle}" />
<Canvas.RenderTransform>
<ScaleTransform x:Name="PART_AnimationTransform" ScaleY="0" />
</Canvas.RenderTransform>
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The chart itself in XAML. Note the field names declaratively. Is there a problem with me doing it this way if I want to get rid of the gradient?
<telerik:RadChart x:Name="rcTAKS" Grid.Row="0" BorderBrush="Transparent" Width="750">
<telerik:RadChart.SeriesMappings >
<telerik:SeriesMapping LegendLabel="Reading Met Standard">
<telerik:SeriesMapping.SeriesDefinition >
<telerik:StackedBarSeriesDefinition >
</telerik:StackedBarSeriesDefinition>
</telerik:SeriesMapping.SeriesDefinition>
<telerik:SeriesMapping.ItemMappings>
<telerik:ItemMapping DataPointMember="YValue" FieldName="ReadMetStandard" ></telerik:ItemMapping>
<telerik:ItemMapping DataPointMember="XCategory" FieldName="GradeLevel"></telerik:ItemMapping>
</telerik:SeriesMapping.ItemMappings>
</telerik:SeriesMapping>
<telerik:SeriesMapping LegendLabel="Reading Commended Performance" >
<telerik:SeriesMapping.SeriesDefinition>
<telerik:StackedBarSeriesDefinition>
</telerik:StackedBarSeriesDefinition>
</telerik:SeriesMapping.SeriesDefinition>
<telerik:SeriesMapping.ItemMappings>
<telerik:ItemMapping DataPointMember="YValue" FieldName="ReadCommendedPerformance"></telerik:ItemMapping>
<telerik:ItemMapping DataPointMember="XCategory" FieldName="GradeLevel"></telerik:ItemMapping>
</telerik:SeriesMapping.ItemMappings>
</telerik:SeriesMapping>
</telerik:RadChart.SeriesMappings>
</telerik:RadChart>
And the Codebehind for the event that fills the chart. The colors I'm putting in code are showing up, but the gradient is still there as well. I realize (now) that there's a Stacked100 type of chart, but this is working fine aside from the gradient issue:
void svcClient_GetAggregateTAKSDataCompleted(object sender, Service2.GetAggregateTAKSDataCompletedEventArgs e)
{
rcTAKS.PaletteBrushes.Add(new SolidColorBrush(Color.FromArgb(255, 15, 20, 255)));
rcTAKS.PaletteBrushes.Add(new SolidColorBrush(Color.FromArgb(255, 15, 255, 20)));
rcTAKS.PaletteBrushes.Add(new SolidColorBrush(Color.FromArgb(255, 255, 15, 20)));
rcTAKS.DefaultSeriesDefinition.ItemStyle = this.Resources["FlatBarStyle"] as Style;
rcTAKS.DefaultSeriesDefinition.LegendDisplayMode = Telerik.Windows.Controls.Charting.LegendDisplayMode.DataPointLabel;
rcTAKS.DefaultView.ChartArea.AxisY.AutoRange = false;
rcTAKS.DefaultView.ChartArea.AxisY.MaxValue = 100;
rcTAKS.DefaultView.ChartArea.AxisY.MinValue = 0;
rcTAKS.DefaultView.ChartArea.AxisY.Step = 10;
var aggregateList = e.Result;
rcTAKS.ItemsSource = aggregateList;
}
Your problem is that you are setting the style through the default series definition. This works when you use series mapping with implicitly set series definition. Having in your xaml:
<telerik:SeriesMapping.SeriesDefinition> <telerik:StackedBarSeriesDefinition /> </telerik:SeriesMapping.SeriesDefinition>you need to set the style through it which can be done in xaml or in code behind as follows:
<telerik:StackedBarSeriesDefinition ItemStyle="{StaticResource FlatBarStyle}" />or
mapping.SeriesDefinition.ItemStyle = this.Resources["FlatBarStyle"] as Style;I hope this helps you.
All the best,
Sia
the Telerik team
Rank 1
Rank 1
The Bar Animation is not working..
In XAML file.<UserControl.Resources> <Style x:Key="MyBarStyle" TargetType="chart:Bar"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="chart:Bar"> <Canvas Opacity="0" x:Name="PART_CanvasContainer"> <Rectangle x:Name="PART_DefiningGeometry" Height="{TemplateBinding ItemActualHeight}" Width="{TemplateBinding ItemActualWidth}" Style="{TemplateBinding ItemStyle}"> </Rectangle> <Canvas.RenderTransform> <ScaleTransform x:Name="PART_AnimationTransform" ScaleY="0" /> </Canvas.RenderTransform> </Canvas> </ControlTemplate> </Setter.Value> </Setter> </Style> </UserControl.Resources> <Grid x:Name="LayoutRoot" Background="White"> <telerikChart:RadChart x:Name="RadChart1"></telerikChart:RadChart> </Grid>In Code Behind file. public SolidColors() { InitializeComponent(); this.Loaded += new RoutedEventHandler(SolidColors_Loaded); } void SolidColors_Loaded(object sender, RoutedEventArgs e) { RadChart1.PaletteBrushes.Add(new SolidColorBrush(Color.FromArgb(255, 108, 117, 128))); RadChart1.PaletteBrushes.Add(new SolidColorBrush(Color.FromArgb(255, 139, 155, 173))); RadChart1.PaletteBrushes.Add(new SolidColorBrush(Color.FromArgb(255, 175, 188, 199))); RadChart1.DefaultSeriesDefinition.ItemStyle = this.Resources["MyBarStyle"] as Style; RadChart1.DefaultSeriesDefinition.LegendDisplayMode = Telerik.Windows.Controls.Charting.LegendDisplayMode.DataPointLabel; RadChart1.ItemsSource = new double[] { 3, 4, 5 }; }please let me know what should i do to animate the bars in chart control
Saravanan,
msaravanan@live.com
Rank 1
Hi marvin,can you please share me your code ..how to remove the gradient and with animation on barsthank you,SaravananThe bars' template was changed so please try to change the Name of the Canvas from
x:Name="PART_CanvasContainer"x:Name="PART_MainContainer"All the best,
Sia
the Telerik team
Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!
Rank 1
Thank you very much Sia,its working fine,,i am using MVVM Pattern,can i able to set Default Series Definition.ItemStyle and Legend Display mode property in view itself ?how should i apply this property in XAML file itself ?RadChart1.DefaultSeriesDefinition.ItemStyle = this.Resources["MyBarStyle"] as Style; RadChart1.DefaultSeriesDefinition.LegendDisplayMode = Telerik.Windows.Controls.Charting.LegendDisplayMode.DataPointLabel;
Thanking You,
Saravanan Please take a look of our MVVM example. There you can find a custom bar style and how it is set to the BarSeriesDefinition. Is that what you need?
Best wishes,
Sia
the Telerik team
Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!
Rank 1
I also changed to solid colors on my BarChart and HorizontalBarChart.
But the animations are only working with the BarChart??
Here are my styles:
<Style x:Key="BarStyle" TargetType="chart:Bar">
<Setter Property="Template" >
<Setter.Value>
<ControlTemplate TargetType="chart:Bar">
<Canvas Opacity="0" x:Name="PART_MainContainer">
<Rectangle x:Name="PART_DefiningGeometry"
Height="{TemplateBinding ItemActualHeight}"
Width="{TemplateBinding ItemActualWidth}"
Style="{TemplateBinding ItemStyle}">
</Rectangle>
<Canvas.RenderTransform>
<ScaleTransform x:Name="PART_AnimationTransform" ScaleY="0" />
</Canvas.RenderTransform>
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="HoriBarStyle" TargetType="chart:HorizontalBar">
<Setter Property="Template" >
<Setter.Value>
<ControlTemplate TargetType="chart:HorizontalBar">
<Canvas Opacity="0" x:Name="PART_MainContainer">
<Rectangle x:Name="PART_DefiningGeometry"
Height="{TemplateBinding ItemActualHeight}"
Width="{TemplateBinding ItemActualWidth}"
Style="{TemplateBinding ItemStyle}">
</Rectangle>
<Canvas.RenderTransform>
<ScaleTransform x:Name="PART_AnimationTransform" ScaleY="0" />
</Canvas.RenderTransform>
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And here I create them in code behind (using MVVM)
if(BarChart)
this.SeriesDefinition = new BarSeriesDefinition() { ShowItemToolTips = true, ShowItemLabels = false, ItemStyle = App.Current.Resources["BarStyle"] as Style };
if(HoriBarChart)
this.SeriesDefinition = new HorizontalBarSeriesDefinition() { ShowItemToolTips = true, ShowItemLabels = false, ItemStyle = App.Current.Resources["HoriBarStyle"] as Style };
Can you see anything wrong with this?
Kind Regards
Frederik
Please try to change the ScaleTransform:
<Style x:Key="HoriBarStyle" TargetType="chart:HorizontalBar"> <Setter Property="Template" > <Setter.Value> <ControlTemplate TargetType="chart:HorizontalBar"> <Canvas Opacity="0" x:Name="PART_MainContainer"> <Rectangle x:Name="PART_DefiningGeometry" Height="{TemplateBinding ItemActualHeight}" Width="{TemplateBinding ItemActualWidth}" Style="{TemplateBinding ItemStyle}"> </Rectangle> <Canvas.RenderTransform> <ScaleTransform x:Name="PART_AnimationTransform" ScaleX="0" /> </Canvas.RenderTransform> </Canvas> </ControlTemplate> </Setter.Value> </Setter></Style>Best wishes,
Sia
the Telerik team
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
Rank 1
Your solution breaks the HoverScope="Item" feature which fades out the series items which arent currently being hovered over by the mouse.
Can we modify these styles to support that feature?
Instead of using the approach described before, I would suggest to set the new MaskVisibility property to your HorizontalBar series definition as follows:
<telerik:HorizontalBarSeriesDefinition MaskVisibility="Collapsed">...</telerik:HorizontalBarSeriesDefinition>By the way, if you need to set custom template to your series and you use the interactivity functionality, then you need to add the default VisualStates from the relevant template.
All the best,
Sia
the Telerik team
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
Rank 1
how can i set the 'MaskVisibility' property through code?. cannot find the property in code. i am creating BarSeriesDefinition in code dynamically and it is not declared in xaml. hoping for a quick reply :).
thank you
Since this property is series type dependent, you need to cast your series to HorizontalBarSeriesDefinition for the MaskVisibility to be reachable:
(this.chart.SeriesMappings[0].SeriesDefinition as HorizontalBarSeriesDefinition).MaskVisibility = System.Windows.Visibility.Collapsed;Regards,
Evgenia
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 >>