RadCartesianChart- BarSeries Set Height and width

2 posts, 0 answers
  1. Thierry
    Thierry avatar
    14 posts
    Member since:
    Feb 2011

    Posted 26 Jul Link to this post

    Hi ,

          We are currently developing uwp application.An UWP application has some chart controls like RadCartesianChart(bar series). 

    Some times i have displayed one or two item in chart control.  Upon single item the Bar looks very big that one not looking nice to see. 

    I have apply " DefaultVisualStyle" in bar series, after apply style i got reduced the size of Bar but Labels and Bar are misplaced(please the attachment). 

    Please see the attachments for reference 

     Image 1.png ( Actual chart display)

     Image 2.png ( After apply DefaultVisualStyle)

     Image 3.png ( Expected Result)

     

         <Page.Resources>

            <Style x:Key="barStyle" TargetType="Border">
                <Setter Property="MaxWidth" Value="40" />
                <Setter Property="Background" Value="{Binding DataItem.Fill}"/>
                <Setter Property="VerticalAlignment" Value="Center"></Setter>
                <Setter Property="HorizontalAlignment" Value="Center"></Setter>
            </Style>
        </Page.Resources>
        
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <telerikChart:RadCartesianChart x:Name="barSeries"   PaletteName="DefaultLight">
                <telerikChart:RadCartesianChart.VerticalAxis>
                    <telerikChart:LinearAxis/>
                </telerikChart:RadCartesianChart.VerticalAxis>
                <telerikChart:RadCartesianChart.HorizontalAxis>
                    <telerikChart:CategoricalAxis/>
                </telerikChart:RadCartesianChart.HorizontalAxis>

                <telerikChart:BarSeries ItemsSource="{Binding}" DefaultVisualStyle="{ StaticResource barStyle}"  PaletteMode="DataPoint">
                    <telerikChart:BarSeries.CategoryBinding >
                        <telerikChart:PropertyNameDataPointBinding PropertyName="Category"/>
                    </telerikChart:BarSeries.CategoryBinding>
                    <telerikChart:BarSeries.ValueBinding>
                        <telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
                    </telerikChart:BarSeries.ValueBinding>
                </telerikChart:BarSeries>
            </telerikChart:RadCartesianChart>
        </Grid>

    code behind:

     public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
            }

            protected override void OnNavigatedTo(NavigationEventArgs e)
            {
                List<Data> data = new List<Data>();
                data.Add(new Data() { Category = "Apples", Value = 5 });
                data.Add(new Data() { Category = "Oranges", Value = 9 });

                this.barSeries.DataContext = data;

                base.OnNavigatedTo(e);  
            }
        }

        public class Data
        {
            public string Category { get; set; }

            public double Value { get; set; }
        }

     

     

     

  2. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 29 Jul Link to this post

    Hi Thierry,

    There is an API which allows you to control the space between the bars (hence the bar width), so there is no need of custom styling in this case. All you need to do is figure the correct value for the GapLength property of the CategoricalAxis. Its values should be between 0 and 1, where smaller values indicate smaller gap i.e. wider bars, while larger values would mean the opposite. I hope this helps.

    Best regards,
    Ves
    Telerik by Progress
    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 Feedback Portal and vote to affect the priority of the items
  3. DevCraft banner
Back to Top