Max Width Bar Chart

2 posts, 0 answers
  1. Pedro
    Pedro avatar
    1 posts
    Member since:
    May 2014

    Posted 25 Jul 2014 Link to this post

    Hi,
    I am trying to set a maximum width on every bar that would be draw in my chart.
    It's a fairly simple chart but I just want to set a MaxWidth on the bar itself so it would stretch when its just one datapoint and when is 3 datapoints it would resize. The ideal is to have a fixed size for the width.

    <chart:RadCartesianChart x:Name="chart" Margin="40 12 40 0" Grid.Row="1" LayoutUpdated="chart_LayoutUpdated" Style="{StaticResource RadCartesianChartStyle1}">
                        <chart:RadCartesianChart.HorizontalAxis>
                            <chart:CategoricalAxis LabelOffset="4" LabelInterval="5" LineStroke="Transparent" Foreground="#FF99999B" TickThickness="0"/>
                        </chart:RadCartesianChart.HorizontalAxis>

                        <chart:RadCartesianChart.VerticalAxis>
                            <chart:LinearAxis Foreground="#FF99999B" Visibility="Collapsed"/>
                        </chart:RadCartesianChart.VerticalAxis>

                        <chart:RadCartesianChart.Behaviors>
                            
                            <chart:ChartSelectionBehavior DataPointSelectionMode="Single" SelectionChanged="ChartSelectionBehavior_SelectionChanged">
                            </chart:ChartSelectionBehavior>
                        </chart:RadCartesianChart.Behaviors>


                        <chart:BarSeries x:Name="barSerie" 
                                         DataBindingComplete="barSerie_DataBindingComplete" 
                                         AllowSelect="True" 
                                         ItemsSource="{Binding BillChartData, Mode=TwoWay}"
                                         ShowLabels="True">
                            <chart:BarSeries.PointTemplates>
                                <DataTemplate>
                                    <Grid>
                                        <Rectangle Fill="{StaticResource GreyBackgroundBrush}" Visibility="{Binding IsSelected, Converter={StaticResource ReverseBoolToVisibility}}"/>
                                        <Rectangle Fill="{StaticResource LightBlueBackgroundBrush}" Stroke="White" StrokeThickness="2" Visibility="{Binding IsSelected, Converter={StaticResource BooleanToVisibilityConverter}}" />
                                    </Grid>
                                    
                                </DataTemplate>
                            </chart:BarSeries.PointTemplates>
                            

                            <chart:BarSeries.ValueBinding>
                                <chart:PropertyNameDataPointBinding PropertyName="Value"/>
                            </chart:BarSeries.ValueBinding>
                            <chart:BarSeries.CategoryBinding>
                                <chart:PropertyNameDataPointBinding  PropertyName="Category"/>
                            </chart:BarSeries.CategoryBinding>
                            
                            <chart:BarSeries.LabelDefinitions>
                                <chart:ChartSeriesLabelDefinition HorizontalAlignment="Center" Margin="0 5 0 0" VerticalAlignment="Top">
                                    <chart:ChartSeriesLabelDefinition.Template>
                                        <DataTemplate>
                                            <TextBlock Foreground="#FF99999B" Text="{Binding DataItem.Value, StringFormat='£\{0:F\}'}">
                                            </TextBlock>
                                        </DataTemplate>
                                    </chart:ChartSeriesLabelDefinition.Template>
                                </chart:ChartSeriesLabelDefinition>
                            </chart:BarSeries.LabelDefinitions>

                        </chart:BarSeries>

                    </chart:RadCartesianChart>
  2. Rosy Topchiyska
    Admin
    Rosy Topchiyska avatar
    550 posts

    Posted 30 Jul 2014 Link to this post

    Hi Pedro,

    Thank you for contacting us.

    You can use a value converter to set a proper bar width depending on the available width. Here is a sample converter:

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var dataPoint = value as CategoricalDataPoint;
        var availableWidth = dataPoint.LayoutSlot.Width;
        if (availableWidth < 30)
        {
            return availableWidth;
        }
        else
        {
            return 30;
        }
    }
     
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
    And here is the point template:
    <chart:BarSeries.PointTemplates>
        <DataTemplate>
            <Grid>
                <Rectangle Fill="Red" Width="{Binding Converter={StaticResource Converter}}"/>
            </Grid>
        </DataTemplate>
    </chart:BarSeries.PointTemplates>

     You can also control the width if the bars with the CategoricalAxis.GapLength property. This property specifies what will be the ratio of the gap between the bars and the bars width.

    I hope this helps. Please, let us know if you have further questions.

    Regards,
    Rosy Topchiyska
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. DevCraft banner
Back to Top