WPF C# Chart, Visual Studio VS2019-VS2013 WPF charting example

[Wpf Chart C# Client-Side EXE Development ]

ProEssentials charting WPF interfaces are used when creating stand-alone client-side EXEs to be distributed and ran on an end-users machine. This Wpf C# Charting Walk-through includes instructions for VS2019-VS2013. Click here for VS2010.

  • See the new v9 demo (only 18 meg and uninstalls no problem.)
  • Includes a WPF Charting Demo plus WinForm and 100% native.
  • Size, Shape, Right Click, Export, Zoom (especially date and log scales), Pan, and Rotate.
  • Study the code to discover the ease of use.
  • Your company, team, vendors, and end-users deserve the best.
See the demo...
WPF chart for finance engineering and  more WPF Chart 3d surface scatter wireframe terrain

It is recommended that the namespace: Gigasoft.ProEssentials.Enums be included at the top of your source code. In C#, use the using keyword:

using Gigasoft.ProEssentials.Enums;


The following information demonstrates how to create your first .NET WPF Charting ProEssentials implementation using the C# language. It discusses using the Wpf interfaces to add interactive scientific charting content to your EXEs. See the other charting examples provided within the product/evaluation.

1) New Project:

Start Visual Studio.NET and create a new project targeting...

  • Visual C#
  • Windows
  • WPF Application

Accept the default name of [WpfApplication1].

wpf c# project vs2012

2) When the new project opens, you will be presented the design view of "MainWindow.xaml and MainWindow.xaml.cs".

Customize Toolbox... Dialog Adding ProEssentials WPF Charts to Visual Studio.NET...

3) Installing WPF charting interfaces into Visual Studio.NET

VS2019 - VS2013 Instructions

  • Under the Tools menu, select [Choose Toolbox Items...],
  • If not selected, left click the [WPF Components] tab,
  • Left click the [Browse...] button and find the file "Gigasoft.ProEssentialsWpf.dll" found in the DotNetAnyCpu subdirectory where you installed ProEssentials. By default, this is located at "C:\ProEssentials9\DotNetAnyCpu\",
  • Select the file "Gigasoft.ProEssentialsWpf.dll" and close the [Open File] dialog,
  • The [Choose Toolbox Items] dialog should now show 5 highlighted controls: Pe3do, Pego, Pepco, Pepso, and Pesgo.
  • Close the dialog and the 5 new ProEssentials chart components will be at the bottom of the toolbox.
    Wpf charting toolbox items vs2012
MainWindow.xaml.cs [Design]...

4) Right click the [PegoWpf] tool within the toolbox
and select [

Move your cursor within the text view of MainWindow.xaml.cs between the <Grid> and </Grid> tags
and right click and [

The image to the right shows what you see.

WPF Copy and Paste chart to VS2012
Adding ProEssentials WPF Charts to a Window...

This represents the default state of a ProEssentials Graph. The default state has one subset with four data points. In the course of constructing your own charts, you'll set the properties PeData.Subsets and PeData.Points which define the quantity of data your chart will hold. You'll then pass data via the PeData.Y[subset, point] two dimensional property array. The following section shows example code of passing data.

ProEssentials uses the terms Subsets and Points but you can think of these as Rows and Columns. Passing data is as simple as filling each Subset with Points worth of data.

WPF Chart in VS2013

MainWindow.xaml.cs [Code]...

5) After embedding the chart in your window, place the cursor within the PegoWpf tag and type "Name=" and provide a name for your chart like "Pego1" and then type "Loaded=" and accept the default loaded event and right click and select Navigate to Event Handler. Your xaml should look like...

Adding WPF name and loaded event

With the cursor within the Pego1_Loaded code section, enter the following code into this section.

You can copy and paste if you must, but hand-typing at least some of this code will help familiarize yourself with the Gigasoft.ProEssentials namespace.  

Note: adding the following using declaration at the top of "MainWindow.xaml.cs" will shorten enumeration syntax.
using Gigasoft.ProEssentials.Enums;

Pego1.PeString.MainTitle = "Hello World";
Pego1.PeString.SubTitle = "";

Pego1.PeData.Subsets = 2;
Pego1.PeData.Points = 6;
Pego1.PeData.Y[0, 0] = 10; Pego1.PeData.Y[0, 1] = 30;
Pego1.PeData.Y[0, 2] = 20; Pego1.PeData.Y[0, 3] = 40;
Pego1.PeData.Y[0, 4] = 30; Pego1.PeData.Y[0, 5] = 50;
Pego1.PeData.Y[1, 0] = 15; Pego1.PeData.Y[1, 1] = 63;
Pego1.PeData.Y[1, 2] = 74; Pego1.PeData.Y[1, 3] = 54;
Pego1.PeData.Y[1, 4] = 25; Pego1.PeData.Y[1, 5] = 34;

Pego1.PeString.PointLabels[0] = "Jan";
Pego1.PeString.PointLabels[1] = "Feb";
Pego1.PeString.PointLabels[2] = "Mar";
Pego1.PeString.PointLabels[3] = "Apr";
Pego1.PeString.PointLabels[4] = "May";
Pego1.PeString.PointLabels[5] = "June";

Pego1.PeString.SubsetLabels[0] = "For .Net Framework";
Pego1.PeString.SubsetLabels[1] = "or MFC, ActiveX, VCL";
Pego1.PeString.YAxisLabel = "Simple Quality Rendering";

Pego1.PeColor.SubsetColors[0] = Color.FromArgb(60, 0, 180, 0);
Pego1.PeColor.SubsetColors[1] = Color.FromArgb(180, 0, 0, 130);

Pego1.PeColor.BitmapGradientMode = false;
Pego1.PeColor.QuickStyle = Gigasoft.ProEssentials.Enums.QuickStyle.LightShadow;
Pego1.PeTable.Show = Gigasoft.ProEssentials.Enums.GraphPlusTable.Both;
Pego1.PeData.Precision = Gigasoft.ProEssentials.Enums.DataPrecision.NoDecimals;
Pego1.PeFont.Label.Bold = true;
Pego1.PePlot.Method = Gigasoft.ProEssentials.Enums.GraphPlottingMethod.Bar;
Pego1.PePlot.Option.GradientBars = 8;
Pego1.PePlot.Option.BarGlassEffect = true;
Pego1.PeLegend.Location = Gigasoft.ProEssentials.Enums.LegendLocation.Left;
Pego1.PePlot.DataShadows = Gigasoft.ProEssentials.Enums.DataShadows.ThreeDimensional;
Pego1.PeFont.FontSize = Gigasoft.ProEssentials.Enums.FontSize.Large;

Pego1.PeConfigure.RenderEngine = Gigasoft.ProEssentials.Enums.RenderEngine.Direct2D;
Pego1.PeConfigure.AntiAliasGraphics = true;
Pego1.PeConfigure.AntiAliasText = true;
Pego1.PeUserInterface.HotSpot.Data = true;
// Pego1.Invalidate(); // optional help for real-time charts or certain update scenarios.
// Pego1.UpdateLayout(); // optional help for real-time charts or certain update scenarios.

Your project code should look similar to...

WPF C# vs2012 code window

WPF Charting events... Adding a DataHotSpot event...
vs2012 event window for HotSpot.

6) The code above enabled the DataHotSpot event, so we should place some appropriate code in the DataHotSpot event.

Left click the Pego Wpf chart control within visual designer to give it the focus.

From the main menu select [View] and [Properties Window] in case the property window is not showing.

Within the [Properties Window], click the [Events] icon.

Within the available events, double-click PeDataHotSpot

This opens the code view with cursor located at "Pego1_PeDataHotSpot".

Add the following code to the Pego1_PeDataHotSpot event.

System.Windows.MessageBox.Show("Subset " + e.SubsetIndex.ToString() +
", Point " + e.PointIndex.ToString() + " with a value of " +
Pego1.PeData.Y[e.SubsetIndex, e.PointIndex].ToString());

7) Save and run the project. Your project will show an image as follows. Move the mouse over chart and click a bar to trigger the DataHotSpot event.


This completes this WPF charting walkthrough. Please review the demo code and documentation that's installed with the eval/product. Demo projects can be accessed via shortcut... Start / All Programs / ProEssentials v9. Note that our main demo is replicated in native WPF C#, WinForm C#.NET, VB.NET, VC++ MFC, Delphi, Builder all accessible from where you installed ProEssentials. These are great for modifying an existing demo to test potential charting modifications before implementing within your applications.

WPF Scientific Charting in C# .Net language.



WPF charting online developer reference

Complete online technical reference to the ProEssentials product. Chapter 2's .NET Reference is the best mechanism to navigate the large quantity of properties and features.  Walk-Throughs of .NET charting in VB.NET, C#.NET, ASP, VC, and Delphi get you started quickly.

learn more about wpf charting, see Chapter 2

Interactive Wpf Charting Demo

WPF Scientific DirectX charting examples give you an instant taste of ProEssentials' power.

view our WPF Charting Demo

Letter from the President

Thank you for researching. Call, email and let's talk charting.

Thank you.