<UserControl x:Class="CreatingRangeChart.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"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <vc:Chart  xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts" 
    Width="500" Height="300" Theme="Theme1" ShadowEnabled="True" CornerRadius="5,5,0,0" BorderThickness="0.5"         
    BorderBrush="Gray" AnimatedUpdate="true" >

            <vc:Chart.Titles>
                <vc:Title Text="Project Shedule" FontFamily="Arial" FontSize="14" Padding="0,5,0,0"/>
            </vc:Chart.Titles>

            <vc:Chart.PlotArea>
                <vc:PlotArea CornerRadius="0,5,0,0" BorderThickness="0,1,1,0" BorderColor="LightGray" />
            </vc:Chart.PlotArea>

            <vc:Chart.AxesX>
                <vc:Axis Title="Project" />
            </vc:Chart.AxesX>

            <vc:Chart.AxesY>
                <vc:Axis AxisMinimum="0" AxisMaximum="11" Interval="1" Title="2010" >
                    <vc:Axis.AxisLabels>
                        <vc:AxisLabels Enabled="False" />
                    </vc:Axis.AxisLabels>
                    <vc:Axis.Ticks>
                        <vc:Ticks Enabled="true"/>
                    </vc:Axis.Ticks>
                    <vc:Axis.CustomAxisLabels>
                        <vc:CustomAxisLabels Angle="-90" LineEnabled="False" >
                            <vc:CustomAxisLabels.Labels>
                                <vc:CustomAxisLabel From="0" To="0" Text="Jan" />
                                <vc:CustomAxisLabel From="1" To="1" Text="Feb" />
                                <vc:CustomAxisLabel From="2" To="2" Text="Mar" />
                                <vc:CustomAxisLabel From="3" To="3" Text="Apr" />
                                <vc:CustomAxisLabel From="4" To="4" Text="May" />
                                <vc:CustomAxisLabel From="5" To="5" Text="June" />
                                <vc:CustomAxisLabel From="6" To="6" Text="July" />
                                <vc:CustomAxisLabel From="7" To="7" Text="Aug" />
                                <vc:CustomAxisLabel From="8" To="8" Text="Sep" />
                                <vc:CustomAxisLabel From="9" To="9" Text="Oct" />
                                <vc:CustomAxisLabel From="10" To="10" Text="Nov" />
                                <vc:CustomAxisLabel From="11" To="11" Text="Dec" />
                            </vc:CustomAxisLabels.Labels>
                        </vc:CustomAxisLabels>
                    </vc:Axis.CustomAxisLabels>
                </vc:Axis>
            </vc:Chart.AxesY>

            <vc:Chart.Series>
                <vc:DataSeries RenderAs="StackedBar" ShowInLegend="False" >
                    <vc:DataSeries.DataPoints>
                        <vc:DataPoint AxisXLabel="Project4" YValue="2" Color="Transparent" />
                        <vc:DataPoint AxisXLabel="Project3" YValue="5" Color="Transparent"/>
                        <vc:DataPoint AxisXLabel="Project2" YValue="3" Color="Transparent"/>
                        <vc:DataPoint AxisXLabel="Project1" YValue="6" Color="Transparent"/>
                    </vc:DataSeries.DataPoints>
                </vc:DataSeries>

                <vc:DataSeries RenderAs="StackedBar" Bevel="False"  ShowInLegend="False"  >
                    <vc:DataSeries.DataPoints>
                        <vc:DataPoint AxisXLabel="Project4" YValue="3">
                            <vc:DataPoint.Color>
                                <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStop Color="Green" Offset="0" ></GradientStop>
                                        <GradientStop Color="Yellow" Offset=".5" ></GradientStop>
                                        <GradientStop Color="Red" Offset="1" ></GradientStop>
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </vc:DataPoint.Color>
                        </vc:DataPoint>
                        <vc:DataPoint AxisXLabel="Project3" YValue="4">
                            <vc:DataPoint.Color>
                                <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStop Color="Green" Offset="0" ></GradientStop>
                                        <GradientStop Color="Yellow" Offset=".5" ></GradientStop>
                                        <GradientStop Color="Red" Offset="1" ></GradientStop>
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </vc:DataPoint.Color>
                        </vc:DataPoint>
                        <vc:DataPoint AxisXLabel="Project2" YValue="5">
                            <vc:DataPoint.Color>
                                <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStop Color="Green" Offset="0" ></GradientStop>
                                        <GradientStop Color="Yellow" Offset=".5" ></GradientStop>
                                        <GradientStop Color="Red" Offset="1" ></GradientStop>
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </vc:DataPoint.Color>
                        </vc:DataPoint>
                        <vc:DataPoint AxisXLabel="Project1" YValue="5" >
                            <vc:DataPoint.Color>
                                <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStop Color="Green" Offset="0" ></GradientStop>
                                        <GradientStop Color="Yellow" Offset=".5" ></GradientStop>
                                        <GradientStop Color="Red" Offset="1" ></GradientStop>
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </vc:DataPoint.Color>
                        </vc:DataPoint>
                    </vc:DataSeries.DataPoints>
                </vc:DataSeries>

                <vc:DataSeries RenderAs="StackedBar"  ShowInLegend="False" >
                    <vc:DataSeries.DataPoints>
                        <vc:DataPoint AxisXLabel="Project4" YValue="3" Color="Transparent" />
                        <vc:DataPoint AxisXLabel="Project3" YValue="5" Color="Transparent"/>
                        <vc:DataPoint AxisXLabel="Project2" YValue="7" Color="Transparent"/>
                        <vc:DataPoint AxisXLabel="Project1" YValue="11" Color="Transparent"/>
                    </vc:DataSeries.DataPoints>
                </vc:DataSeries>

            </vc:Chart.Series>
        </vc:Chart>

    </Grid>
</UserControl>
