Learn more at devexpress.comCopyright © 2008 Developer Express IncALL RIGHTS RESERVED

WPF Charts – Getting Started

The DXCharts control is an advanced, customizable and feature-rich 3D Charting Control for the

Windows Presentation Foundation.

In this video, you will learn how to create a new chart, change its diagram type, create a series of points

for it, change the model and create a legend.

So let’s get started…

1. I’ll start with a new WPF application.

2. From the Toolbox, I drag and drop a ChartControl onto the Window.

3. Within the XAML editor, you can see the code generated automatically by the designer.

4. I highlight and remove the Margin property so the Chart is positioned within the Window

boundaries.

5. The DXChart supports four different diagram types which can be set using its Diagram property.

6. The available options are SimpleDiagram2D, XYDiagram2D, SimpleDiagram3D, and

XYDiagram3D.

7. For the purposes of this lesson, I’ll select the XyDiagram2D.

8. I select the diagram within the XAML editor so that I can access its properties.

9. From the Properties panel, I invoke the Series Collection Editor.

10. Here, I can add a series for any one of the following chart types.

11. I’ll create two BarSideBySideSeries2D series.

12. I select the first series to access its properties.

13. I can set the ArgumentScaleType.

Learn more at devexpress.comCopyright © 2008 Developer Express IncALL RIGHTS RESERVED

14. This specifies the scale type for the argument data of the series’ data points.

15. I can also set the ValueScaleType property.

16. This specifies the scale type for the value of the series’ data points.

17. For this example, I’ll leave the properties as is.

18. I invoke the “Points Collection Editor”.

19. I add four points and specify the Argument and Value for each.

20. I click on OK to close the editor.

21. I select the second BarSideBySide Series and invoke its “Points Collection Editor”.

22. I create another four points here.

23. I close the editor.

24. Now I’m going to modify the names for my series.

25. For this, I set the DisplayName property for each series.

26. “My First Series” and “My Second Series”.

27. Finally, I enable the ColorEach property for both series.

28. And I’m done!

29. I click OK to close the “Series Collection Editor”.

30. I run the application to see the results.

31. You can see the chart drawn with all the specified points.

32. I can resize the window and charts are smoothly resized to fill the area.

33. Now let’s see how to create a legend for this chart.

34. I close the application and return to Visual Studio.

35. I select the ChartControl and set its Legend property.

36. This will generate a legend for the chart.

Learn more at devexpress.comCopyright © 2008 Developer Express IncALL RIGHTS RESERVED

37. Within the XAML editor, I select the Legend element to access its properties.

38. I set its Margin accordingly so that it doesn’t look attached to the diagram.

39. Now, let’s give the chart a semi-3D look.

40. To do this, I select the first series and set its Model property to Quasi3DBarModel.

41. Next, I’m going to modify the PointOptions property of the series.

42. I can set the PointView property to ArgumentAndValues and you can see the both the argument

and value being displayed above each bar.

43. I also want to modify the points displayed inside the legend.

44. I set the LegendPointOptions property and modify the PointView property to only display the

series names within the legend.

45. Let’s go back and display only the value above each bar.

46. Finally, I will remove the ColorEach property so that each series gets its own color on the chart

and the legend.

47. There! I follow the same steps to modify the second series.

48. And that’s it!

49. I run the application again.

50. And there we have it… a Quasi3D Chart with a legend displaying both series in two different

colors!

Thanks for watching and as always, thank you for choosing DevExpress!