Height and BarSeries styling questions

2 posts, 0 answers
  1. Jeremy
    Jeremy avatar
    1 posts
    Member since:
    Nov 2012

    Posted 16 Jul 2013 Link to this post

    I have a ChartView that I'm having a difficult time styling. The attachment shows that state I have it in currently.

    I would like to stretch the chart vertically into a more square shape instead of the long strip that I have. Also I need to apply different colors to each barseries

    How do I do this?

    My code is below. Each barseries is bound to a List<TenantData>  The TenantData class is below the XAML

    XAML:
    <Grid x:Name="LayoutRoot" Background="White">
            <StackPanel Orientation="Vertical">
                <chart:RadCartesianChart>
                    <chartView:BarSeries CombineMode="Cluster" ItemsSource="{Binding Month1}" ValueBinding="RowsProcessed" CategoryBinding="RollupDate" />
                    <chartView:BarSeries CombineMode="Cluster" ItemsSource="{Binding Month2}" ValueBinding="RowsProcessed" CategoryBinding="RollupDate" />
                    <chartView:BarSeries CombineMode="Cluster" ItemsSource="{Binding Month3}" ValueBinding="RowsProcessed" CategoryBinding="RollupDate" />
                    <chartView:BarSeries CombineMode="Cluster" ItemsSource="{Binding Month4}" ValueBinding="RowsProcessed" CategoryBinding="RollupDate" />
                    <chartView:BarSeries CombineMode="Cluster" ItemsSource="{Binding Month5}" ValueBinding="RowsProcessed" CategoryBinding="RollupDate" />
                    <chartView:BarSeries CombineMode="Cluster" ItemsSource="{Binding Month6}" ValueBinding="RowsProcessed" CategoryBinding="RollupDate" />
                    <chartView:BarSeries CombineMode="Cluster" ItemsSource="{Binding Month7}" ValueBinding="RowsProcessed" CategoryBinding="RollupDate" />
                    <chartView:BarSeries CombineMode="Cluster" ItemsSource="{Binding Month8}" ValueBinding="RowsProcessed" CategoryBinding="RollupDate" />
                    <chartView:BarSeries CombineMode="Cluster" ItemsSource="{Binding Month9}" ValueBinding="RowsProcessed" CategoryBinding="RollupDate" />
                    <chartView:BarSeries CombineMode="Cluster" ItemsSource="{Binding Month10}" ValueBinding="RowsProcessed" CategoryBinding="RollupDate" />
                    <chartView:BarSeries CombineMode="Cluster" ItemsSource="{Binding Month11}" ValueBinding="RowsProcessed" CategoryBinding="RollupDate" />
                    <chartView:BarSeries CombineMode="Cluster" ItemsSource="{Binding Month12}" ValueBinding="RowsProcessed" CategoryBinding="RollupDate" />
     
                    <chart:RadCartesianChart.HorizontalAxis>
                        <chartView:CategoricalAxis FontFamily="Segoe UI" FontSize="12" Title="Months"></chartView:CategoricalAxis>
                    </chart:RadCartesianChart.HorizontalAxis>
                    <chart:RadCartesianChart.VerticalAxis>
                        <chartView:LinearAxis FontFamily="Segoe UI" FontSize="12" Title="Row Usage (thousands)"></chartView:LinearAxis>
                    </chart:RadCartesianChart.VerticalAxis>
                    <chart:RadCartesianChart.Grid>
                        <chartView:CartesianChartGrid Height="600" MajorLinesVisibility="Y"></chartView:CartesianChartGrid>
                    </chart:RadCartesianChart.Grid>
                </chart:RadCartesianChart>
                <ScrollViewer Name="UsageDataTable">
                    <telerik:RadGridView x:Name="ParentUsageTable" ItemsSource="{Binding Orgs}">
                    </telerik:RadGridView>
                </ScrollViewer>
            </StackPanel>
        </Grid>

    TenantData object:
    public class TenantData
        {
            public long RowsProcessed { get; set; }
            public string TenantName { get; set; }
            public string RollupDate { get; set; }
        }

  2. Petar Kirov
    Admin
    Petar Kirov avatar
    425 posts

    Posted 18 Jul 2013 Link to this post

    Hi Jeremy,

    Because you have not specified the height of the chart control, its MinHeight property gets used which is by default 100. To increase the RadCartesianChart height, just set its Height property to a bigger value eg. 500.

    On a side note, you can put the 12 ItemsSources in a list and leave the chart to generate the series for them by using the SeriesProvider feature. Here you can learn more about it.
     
    Regards,
    Petar Kirov
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
    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 >>
  3. DevCraft banner
Back to Top