<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:ChartSamples"            
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" x:Class="ChartSamples.Bubble"
    mc:Ignorable="d" 
    Foreground="#FFF0F8FE"
  >
  <UserControl.Resources>
    <Style x:Key="CE_SampleChart" TargetType="c1:C1Chart">
      <Setter Property="Foreground" Value="#FFF0F8FE" />
      <Setter Property="Background" Value="#ff071D2E" />
      <Setter Property="BorderBrush" Value="#FF8FB4CC" />
      <Setter Property="BorderThickness" Value="1" />
      <Setter Property="Padding" Value="10" />
    </Style>
    <local:ToolTipConverter x:Key="ttc" />
    <DataTemplate x:Key="tooltip">
      <TextBlock Text="{Binding Converter={StaticResource ttc}}" Margin="2"/>
    </DataTemplate>
    <ResourceDictionary x:Key="brushes">
      <LinearGradientBrush x:Key="0" EndPoint="1,0" StartPoint="0,0">
        <GradientStop Color="#FFFDEE50" Offset="0.17"/>
        <GradientStop Color="#FFE0A608" Offset="0.33"/>
        <GradientStop Color="#FFE0E0E0" Offset="0.33"/>
        <GradientStop Color="#FF939393" Offset="0.67"/>
        <GradientStop Color="#FFEEB979" Offset="0.67"/>
        <GradientStop Color="#FFB1723E" Offset="0.83"/>
      </LinearGradientBrush>
      <LinearGradientBrush x:Key="1" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFEEB979" Offset="0.4"/>
        <GradientStop Color="#FFB1723E" Offset="0.6"/>
      </LinearGradientBrush>
      <LinearGradientBrush x:Key="2" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFE0E0E0" Offset="0.4"/>
        <GradientStop Color="#FF939393" Offset="0.6"/>
      </LinearGradientBrush>
      <LinearGradientBrush x:Key="3" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFFDEE50" Offset="0.4"/>
        <GradientStop Color="#FFE0A608" Offset="0.6"/>
      </LinearGradientBrush>
    </ResourceDictionary>
  </UserControl.Resources>
    <Grid x:Name="LayoutRoot">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition />
    </Grid.RowDefinitions>
      <Border Margin="4">
        <TextBlock VerticalAlignment="Center">
          <Run Text="Olympic medals by country"/>
        </TextBlock>
      </Border>
      <c1:C1Chart Grid.Row="1" Margin="1" x:Name="chart" Style="{StaticResource CE_SampleChart}"
                 ChartType="Bubble" CustomPalette="{StaticResource brushes}"
                 c1:BubbleOptions.Scale="Area"
                 c1:BubbleOptions.MinSize="20,20"
                 c1:BubbleOptions.MaxSize="80,80">
        <c1:C1Chart.Data>
          <c1:ChartData>
            <c1:BubbleSeries Label="Total"
                         Values="0 0 0 1 1 1 2 2 2" 
                         XValues="0 1 2 0 1 2 0 1 2"  
                         SizeValues="92 102 110 59 63 100 88 92 72"
                         SymbolSize="14,14"
                         PointTooltipTemplate="{StaticResource tooltip}"/>
            <c1:BubbleSeries Label="Bronze" 
                         Values="0 0 0 1 1 1 2 2 2" 
                         XValues=".2 1.2 2.2 .2 1.2 2.2 .2 1.2 2.2"
                         SizeValues="31 27 36 15 14 28 28 38 28"
                         SymbolSize="14,14"
                         PointTooltipTemplate="{StaticResource tooltip}"/>
            <c1:BubbleSeries Label="Silver"
                         Values="0 0 0 1 1 1 2 2 2"
                         XValues="0 1 2 0 1 2 0 1 2"
                         SizeValues="24 39 38 16 17 21 28 27 21"
                         SymbolSize="14,14"
                         PointTooltipTemplate="{StaticResource tooltip}"/>
            <c1:BubbleSeries Label="Gold"
                         Values="0 0 0 1 1 1 2 2 2"
                         XValues="-0.2 0.8 1.8 -0.2 0.8 1.8 -0.2 0.8 1.8"
                         SizeValues="36 36 36 28 32 51 32 27 23"
                         SymbolSize="14,14"
                         PointTooltipTemplate="{StaticResource tooltip}"/>
          </c1:ChartData>
      </c1:C1Chart.Data>
        <c1:C1ChartLegend />
    </c1:C1Chart>
  </Grid>
</UserControl>
