Simple column labels you can create at home! [Re-Templating the Silverlight/WPF Data Visualization ColumnDataPoint to add annotations]


This blog has moved to a new location and comments have been disabled.

All old posts, new posts, and comments can be found on The blog of dlaa.me.

See you there!

Comments (24)

  1. vinayshettar says:

    Is is possible to display the x-axis labels vertically?

    I am using Chart:Series which has ColumnSeries and LineSeries – The independentValueBinding is against date field. When there are large values the labels along x-axis get overlapped. So, I am trying to set the x-axis labels vertical. But havent been successful yet….

  2. Delay says:

    vinayshettar,

    I answered a very similar question on the Silverlight Toolkit support forum a while ago:

    http://silverlight.net/forums/t/90230.aspx

    The same basic technique of using the Toolkit’s LayoutTransformer control should work for this scenario as well.

    Hope this helps!

  3. mks_v1 says:

    how could I apply string formats to the annotations e.g. N0, N2

    also how can the y axis markers be formatted.

    ideally, the dependant axis marker would be N0 while the column annotations would be N1 or N2, or the annotation formatted as NO and a tooltip displaying more precision.

    this would take care of 95% of lob requirements  :)

  4. Delay says:

    mks_v1,

    The use of "FormattedDependentValue" above means that you can use the "DependentValueStringFormat" property (also on DataPoint) to customize the annotations with something like "Sales was {0} units.".

    Dependent axis labels can be customized in a similar manner as I show here:

    http://blogs.msdn.com/delay/archive/2009/05/12/pineapple-upside-down-chart-how-to-invert-the-axis-of-a-chart-for-smaller-is-better-scenarios.aspx

    Hope this helps!

  5. ronaldvimal says:

    Style TargetType="charting:ColumnDataPoint" is working. I have not updated the namespace. So it gave me an error.

  6. Delay says:

    ronaldvimal,

    I’m afraid I don’t understand the problem. If you want to see this sample running against the latest version of the code, it’s part of my DataVisualizationDemos application which you can download and run for Silverlight 3/4 and WPF 3.5/4 here:

    http://blogs.msdn.com/delay/archive/2010/04/22/nobody-likes-a-show-off-today-s-datavisualizationdemos-release-includes-new-demos-showing-off-stacked-series-behavior.aspx

    Hope this helps!

  7. Raluca says:

    Hi!

    Congrats on the really nice article.

    Do you know how can I make the datapoint rectangle enlarge if the text annotation is large?

    In my case all the data is dynamic, and sometimes, the chart has many series so each datapoint becomes quite small (in width) and an annotation like 1,000,000 doesn't fit in the rectangle so it gets truncated instead of enlarging the rectangle. Any other idea on how to display a large annotation is welcomed. thank you

  8. Delay says:

    Raluca,

    While you won't be able to easily make the ColumnDataPoint larger (it would distort the entire chart), a handy technique is to wrap the annotation inside a Viewbox. The Viewbox can be configured to automatically shrink the text instead of clipping it. Alternatively, consider putting the text inside a Canvas (which doesn't do clipping) – that might avoid the clipping with your current text/size.

    Hope this helps!

  9. Martina Harris says:

    Hi David,

    Your article really helped me. Thanks.

    I've used your idea in my project but I have one small problem. I'm placing the annotation on the top of the column bar but when the bar is really tall the top part of the annotation is only partial visible. Probably there is simple solution to this but I can't figure it out. :(

  10. Delay says:

    Martina Harris,

    Remember, I said it was a hack… :)

    It sounds like the text is getting clipped by the PlotArea/ChartArea – the easiest solution might be to allow some extra space at the top to accomodate the label. If you know the range of your data, you can do that by specifying a Maximum value on the vertical Axis (and adding one if you don't already have one). If not, it might be a bit trickier. Another idea might be to put the text inside a Popup or a Canvas because both of those can be used to side-step clipping issues like this (though it'd take a bit of experimenting to sort out exactly how to go about that).

    Alternatively, just remove the "-20" vertical margin from the Grid (see above). This will move the annotation from sitting on top of the *outside* of the bar to being at the top of the *inside* of the bar (basically just the opposite of the first example above where the annotations are at the bottom) – and therefore clipping won't be an issue because the annotation won't stick out anywhere.

    Hope this helps!

  11. manoj p says:

    Your article really helped me. Thanks.

  12. Danilo Vulovic says:

    I have same problem as Martina Harris. Can you post any example how to solve this issue with annotation within really tall bars

  13. Akhtar says:

    Hi,

    Thanks for this nice article

    I have a problem with IsSelectionEnabled=True

    My column does not select, what changes shall I do in template to work.

    Please help me

  14. Delay says:

    Akhtar,

    Does selection work without the modifications described above? If so, you can find the original template in the source code for the Data Visualization assemblies – maybe try starting from there to see if that help identify what's different?

  15. Akhtar says:

    Thanks for quick reply

  16. Dave says:

    So there's no way to use an unrelated list of strings to annotate the top of the columns?

  17. Delay says:

    Dave,

    As you can see above, the TextBlock for the annotation has access to Binding and TemplateBinding – so you should be able to point it to any content you want to display.

  18. Dave says:

    Thank you for that answer! I don't understand what you're talking about but at least I know it can be done and I'll learn more about binding. Thanks for your time!

  19. The problem with the scroll bar Chart says:

    I read the article

    http://www.nullskull.com/…/scrolling-in-wpf-toolkits-column-chart.aspx

    Now I want to add more data to the Chart,but the operating results are not ideal.Before the addition of XAML:

    <Window x:Class="WPFToolkitChartScrollDemo.MainWindow"

       xmlns="schemas.microsoft.com/…/presentation"

       xmlns:x="schemas.microsoft.com/…/xaml"

       xmlns:controls="clr-namespace:WPFToolkitChartScrollControls;assembly=WPFToolkitChartScrollControls"

       xmlns:charting="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"

       Title="MainWindow" Height="400" Width="500">

       <Grid>

           <charting:Chart>

               <charting:Chart.Series>

                   <controls:ScrollableColumnSeries

                       IndependentValueBinding="{Binding Name}"

                       DependentValueBinding="{Binding Quantity}"

                       ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=Window}, Path=Parts}"/>

               </charting:Chart.Series>

           </charting:Chart>

       </Grid>

    </Window>

    And After the additon of XAML:

    <Window x:Class="WPFToolkitChartScrollDemo.MainWindow"

       xmlns="schemas.microsoft.com/…/presentation"

       xmlns:x="schemas.microsoft.com/…/xaml"

       xmlns:controls="clr-namespace:WPFToolkitChartScrollControls;assembly=WPFToolkitChartScrollControls"

       xmlns:charting="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"

       Title="MainWindow" Height="400" Width="500">

       <Grid>

           <charting:Chart>

               <charting:Chart.Series>

                   <controls:ScrollableColumnSeries

                       IndependentValueBinding="{Binding Name}"

                       DependentValueBinding="{Binding Quantity}"

                       ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=Window}, Path=Parts}"/>

                   <controls:ScrollableColumnSeries

                       IndependentValueBinding="{Binding Name}"

                       DependentValueBinding="{Binding Quantity}"

                       ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=Window}, Path=Parts2}"/>

               </charting:Chart.Series>

           </charting:Chart>

       </Grid>

    </Window>                                                                                                                                                                                                                      

    When the scroll, only the series[0] data series change, while series[1] did not change.

    Can you help me?

    Thanks in advance!

  20. Delay says:

    The problem with the scroll bar Chart,

    I'm not familiar with ScrollableColumnSeries – you'll probably get a better answer if you ask the author of the ScrollableColumnSeries code/post instead.

  21. The problem with the scroll bar Chart says:

    Thank you  for your reply!

  22. Tung says:

    Thanks David,

    I have issue when using Simple Column Annotations – Bottom. All labels is cutoff if i using below data. Do you have any solution to fix it?

       var items = new List<KeyValuePair<string, double>>();

       items.Add(new KeyValuePair<string,double>("Dog", 4));

       items.Add(new KeyValuePair<string,double>("Cat", 1));

       items.Add(new KeyValuePair<string,double>("Fish", 2));

       items.Add(new KeyValuePair<string,double>("Chicken", 4));

       DataContext = items;

  23. Delay says:

    Tung,

    My guess is that the vertical axis is starting at a value larger than 0 because of the data values you're using. If memory serves, you can set the ShowOrigin property on the vertical axis to prevent that and then I'd expect the annotations to show up as you want.

  24. Tung says:

    Thank for quick reply,

    Yes, it starting at a value lager than 0. After I set the Minimum="0" in Axis all the labels appear again.

    <DVC:LinearAxis Orientation="Y" Minimum="0"/>