Max Width Bar Chart

[Pedro]

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>

[Rosy Topchiyska]

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