In this exercise, we’ll create a chart with data annotations. This is a great opportunity to explore the Point Line Series with two Y axes.

On the other hand, data annotations are another fantastic feature of Lightning Chart .NET. With them, we can create a data table right on the chart, giving users the ability to interact with some visual properties of this table. The annotation table can display multiple values and is easily created using C# code, utilizing For loops and other programming tools.

Working with annotations is similar to working with HTML tables. Essentially, you create a parent AnnotationXY object and then add nested AnnotationXY objects as cells. Configuring visual properties like font, color, and borders is much like assigning CSS properties.

If you’ve worked with data annotations in LC JS, this example will feel very familiar. There are plenty of articles that cover point and line series, so I encourage you to check them out as well. This article, however, will focus on setting up data annotations.

As with other .NET articles, I’ve included a brief introduction to WPF. If you’re not familiar with this framework, I recommend reading through that introduction. Also, be sure to review the technical requirements and the explanation for installing the LC .NET framework along with the interactive examples tool.

What is LightningChart’s WPF graph?

LightningChart’s WPF graph, known as LightningChart for WPF, is a powerful data visualization tool designed specifically for Microsoft Windows Presentation Foundation (WPF). WPF charts can easily be integrated into your Microsoft Visual Studio toolbox.

You can add them to your software project using drag-and-drop, XAML, or code-behind. Once added, the WPF graph becomes a key part of the user interface (UI) in your Windows desktop application, making it an invaluable tool for software developers.

What is WPF?

Windows Presentation Foundation (WPF) is a framework designed for creating applications with sophisticated user interfaces. It consists of two main components: Markup, where you define the structure and appearance, and code-behind, where you manage the application’s logic and behavior.

Today we will create tables in WPF using LightningChart .NET charting components.

Markup enables us to build a user interface with a variety of controls, allowing us to manage the displayed results in the application with great precision. This interface development is done using XAML (Extensible Application Markup Language). While it might initially look like an XML template, XAML is specifically designed for building application interfaces rather than just exchanging data between applications.

The interface’s data, graphics, and animations can either be pulled from an external source file or dynamically generated through the code behind.

The creation of some controls can be almost the same as that of HTML tags, in other cases, properties such as style is limited to the declaration of a property within a tag.

The code behind refers to the file containing the executable code responsible for reading, generating, and processing the results the user needs. One of its main purposes is to separate the graphical interface code (like XAML, HTML, CSS, etc.) from the executable code. This separation allows us to divide the work between user interface design and the development of the underlying code, leading to safer, more organized, and faster development.

In the case of WPF (Windows Presentation Foundation), we use the C# programming language. C# is an object/component-oriented language that fits well with this approach. Lightning Chart .NET generates WPF projects with C# code that’s ready for execution. Within this code, you can use LightningChart .NET own tools, which can be easily imported if the LC .NET framework is installed.

For this project, we need to consider the following requirements to compile the project.

1. OS: 32-bit or 64-bit Windows Vista or later, Windows Server 2008 R2 or later.
2. DirectX: 9.0c (Shader model 3 and higher) or 11.0 compatible graphics adapter.
3. Visual Studio: 2010-2019 for development, not required for deployment.
4. Platform .NET Framework: installed version 4.0 or newer.

Now go to the next URL and download LightningChart .NET. You’ll then be redirected to a sign-in form where you’ll have to complete a simple sign-up process to get access to your LightningChart account.

After signing in to your account, you can download the SDK “free trial” version that allows you to use important features for this tables in WPF tutorial. When you download the SDK, you’ll have a .exe file like this:

The installation will be a typical Windows process, so please continue with it until it is finished. After the installation, you will see the following programs:

License Manager

In this application, you will see the purchase options. All the projects that you will create with this trial SDK, will be available for future developments with all features enabled.

LightningChart .NET Interactive Examples

You can see 100+ interactive visualizations for WPF, WinForms, and/or UWP.

The main difference between the LightningChart visualizer and Visual Studio is that we can analyze and experiment with many features within the source code. In the LC visualizer, select the “Annotations table chart” example and run it:

In the top-right zone of the windows, you will see the following options:

The SDK trial allows us to use the WPF framework. After selecting the right framework, we need to specify a folder where to create the tables in WPF chart project:

After creating the project, Visual Studio will open and be ready for execution.

The main XAML code will be wrapped inside MainWindow.xaml.cs and contains the code of the sphere GUI controls.

Inside the code, we will check two methods for creating the properties needed to draw the tables in WPF correctly. The interactive example is built with various user controls to manipulate and change the visual properties of the chart. These controls are not required to generate this graph, so we will focus on the code responsible for generating the object.

This method will be responsible for configuring our chart, adding the axes, groups, colors, etc. We will create our chart:

The BeginUpdate function will allow us to stop drawing the chart, which will allow us to set up the properties that we want to customize. Now we will assign a title to our tables in WPF chart:

The DataCursor property (true), displays a small data table with the values ​​at the point where the cursor is pointing.

If the value is false, this data table won’t be displayed. If we want, we can display a legend box in our chart. If the value is false, the box will be hidden.

To access the X-axis, we just need to select index zero from the XAxes list. Since we are only using a chart with a single X axis, it will be assigned by default to index zero:

The range will be from 0 to 100:

The scroll mode offers us 5 behavior options for scrolling the X-axis

• None: The X-axis is not automatically scrolled.
• Scrolling: The X-axis will be scrolled when the scroll position approaches the end of the graph.
• Stepping: Steps the view with Step when the scroll position reaches the end of the graph.
• Sweeping: Previous traces will be left in the background and new traces will be swept over.
• Triggering: The X-axis minimum and maximum are set by the detected level trigging position.

We can clear the X or Y axis using the function Clear. This is very helpful when we need to update the axes ranges or visual properties. The colors were specified at the beginning of the code.

We can have more than one axis. In this case, we are creating another Y axis, that will be displayed at the right side of the chart. This axis will indicate the Humidity percentage.

The setup of this second axis is the same as the previous one. The horizontal grid lines are drawn on the vertical positions of division ticks. Major grid for major division ticks, minor grid for minor division ticks. Use MajorGrid and MinorGrid properties to edit the appearance.

YAxisAutoPlacement = LeftThenRight. Axes are distributed to the left and right sides of the graph, every other axis to the opposite side, starting from the left side.

We will create 5 series

The city names and city colors will be stored in arrays objects, because these will be mapped in a loop:

A point line series is basically a representation of each data point in the cartesian plane. These points will be located with their X and Y values, in relation to the X and Y axes. These points can be joined by lines, in this way, we obtain as a result, a line with peaks:

The data should be formatted as an array, this array will be created with the methods CreateRandomTemperatureData and CreateRandomHumidityData.

The main difference between the first- and second-point line series, is that we are using the Y temperature axis for the temperature series and Y humidity for the humidity series.

For this example, we are using a simple loop to create random data points. As you can see, the data points only need the X and Y values. These points must be contained within the range of each axis.

This is the method to create the tables in WPF. It will create and display the annotation table over the chart:

The parameters are the cityNames, cityColors, width, and height.

With these parameters, we will specify the size of the table, the number and color of rows. To create the resizing border, we need to allow the interaction with the user, allow resize function and other visual properties:

SizeScreenCoords will help us to set the default size of the table. ResizedByUser will update the size of the table according to the user:

All these properties will be stored in the AnnotationXY object. This object will contain the border, header, rows, and columns. The headers are cells, and we just need to add them in the order that we need to:

All the properties are very similar to CSS properties, so I think is not too necessary to explain all of them. The CreateCell function will add more properties to the cell. The color of the cells will be taken from the axis.

To create the rows, we need to create more cells using a loop:

We specified the value two and we will have two columns by city:

The table will need an object with the two values for each column. In this case, we will use tuples. The tuple helps to have a data structure that consists in multiple parts by “row”:

The method UpdateTableData will help us to add each value to the AnnotationXY object. In this way, you can implement a way to create a tuple with updated values.

The method will format the values, giving a color related to the temperature. The way to locate the corresponding cell, is basically counting the number of cells and adding the city row.

Once we have finished configuring our chart, we close the EndUpdate() update process, and add the chart object to our XAML grid so that it is displayed.

Annotations might seem a bit confusing at first, especially with all the code needed to configure their visual properties. But here’s the good news: LightningChart .NET allows you to customize these annotations in a way that’s quite similar to styling with CSS classes.

When working with tables in WPF, you’ll find that there’s a wide range of properties available. You can explore these in the official LC .NET documentation or by diving into the classes, enumerators, and interfaces provided by the library.

One thing that might trip you up is how tables are created—but don’t worry, it’s easier than it looks! Think of an annotation as a box or cell, kind of like a “DIV” in CSS and HTML. Inside this cell, you can add the text and information you need.

To create tables in WPF, you simply need to make a set of cells, all neatly arranged within a frame that keeps your content organized. Once your table is set up, you just assign values to it using the text property. You can customize it with fill colors, borders, text, font type, font size, and more.

The resize and table update functions work like general functions that you can apply to any .NET project. So, if you’re looking to implement annotations or tables in WPF for your projects, this exercise will give you the tools you need to focus on the data source.

Even when it comes to creating line series, you can take this code and use it in other projects. The logic remains the same; only the data range, colors, and labels would change.

I hope this exercise has been helpful for your upcoming projects. Take care!