This is a migrated thread and some comments may be shown as answers.

RadCartesianChart- BarSeries Set Height and width

3 Answers 197 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Daiki
Top achievements
Rank 1
Daiki asked on 27 Jul 2016, 04:36 AM

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

 

 

 

3 Answers, 1 is accepted

Sort by
0
Ves
Telerik team
answered on 29 Jul 2016, 06:28 AM
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
0
Milan
Top achievements
Rank 1
answered on 08 May 2017, 10:30 AM

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

0
Ves
Telerik team
answered on 11 May 2017, 07:17 AM
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
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
Tags
Chart
Asked by
Daiki
Top achievements
Rank 1
Answers by
Ves
Telerik team
Milan
Top achievements
Rank 1
Share this question
or