<UserControl x:Class="BaseChartViewProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             xmlns:local="clr-namespace:BaseChartViewProject"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="600">
 
    <UserControl.Resources>
        <Style x:Key="barStyle" TargetType="Border">
            <Setter Property="MaxWidth" Value="50" />
            <Setter Property="Background" Value="{Binding DataItem.Fill}"/>
        </Style>
    </UserControl.Resources>
    
    <Grid>        
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        
        <telerik:RadCartesianChart x:Name="chart">

            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:CategoricalAxis GapLength="0.5"/>
            </telerik:RadCartesianChart.HorizontalAxis>

            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis/>
            </telerik:RadCartesianChart.VerticalAxis>

            <telerik:BarSeries CombineMode="Stack" 
                               ItemsSource="{Binding FirstItemsCollection}" 
                               ValueBinding="Value" 
                               CategoryBinding="Category" 
                               DefaultVisualStyle="{StaticResource barStyle}"/>
        </telerik:RadCartesianChart>

        <telerik:RadCartesianChart x:Name="chart2" Grid.Column="1">
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:CategoricalAxis GapLength="0.9" />
            </telerik:RadCartesianChart.HorizontalAxis>
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis />
            </telerik:RadCartesianChart.VerticalAxis>

            <telerik:BarSeries ItemsSource="{Binding SecondItemsCollection}" 
                           CombineMode="Stack" 
                           DefaultVisualStyle="{StaticResource barStyle}"
                           ValueBinding="Value" 
                           CategoryBinding="Category" />
        </telerik:RadCartesianChart>
    </Grid>
</UserControl>
