<UserControl x:Class="IndicatorForMultipleCharts.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:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"
    mc:Ignorable="d" d:DesignWidth="700" d:DesignHeight="420">

    <Grid x:Name="LayoutRoot" HorizontalAlignment="Center" VerticalAlignment="Center">
      <StackPanel Background="White">
            
            <vc:Chart CornerRadius="10,10,0,0" BorderThickness="0,1,1,0" Margin="65,0,0,0" Padding="5,5,5,20" HorizontalAlignment="Left" VerticalAlignment="Top" Theme="Theme1" Background="#FFF8F4FF" ShadowEnabled="True" x:Name="Chart1" Width="615" Height="200" ScrollingEnabled="false">
                
                <vc:Chart.Titles>
                    <vc:Title BorderThickness="1" Margin="0,0,0,5" ShadowEnabled="True" Padding="5" CornerRadius="4" FontSize="12" Text="Interaction between two separate charts">
                        <vc:Title.Background>
                            <LinearGradientBrush>
                                <GradientStop Color="White" Offset="0"></GradientStop>
                                <GradientStop Color="White" Offset="1"></GradientStop>
                            </LinearGradientBrush>
                        </vc:Title.Background>
                    </vc:Title>
                </vc:Chart.Titles>
                
                <vc:Chart.TrendLines>
                    <vc:TrendLine Opacity="0.1" LineColor="Red" Orientation="Vertical" StartValue="1" EndValue="10"/>
                    <vc:TrendLine Opacity="0.1" LineColor="Green" Orientation="Vertical" StartValue="11" EndValue="20"/>
                    <vc:TrendLine Opacity="0.1" LineColor="Blue" Orientation="Vertical" StartValue="21" EndValue="30"/>
                </vc:Chart.TrendLines>
                
                <vc:Chart.AxesX>
                    <vc:Axis AxisMaximum="31" StartFromZero="true" IncludeZero="False" Enabled="false" Interval="2" LineThickness="0">
                        <vc:Axis.Grids>
                            <vc:ChartGrid Opacity="0.2" Interval="0.5"></vc:ChartGrid>
                        </vc:Axis.Grids>
                    </vc:Axis>
                </vc:Chart.AxesX>

                <vc:Chart.AxesY>
                    <vc:Axis LineThickness="0" TitleFontWeight = "Light" Title="Y-Axis" TitleFontSize = "12"  >
                        <vc:Axis.Grids>
                            <vc:ChartGrid Opacity="0.2"  Interval="2" ></vc:ChartGrid>
                        </vc:Axis.Grids>
                    </vc:Axis>
                </vc:Chart.AxesY>

                <vc:Chart.PlotArea>
                    <vc:PlotArea BorderBrush="#002147" BorderThickness="0" ShadowEnabled="false" >
                        <vc:PlotArea.Background>
                            <LinearGradientBrush>
                                <GradientStop Color="White" Offset="0"></GradientStop>
                                <GradientStop Color="White" Offset="1"></GradientStop>
                            </LinearGradientBrush>
                        </vc:PlotArea.Background>
                    </vc:PlotArea>
                </vc:Chart.PlotArea>
                
            </vc:Chart>

            <vc:Chart CornerRadius="10,0,10,10" BorderThickness="1,0,1,0" Padding="5,5,5,5" HorizontalAlignment="Left" VerticalAlignment="Top" Theme="Theme1" Background="#FFF8F4FF" ShadowEnabled="True" x:Name="Chart2" Width="680" Height="200" ScrollingEnabled="false">
                
                <vc:Chart.TrendLines>
                    <vc:TrendLine Opacity="0.1" LineColor="Red" Orientation="Vertical" StartValue="1" EndValue="10"/>
                    <vc:TrendLine Opacity="0.1" LineColor="Green" Orientation="Vertical" StartValue="11" EndValue="20"/>
                    <vc:TrendLine Opacity="0.1" LineColor="Blue" Orientation="Vertical" StartValue="21" EndValue="30"/>
                </vc:Chart.TrendLines>
                
                <vc:Chart.AxesX>
                    <vc:Axis StartFromZero="true" AxisMaximum="31" IncludeZero="False" Interval="1" LineThickness="1" LineColor="Black" Title="Groups" TitleFontSize="14" >
                        <vc:Axis.Grids>
                            <vc:ChartGrid Opacity="0.2" Interval="0.5"></vc:ChartGrid>
                        </vc:Axis.Grids>
                        <vc:Axis.AxisLabels>
                            <vc:AxisLabels  ></vc:AxisLabels>
                        </vc:Axis.AxisLabels>
                        <vc:Axis.CustomAxisLabels>
                        <vc:CustomAxisLabels FontSize="12">
                            <vc:CustomAxisLabels.Labels>
                                <vc:CustomAxisLabel Text="Group1" From="1" To="10"/>
                                <vc:CustomAxisLabel Text="Group2" From="11" To="20"/>
                                <vc:CustomAxisLabel Text="Group3" From="21" To="30"/>
                                </vc:CustomAxisLabels.Labels>
                        </vc:CustomAxisLabels>
                        </vc:Axis.CustomAxisLabels>

                    </vc:Axis>
                </vc:Chart.AxesX>
                
                <vc:Chart.AxesY>
                    <vc:Axis LineThickness="0" TitleFontWeight = "Light" Title="Remarks" TitleFontSize = "14"  >
                        <vc:Axis.Grids>
                            <vc:ChartGrid Opacity="0.2"  Interval="2" ></vc:ChartGrid>
                        </vc:Axis.Grids>

                        <vc:Axis.CustomAxisLabels>
                            <vc:CustomAxisLabels FontSize="10">
                                <vc:CustomAxisLabels.Labels>
                                    <vc:CustomAxisLabel Text="Poor" From="20" To="20"/>
                                    <vc:CustomAxisLabel Text="Average" From="40" To="40"/>
                                    <vc:CustomAxisLabel Text="Good" From="50" To="68"/>
                                    <vc:CustomAxisLabel Text="VeryGood" From="70" To="80"/>
                                    <vc:CustomAxisLabel Text="Excellent" From="82" To="100"/>
                                </vc:CustomAxisLabels.Labels>
                            </vc:CustomAxisLabels>
                        </vc:Axis.CustomAxisLabels>
                        
                    </vc:Axis>
                </vc:Chart.AxesY>
                
                <vc:Chart.PlotArea>
                    <vc:PlotArea BorderBrush="#002147" BorderThickness="0" ShadowEnabled="false" >
                        <vc:PlotArea.Background>
                            <LinearGradientBrush>
                                <GradientStop Color="White" Offset="0"></GradientStop>
                                <GradientStop Color="White" Offset="1"></GradientStop>
                            </LinearGradientBrush>
                        </vc:PlotArea.Background>
                    </vc:PlotArea>
                </vc:Chart.PlotArea>

            </vc:Chart>

        </StackPanel>        
    </Grid>      
</UserControl>