Log in to like this post! Custom Chart Data Point Templates [Infragistics] Devin Rader / Saturday, February 28, 2009 Here is an example of creating custom data point templates in a bubble chart. Data point templates allow you to provide custom UI for data points in a series. In this snippet, separate custom Data point templates are created for each of the three series included in the Bubble chart. <igChart:XamWebChart Margin="5" Background="AliceBlue"> <igChart:XamWebChart.Axes> <igChart:Axis AxisType="PrimaryX" AutoRange="False" Minimum="-100" Maximum="100" Unit="25" > <igChart:Axis.MajorGridline> <igChart:GridlineGroup Visibility="Collapsed"/> </igChart:Axis.MajorGridline> <igChart:Axis.Label> <igChart:LabelGroup Visibility="Collapsed"/> </igChart:Axis.Label> <igChart:Axis.MajorTickMark> <igChart:TickMarkGroup Visibility="Collapsed"/> </igChart:Axis.MajorTickMark> <igChart:Axis.Template> <ControlTemplate> <StackPanel> <Path Height="10" VerticalAlignment="Top" Stretch="Fill" Stroke="Silver" Data="M160,160 L560,160 L544.5,168.5 L560.5, 160.47223 L556.60596,158.68689 L544.02057, 152.91667 L560.00061,159.79167"/> <TextBlock Text="X Axis" TextAlignment="Right"/> </StackPanel> </ControlTemplate> </igChart:Axis.Template> </igChart:Axis> <igChart:Axis AxisType="PrimaryY" AutoRange="False" Minimum="-100" Maximum="100" Unit="25"> <igChart:Axis.MajorGridline> <igChart:GridlineGroup Visibility="Collapsed"/> </igChart:Axis.MajorGridline> <igChart:Axis.Label> <igChart:LabelGroup Visibility="Collapsed"/> </igChart:Axis.Label> <igChart:Axis.MajorTickMark> <igChart:TickMarkGroup Visibility="Collapsed"/> </igChart:Axis.MajorTickMark> <igChart:Axis.Template> <ControlTemplate> <StackPanel> <Path Height="10" VerticalAlignment="Top" Stretch="Fill" Stroke="Silver" Data="M160,160 L560,160 L544.5,168.5 L560.5, 160.47223 L556.60596,158.68689 L544.02057, 152.91667 L560.00061,159.79167"/> <TextBlock Text="Y axis" TextAlignment="Right"/> </StackPanel> </ControlTemplate> </igChart:Axis.Template> </igChart:Axis> </igChart:XamWebChart.Axes> <igChart:XamWebChart.Series> <igChart:Series ChartType="Bubble"> <igChart:Series.DataPointStyle> <Style TargetType="igChart:BubbleChartDataPointTemplate"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="igChart:BubbleChartDataPointTemplate"> <StackPanel Orientation="Vertical"> <Path Width="50" Height="50" Stretch="Uniform" Fill="{TemplateBinding Fill}" Stroke="{TemplateBinding Stroke}" Data="M81.5,0.50059509 C81.5,0.50059509 0.5, -0.49940491 0.5,79.500595 C0.5,159.5006 81,160.99916 81, 160.99916 C81,160.99916 161,160.50072 161,80.749588 C161, 0.99845886 81.5,0.50059509 81.5,0.50059509 z M81.5, 40.500595 C81.5,40.500595 40.5,39.500595 40.5, 79.500595 C40.5,119.5006 81,120.00294 81,120.00294 C81, 120.00294 121,120.49986 121,80.747543 C121, 40.995224 81.5,40.500595 81.5,40.500595 z"/> </StackPanel> </ControlTemplate> </Setter.Value> </Setter> </Style> </igChart:Series.DataPointStyle> <igChart:Series.DataPoints> <igChart:DataPoint> <igChart:DataPoint.ChartParameters> <igChart:ChartParameter Type="ValueX" Value="55"/> <igChart:ChartParameter Type="ValueY" Value="55"/> <igChart:ChartParameter Type="Radius" Value="1"/> </igChart:DataPoint.ChartParameters> </igChart:DataPoint> <igChart:DataPoint> <igChart:DataPoint.ChartParameters> <igChart:ChartParameter Type="ValueX" Value="-25"/> <igChart:ChartParameter Type="ValueY" Value="-50"/> <igChart:ChartParameter Type="Radius" Value="1"/> </igChart:DataPoint.ChartParameters> </igChart:DataPoint> <igChart:DataPoint> <igChart:DataPoint.ChartParameters> <igChart:ChartParameter Type="ValueX" Value="30"/> <igChart:ChartParameter Type="ValueY" Value="20"/> <igChart:ChartParameter Type="Radius" Value="1"/> </igChart:DataPoint.ChartParameters> </igChart:DataPoint> </igChart:Series.DataPoints> </igChart:Series> <igChart:Series ChartType="Bubble"> <igChart:Series.DataPointStyle> <Style TargetType="igChart:BubbleChartDataPointTemplate"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="igChart:BubbleChartDataPointTemplate"> <StackPanel Orientation="Vertical"> <Path Width="50" Height="50" Stretch="Uniform" Fill="{TemplateBinding Fill}" Stroke="{TemplateBinding Stroke}" Data="M122.14112,40.499996 L97.800911,97.301941 L40.5, 121.13847 L97.447197,144.826 L121.63716, 200.5 L145.82712,144 L201.5,120 L145,96 z M122.1293, 0.5 L161,79.999992 L241.50002,120 L161.83472, 160 L121.62669,240.5 L81.418655,160.83401 L0.5, 121.12747 L81.754425,81.254791 z"/> </StackPanel> </ControlTemplate> </Setter.Value> </Setter> </Style> </igChart:Series.DataPointStyle> <igChart:Series.DataPoints> <igChart:DataPoint> <igChart:DataPoint.ChartParameters> <igChart:ChartParameter Type="ValueX" Value="20"/> <igChart:ChartParameter Type="ValueY" Value="50"/> <igChart:ChartParameter Type="Radius" Value="1"/> </igChart:DataPoint.ChartParameters> </igChart:DataPoint> <igChart:DataPoint> <igChart:DataPoint.ChartParameters> <igChart:ChartParameter Type="ValueX" Value="10"/> <igChart:ChartParameter Type="ValueY" Value="-40"/> <igChart:ChartParameter Type="Radius" Value="1"/> </igChart:DataPoint.ChartParameters> </igChart:DataPoint> </igChart:Series.DataPoints> </igChart:Series> <igChart:Series ChartType="Bubble"> <igChart:Series.DataPointStyle> <Style TargetType="igChart:BubbleChartDataPointTemplate"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="igChart:BubbleChartDataPointTemplate"> <StackPanel Orientation="Vertical"> <Path Width="50" Height="50" Stretch="Uniform" Fill="{TemplateBinding Fill}" Stroke="{TemplateBinding Stroke}" Data="M119.4997,102.50001 L40.500313,103.52042 C40.500313, 103.52042 40.000317,127.50001 80.000008, 127.50001 C119.99969,127.50001 119.4997, 102.50001 119.4997,102.50001 z M116,40.5 C105.23045, 40.5 96.5,45.648724 96.5,52 C96.5,58.351276 105.23045, 63.5 116,63.5 C126.76955,63.5 135.5,58.351276 135.5, 52 C135.5,45.648724 126.76955,40.5 116,40.5 z M52, 40.5 C41.230446,40.5 32.5,45.648724 32.5,52 C32.5, 58.351276 41.230446,63.5 52,63.5 C62.769554,63.5 71.5, 58.351276 71.5,52 C71.5,45.648724 62.769554,40.5 52, 40.5 z M80,0.5 C123.90664,0.5 159.5,36.317219 159.5, 80.5 C159.5,124.68278 123.90664,160.5 80,160.5 C36.093361, 160.5 0.50000083,124.68278 0.5,80.5 C0.50000083, 36.317219 36.093361,0.5 80,0.5 z"/> </StackPanel> </ControlTemplate> </Setter.Value> </Setter> </Style> </igChart:Series.DataPointStyle> <igChart:Series.DataPoints> <igChart:DataPoint> <igChart:DataPoint.ChartParameters> <igChart:ChartParameter Type="ValueX" Value="-50"/> <igChart:ChartParameter Type="ValueY" Value="30"/> <igChart:ChartParameter Type="Radius" Value="1"/> </igChart:DataPoint.ChartParameters> </igChart:DataPoint> <igChart:DataPoint> <igChart:DataPoint.ChartParameters> <igChart:ChartParameter Type="ValueX" Value="-80"/> <igChart:ChartParameter Type="ValueY" Value="-70"/> <igChart:ChartParameter Type="Radius" Value="1"/> </igChart:DataPoint.ChartParameters> </igChart:DataPoint> </igChart:Series.DataPoints> </igChart:Series> </igChart:XamWebChart.Series> <igChart:XamWebChart.Legend> <igChart:Legend Visibility="Collapsed"/> </igChart:XamWebChart.Legend> </igChart:XamWebChart> Using the templates in the three chart series results in a chart that looks like this: Technorati Tags: Silverlight,xamWebChart