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
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>
Thanks Douglas,
This got me headed in the right direction. I was missing the canvas. Thanks also for the followup info on the location of the default styles!
Remember, you can always refer to the default styles for things like BoxChartDataPointTemplate as a starting point for your own custom styles.
http://help.infragistics.com/NetAdvantage/DV/2010.3/CLR4.0/?page=Designers_Guide_Location_Generic_XAML.html