RadCartesianChart- BarSeries Set Height and width

[Daiki]

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

 

 

 

[Ves]

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

[Milan]

Hi,

I have the same issue but the provided solution does not worked for me. Setting GapLength increases/decreases the gap between two bars of a series but I want to set a fixed width of the bars so that if a series have only one item then the bar should be shown with the fixed width.

Regards

[Ves]

Hi Milan,

The controls does not expose API to directly set bar width. The space is distributed evenly across all items. For DateTime axis you could set Minimum and Maximum, so that the axis covers larger period.

Best regards,
Ves
Telerik by Progress