Various chart types display various information in balloons by default. PieChart displays active slice Title, PercentValue, Value and Description (if any) arranged in a grid. Serial charts (LineChart, ColumnChart) display SeriesText followed by colon and Value and (if set) current item's Title.

In most cases default balloon templates serve their purpose just fine, but sometimes you'll need to customize the displayed data and layout of the balloons. To do this you set your own BalloonTemplate. You can customize balloon template on chart, graph (in serial charts) or data item level.

Setting Custom BalloonTemplate

  1. Set BalloonTemplate property of your chart/graph/data item to an instance of ControlTemplate.

  2. Add BalloonFrame as root element of your template. BalloonFrame renders balloon-like frame around your content and positions the balloon accordingly.

  3. Define your balloon layout. DataContext of the balloon is set to currently active (hovered) data item so you can use any property of applicable data item (Slice, LineDataPoint, ColumnDataPoint) in the template.

Example

This example demonstrates how to customize balloon template of a line chart using MultiBinding with StringFormat property introduced in .NET Framework 3.5 SP1.

CopyXAML
<am:LineChart.BalloonTemplate>
    <ControlTemplate>
        <am:BalloonFrame>
            <TextBlock Padding="4" TextWrapping="Wrap">
                <TextBlock.Text>
                    <MultiBinding StringFormat="{}{0} ranking in {1}: {2}">
                        <Binding Path="Graph.Title" />
                        <Binding Path="SeriesText" />
                        <Binding Path="Value" />
                    </MultiBinding>
                </TextBlock.Text>
            </TextBlock>
        </am:BalloonFrame>
    </ControlTemplate>
</am:LineChart.BalloonTemplate>

This example demonstrates how to achive the same result without relying on .NET Framework 3.5 SP1.

CopyXAML
<am:LineChart.BalloonTemplate>
    <ControlTemplate>
        <am:BalloonFrame>
            <StackPanel Orientation="Horizontal" Margin="4">
                <TextBlock>
                    <TextBlock.Text>
                        <Binding Path="Graph.Title" />
                    </TextBlock.Text>
                </TextBlock>
                <TextBlock Margin="3,0">ranking in</TextBlock>
                <TextBlock>
                    <TextBlock.Text>
                        <Binding Path="SeriesText" />
                    </TextBlock.Text>
                    <Run>: </Run>
                </TextBlock>
                <TextBlock Margin="3,0,0,0">
                    <TextBlock.Text>
                        <Binding Path="Value" />
                    </TextBlock.Text>
                </TextBlock>
            </StackPanel>
        </am:BalloonFrame>
    </ControlTemplate>
</am:LineChart.BalloonTemplate>

The other way to achive the same effect would be creating custom value converter.

See Also