Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
30
Box Chart Style
posted

Has anyone successfully used a BoxChartDataPointTemplate? I am trying to style the gradient and/or draw a custom marker (circle) and have had no luck. Can the box chart style whiskers be drawn on other chart types, like a bubble? Thanks

Parents
No Data
Reply
  • 816
    Verified Answer
    posted

    Here's a sample that might help you out.  This custom style should draw a red circle inside the bar for the data point.

    <UserControl x:Class="SL_xamWebChart.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:igChart="clr-namespace:Infragistics.Silverlight.Chart;assembly=InfragisticsSL4.Controls.Charts.XamWebChart.v10.3"
        mc:Ignorable="d"
        d:DesignHeight="300" d:DesignWidth="400">
        <UserControl.Resources>
            <Style x:Key="DataPointStyle1" TargetType="igChart:BoxChartDataPointTemplate">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="igChart:BoxChartDataPointTemplate">
                            <Canvas x:Name="RootElement">
                                <Line x:Name="LineMin" Stroke="{TemplateBinding Stroke}" StrokeThickness="{TemplateBinding StrokeThickness}"/>
                                <Line x:Name="LineMax" Stroke="{TemplateBinding Stroke}" StrokeThickness="{TemplateBinding StrokeThickness}"/>
                                <Line x:Name="LineSpan" Stroke="{TemplateBinding Stroke}" StrokeThickness="{TemplateBinding StrokeThickness}"/>
                                <Line x:Name="LineMedian" Stroke="{TemplateBinding Stroke}" StrokeThickness="{TemplateBinding StrokeThickness}"/>
                                <Border x:Name="BoxDataPoint" BorderBrush="{TemplateBinding Stroke}" Background="{TemplateBinding Fill}" BorderThickness="{TemplateBinding BorderThickness}">
                                    <Ellipse Stretch="Uniform" Fill="red"/>
                                </Border>
                            </Canvas>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </UserControl.Resources>
    
        <Grid x:Name="LayoutRoot" Background="White">
            <igChart:XamWebChart Name="chart1" Height="200" Width="300" VerticalAlignment="Top">
                <igChart:XamWebChart.Series>
                    <igChart:Series ChartType="Box" Label="Box XYZ">
                        <igChart:Series.DataPoints>
                            <igChart:DataPoint Label="10/10/2007">
                                <igChart:DataPoint.ChartParameters>
                                    <igChart:ChartParameter Type="Max" Value="50" />
                                    <igChart:ChartParameter Type="Min" Value="5" />
                                    <igChart:ChartParameter Type="Q1" Value="9" />
                                    <igChart:ChartParameter Type="Q2" Value="25" />
                                    <igChart:ChartParameter Type="Q3" Value="40" />
                                </igChart:DataPoint.ChartParameters>
                            </igChart:DataPoint>
                            <igChart:DataPoint Label="10/11/2007" Style="{StaticResource DataPointStyle1}" Fill="Green">
                                <igChart:DataPoint.ChartParameters>
                                    <igChart:ChartParameter Type="Max" Value="60" />
                                    <igChart:ChartParameter Type="Min" Value="10" />
                                    <igChart:ChartParameter Type="Q1" Value="15" />
                                    <igChart:ChartParameter Type="Q2" Value="25" />
                                    <igChart:ChartParameter Type="Q3" Value="45" />
                                </igChart:DataPoint.ChartParameters>
                            </igChart:DataPoint>
                        </igChart:Series.DataPoints>
                    </igChart:Series>
                </igChart:XamWebChart.Series>
            </igChart:XamWebChart>
        </Grid>
    </UserControl>
    
Children