Chart tweaking made easy [How to: Make four simple color/ToolTip changes with Silverlight/WPF Charting]


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 (37)
  1. prl says:

    Great post! πŸ™‚

    There were some things I still wasn’t understanding quite well, but your post made it all clear for me. I’ll play around with it now and see what else I can do.

    I see that I can change the chart background by redefining the PlotAreaStyle setter value, or change the border, legend or title styles. Great! Thanks again for this post πŸ™‚

    Cheers,

    Paulo

  2. UPDATE: If you are looking to follow this series, be sure to subscribe to my RSS feed at http://feeds

  3. ASPInsiders says:

    UPDATE: If you are looking to follow this series, be sure to subscribe to my RSS feed at http://feeds.jasongaylord.com/JasonNGaylord

  4. …eine Sammlung von Infos und interessanter Links rund um das Thema Silverlight, zusammengestellt aus

  5. coolduds says:

    Thanks for the info but when I try to open the ChartStylingScenarios, it says that:

    "The project type is not supported by this installation."

    Note that I do not have Silverlight installed because the machines i’m developing for will not have it either and I don’t want to include anything that won’t run on their machines.

    I’m working on a WPF application.

    Thanks for any info on this.

  6. Delay says:

    coolduds,

    That’s expected behavior – ChartStylingScenarios is a Silverlight (only) project. But I’ve got good news for you! πŸ™‚ The DataVisualizationDemos solution  I link to in the following post includes this sample and has projects for both Silverlight and WPF.

    http://blogs.msdn.com/delay/archive/2009/06/25/wpf-charting-it-s-official-june-2009-release-of-the-wpf-toolkit-is-now-available.aspx

    You should be able to open that solution, ignore the failure to read the Silverlight project, and then build, run, and analyze the WPF project just fine!

    Hope this helps!

  7. seeligd says:

    Thanks for the great post!

    I was just wondering about the data-binding in your charting examples – I understand the ItemsSource and the DependingValueBinding, but what does the backing data look like such that IndependentValueBinding="{Binding}" results in 'this' 'is' 'sample' 'data' in the chart?

           ItemsSource="{Binding}"

           DependentValueBinding="{Binding Length}"

           IndependentValueBinding="{Binding}">

  8. seeligd says:

    sorry nevermind the previous comment  – just found the link to the source – didn't see it earlier somehow πŸ™‚

  9. Andro says:

    Hi delay,

    how do you do the Custom ToolTip (Pie) now in SL 4 toolkit April 2010 release? They don't have the datavis:StylePalette palette anymore. thanks.

  10. Delay says:

    Andro,

    It's the same idea – though StylePalette has become ResourceDictionaryCollection. You can download a version of this sample that works with the April 2010 release as part of my Data Visualization Demos project: blogs.msdn.com/…/nobody-likes-a-show-off-today-s-datavisualizationdemos-release-includes-new-demos-showing-off-stacked-series-behavior.aspx

    Hope this helps!

  11. Joe says:

    Wondering how to display the series title instead of "Custom ToolTip"?

  12. Delay says:

    Joe,

    The DataContext of the ToolTip is a DataPoint instance. With luck (or maybe a bit of work on your part), it'll be possible to get to the Series instance from that DataPoint instance. After that, you can reference the Series's Title property and you should be set.

    Hope this helps!

  13. Rajesh says:

    David,

    How do we apply text on the pie chart slices and on column tops.?

  14. Delay says:

    Rajesh:

    For the latter, please have a look at this post: blogs.msdn.com/…/simple-column-labels-you-can-create-at-home-re-templating-the-silverlight-wpf-data-visualization-columndatapoint-to-add-annotations.aspx

    For the former, have a look at the posts by Bea here: http://cesso.org/r/DVLinks

    Hope this helps!

  15. Grant says:

    Hi David,

    Like Joe up above, I'm also trying to get the series title inside of the tooltip for a DataPoint.  You said above that it is possible to get the series instance from the DataPoint instance, which makes sense.  I seem to be having trouble getting a template for a DataPoint to reference it's parent Series.  Everything I try results in a blank tooltip.  Can you offer any help on how do do this?  Thanks for any info.

    Grant

  16. Delay says:

    Grant,

    If you're not having any luck with what's available by default, you may need to either subclass the Series and expose the Series instance via the DataPoint's Tag property or else modify the DataVis code a bit to expose a dedicated property for that purpose. Other than that, you might have the easiest time diagnosing data binding issues on WPF where the diagnostic messages (via the debug output window) are rather helpful.

    Sorry for the trouble – I hope this helps!

  17. can i show the Column of "ColumnSeries" in different color?

    like i have 3 options as 3 column of a column series.

    yes:-5

    no:-2

    don't know:8

    can i show:  'yes' column in "Green' color

    'no' column in "red' color

    'don't know' column in "Amber' color

    Thanks in Advance!!

  18. Delay says:

    kamlendra,

    I think the following post shows how to do what you want using an MVVM approach: blogs.msdn.com/…/columns-of-a-different-color-customizing-the-appearance-of-silverlight-charts-with-re-templating-and-mvvm.aspx

    FYI that you can find more helpful posts about Data Visualization here: http://cesso.org/r/DVLinks

    Hope this helps!

  19. Raj says:

    Can anyone please let me know, how to change the color of an area at runtime? I've tried setting style as

    Style styleListBoxItem = new Style(typeof(ColumnSeries));

    styleListBoxItem.Setters.Add(new Setter(ColumnSeries.BackgroundProperty, new SolidColorBrush(Colors.Blue)));

    but this didn't work out.

    Thanks.

  20. Delay says:

    Raj,

    If you're trying to implement the first example in code, please note that you should be setting the ColumnSeries.DataPointStyle property (not the Background).

  21. Alex says:

    Hello there,

    ive implemented a custom LegendItem (with checkBoxes to change the visibility of the Graph) but now i've got the Problem, that i need to access the default color so that i can add them to the legend. (Ive got multiple Graphs in different colors) . I want to change the fill property of a rectangle to this default  DataPoint color.

    I hope someone can help me! Thank you

  22. Delay says:

    Alex,

    From what I understand of your scenario, this isn't much different from how the default LegendItems get the right color for their series, is it? If so, please have a look at the existing implementation – particularly the XAML if I recall correctly – for some ideas on how to get this working.

    Hope this helps!

  23. pedro says:

    Hi I customized the tooltip of a Line Chart following the same process, the only problem is that by doing so My Ellipses disappear.

    The tooltip stills appear when i hover over the point but there is no Ellipse that shows you where the points are.

    XAML CODE FOR LINECHART

    <charting:Chart x:Name="lineCharter" Title="Line Series Demo" VerticalAlignment="Top" Margin="268,173.8,215.6,0" Height="242" Background="#FF12575C" Grid.Row="2" Grid.RowSpan="2" Grid.ColumnSpan="3" BorderBrush="#FF09F1FF" Foreground="White" >

                   <charting:LineSeries   DependentValuePath="Value" IndependentValuePath="Key" IsSelectionEnabled="True" Foreground="#FF09F1FF" ItemsSource="{Binding BindsDirectlyToSource=True}" DataPointStyle="{StaticResource MyLineDataPointStyle}"/>                  

               </charting:Chart>

    APP.XAMLCODE (Straight out of the sample template only the tooltip changed just like your example)

  24. Delay says:

    pedro,

    Sorry for the trouble! I can't tell from your snippet what's wrong, but I'd suggest maybe starting from my sample and applying your changes one-by-one to see when the problem shows up.

  25. Pedro says:

    The problem shows up as soon as i create a new style for charting:LineDataPoint. the line is displayed correctly but the points (ellipses) are not shown

  26. pedro says:

    Have you ever tried editing the tool-tip of a a Line Chart?

    Thanks for the response

  27. Delay says:

    pedro,

    I've done this before, but it can be tricky to get it right. πŸ™‚

    One thing I'd suggest looking at is the very simple data point template I use here (for ScatterDataPoint, but I think it's just as good for LineDataPoint): blogs.msdn.com/…/i-feel-the-need-the-need-for-speed-seven-simple-performance-boosting-tweaks-for-common-silverlight-wpf-charting-scenarios.aspx

    Another suggestion is to start from the official LineDataPoint template from the source code of the Toolkit you downloaded or here: silverlight.codeplex.com/…/latest

    Hope this helps!

  28. Pedro says:

    David,

    sorry for the late response but i took time to start everything from scratch step by step

    1)created a chart with no style

    2)created a line series with no style

    3)Copy the LineDataPoint Template from the link you provided

    4)Set the LineDatapoint style to the one from the link without making any changes at all

    When i do only the first 3 steps everything looks like default (Ellipses show up as well as tool-tip)

    As soon as i do step 4 the ellipses don't show up only the tooltip.

    Will you say the template from the link is corrupted?

    I notice that in your "boosting performance" article  there is no LineSeries chart with custom tool-tip, only Pie and Column Series.

  29. Delay says:

    Pedro,

    I've just now modified the "Performance Tweaks" sample of my DataVisualizationDemos app (download from here: blogs.msdn.com/…/nobody-likes-a-show-off-today-s-datavisualizationdemos-release-includes-new-demos-showing-off-stacked-series-behavior.aspx) to include a custom ToolTip as per the XAML below. To see it, modify the x:Key="SimplifiedTemplate" as I have done, run it, open the performance sample, check the Simplified Template box, then press the Create Chart, Add Series, and Populate buttons and hover over the points to see the ToolTip. I did this with the WPF sample and it's a ScatterSeries instead of a LineSeries, but the fact that it works as expected suggests to me that something similar should be do-able for LineSeries (and Silverlight if that's your platform). πŸ™‚

    <Grid

       Width="5"

       Height="5"

       Background="{TemplateBinding Background}">

       <ToolTipService.ToolTip>

           <StackPanel>

               <TextBlock Text="This is a custom ToolTip"/>

               <ContentControl Content="{TemplateBinding FormattedDependentValue}"/>

           </StackPanel>

       </ToolTipService.ToolTip>

    </Grid>

  30. Pedro says:

    David,

    I just performed the change and yes i am able to see the custom tool-tip.

    I will spend some time trying to apply this to the line series.

    Thanks a lot for your help.

    i will post back with my findings.

  31. Pedro says:

    David,

    THANKS!

    Finally works. I have no idea why when i apply the style from silverlight.codeplex.com/…/latest  the points do not show up, but when i applied your style template the points show up as squares and the tool-tip too.

    I had spend at least 3 days trying to figure this out. I am glad that there is people that are willing to help others.

    A thousand thanks

  32. Delay says:

    Pedro,

    Glad to hear you got it working! πŸ™‚

  33. Naveen says:

    How to print a value on piechart, below is the code which I am using

    <charting:PieSeries.DataPointStyle >

                       </charting:PieSeries.DataPointStyle>

  34. tle says:

    Nice post!

    For the Column chart, I don't see StylePalette in ColumnSeries WPF4? What is the alternative?

    Thanks

  35. tle says:

    Nice Post!

    For WPF4, I don't see in StylePalette in ColumnSeries? What's the alternatives?

    Thanks

  36. David Anson says:

    tle,

    Colors for ColumnSeries can be specified directly – as shown in the post above. The palette is only needed by PieSeries where a single series might display using multiple colors.

Comments are closed.