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
Anonymous
July 30, 2009
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....Anonymous
July 31, 2009
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!Anonymous
November 06, 2009
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 :)Anonymous
November 09, 2009
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!Anonymous
May 10, 2010
Style TargetType="charting:ColumnDataPoint" is working. I have not updated the namespace. So it gave me an error.Anonymous
May 11, 2010
The comment has been removedAnonymous
January 05, 2011
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 youAnonymous
January 06, 2011
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!Anonymous
March 28, 2011
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. :(Anonymous
March 29, 2011
The comment has been removedAnonymous
September 11, 2011
Your article really helped me. Thanks.Anonymous
October 16, 2012
I have same problem as Martina Harris. Can you post any example how to solve this issue with annotation within really tall barsAnonymous
June 18, 2013
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 meAnonymous
June 19, 2013
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?Anonymous
June 19, 2013
Thanks for quick replyAnonymous
June 25, 2013
So there's no way to use an unrelated list of strings to annotate the top of the columns?Anonymous
June 25, 2013
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.Anonymous
June 25, 2013
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!Anonymous
September 24, 2013
I read the article 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!Anonymous
September 24, 2013
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.Anonymous
September 24, 2013
Thank you for your reply!Anonymous
October 17, 2013
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;Anonymous
October 17, 2013
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.Anonymous
October 17, 2013
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"/>