Gradient on Bar Chart

32 posts, 0 answers
  1. IT Application Development
    IT Application Development avatar
    13 posts
    Member since:
    Mar 2010

    Posted 10 Mar 2010 Link to this post

    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))); 

     

     

  2. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 15 Mar 2010 Link to this post

    Hi Marvin,

    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.
  3. DevCraft banner
  4. IT Application Development
    IT Application Development avatar
    13 posts
    Member since:
    Mar 2010

    Posted 05 Apr 2010 Link to this post

    I can run your sample just fine, but for some reason this will not work with my project. I'd get the error:

    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> 
     
  5. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 07 Apr 2010 Link to this post

    Hi Marvin,

    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.
  6. IT Application Development
    IT Application Development avatar
    13 posts
    Member since:
    Mar 2010

    Posted 07 Apr 2010 Link to this post

    Works great however the bar no longer animates. Is there a way to bring that back?
  7. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 08 Apr 2010 Link to this post

    Hi Marvin,

    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.
  8. IT Application Development
    IT Application Development avatar
    13 posts
    Member since:
    Mar 2010

    Posted 08 Apr 2010 Link to this post

    Works great thank you
  9. IT Application Development
    IT Application Development avatar
    13 posts
    Member since:
    Mar 2010

    Posted 08 Apr 2010 Link to this post

    Another question, how would you do this with a stacked bar chart?
  10. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 09 Apr 2010 Link to this post

    Hi Marvin,

    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.
  11. IT Application Development
    IT Application Development avatar
    13 posts
    Member since:
    Mar 2010

    Posted 09 Apr 2010 Link to this post

    Works!!! You guys are awesome.

    Also, I removed the line below because it was causing my Stack bar to unstack.

     

    smStacked.SeriesDefinition.LegendDisplayMode = Telerik.Windows.Controls.Charting.LegendDisplayMode.DataPointLabel;

  12. Boris
    Boris avatar
    3 posts
    Member since:
    Oct 2010

    Posted 28 Oct 2010 Link to this post

    I have the exact same scenario. Got this working for Bar and StackedBar. How can I do the same for Pie? Do you a fix for this in mind for any near future releases?
  13. Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 01 Nov 2010 Link to this post

    Hello Boris,

    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
    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
  14. Boris
    Boris avatar
    3 posts
    Member since:
    Oct 2010

    Posted 03 Nov 2010 Link to this post

    It worked perfectly. Just removed the second <Elipse... node and this did the trick. Thanks for the help.
  15. kulashaker
    kulashaker avatar
    5 posts
    Member since:
    Jul 2006

    Posted 10 Nov 2010 Link to this post

    Hi Ves, I am trying to do the same thing, but your solution does not seem to work in my scenario. Does it make a difference if I am using SeriesMappings??

    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
  16. Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 15 Nov 2010 Link to this post

    Hi 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
    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
  17. kulashaker
    kulashaker avatar
    5 posts
    Member since:
    Jul 2006

    Posted 15 Nov 2010 Link to this post

    Thanks Evgenia, you're solution would of solved my problem too. Appreciate that.

    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.
  18. Sam
    Sam avatar
    7 posts
    Member since:
    Nov 2010

    Posted 30 Dec 2010 Link to this post

    Never mind, your project sample works fine by itself so it's something I'm doing. 
  19. Sia
    Admin
    Sia avatar
    667 posts

    Posted 31 Dec 2010 Link to this post

    Hello Sam Coffman,

    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
    Browse the videos here>> to help you get started with RadControls for Silverlight
  20. Sam
    Sam avatar
    7 posts
    Member since:
    Nov 2010

    Posted 01 Jan 2011 Link to this post

    Where exactly can I download the latest version of the silverlight controls?  I see where to do the  "trial versions" but I have a license.  Is there a different place I should be downloading? 

    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;

    }

  21. Sia
    Admin
    Sia avatar
    667 posts

    Posted 04 Jan 2011 Link to this post

    Hello Marvin Mondejar,

    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
    Browse the videos here>> to help you get started with RadControls for Silverlight
  22. Sam
    Sam avatar
    7 posts
    Member since:
    Nov 2010

    Posted 04 Jan 2011 Link to this post

    That was the problem!  Thanks!
  23. Saravanan
    Saravanan avatar
    36 posts
    Member since:
    Jun 2011

    Posted 11 Jul 2011 Link to this post

    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
  24. Saravanan
    Saravanan avatar
    36 posts
    Member since:
    Jun 2011

    Posted 11 Jul 2011 Link to this post

    Hi marvin,
     
    can you please share me your code ..how to remove the gradient and with animation on bars
     
    thank you,
     
    Saravanan
  25. Sia
    Admin
    Sia avatar
    667 posts

    Posted 11 Jul 2011 Link to this post

    Hi Saravanan,

    The bars' template was changed so please try to change the Name of the Canvas from x:Name="PART_CanvasContainer" to x:Name="PART_MainContainer" and let us know whether this resolves your problem.

    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!

  26. Saravanan
    Saravanan avatar
    36 posts
    Member since:
    Jun 2011

    Posted 11 Jul 2011 Link to this post

    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
  27. Sia
    Admin
    Sia avatar
    667 posts

    Posted 13 Jul 2011 Link to this post

    Hello 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!

  28. Frederik
    Frederik avatar
    4 posts
    Member since:
    May 2011

    Posted 28 Oct 2011 Link to this post

    Hi,

    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


  29. Sia
    Admin
    Sia avatar
    667 posts

    Posted 02 Nov 2011 Link to this post

    Hello 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 >>

  30. Shaun
    Shaun avatar
    18 posts
    Member since:
    May 2012

    Posted 23 Jun 2012 Link to this post

    Sia,

    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?
  31. Sia
    Admin
    Sia avatar
    667 posts

    Posted 27 Jun 2012 Link to this post

    Hello Shaun,

    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 >>

Back to Top
DevCraft banner