Welcome to this article about 3D trading charts for options traders. This topic will be divided into two parts and develop two different 3D trading charts in each article. In this first part, we will work with two 3D line series charts, and even though both examples are very similar, in the second chart we will use an important LightningChart JS tool.

In both charts, we will use the annotations that help us regenerate the lines based on “Call” and “Put” values. The first chart will serve as an introduction to the 3D chart, and in the second we will add the LC JS additional DataGrid component. DataGrid will help us show the dataset of each category by double-clicking on one of them.

For the implementation of the DataGrid component, we will have to use HTML containers, since the traditional LC JS dashboard does not apply to 3D charts. The code of both charts is designed to be functional if we have a data source in JSON format, and its values are consistent with the X, Y, and Z axes.

In the context of financial markets, it is normal to find several financial products with variable values. When we need to buy or sell any of these products at a strike price (fixed or predetermined price), a contract is established. This contract helps the trader to take action before the expiration date of the contract. This contract is known as an option.

These options also help us protect shares in our portfolio against price drops, as well as generate income on them. The value of contracts is established based on the probability of an event occurring.

For example, if a stock increases in price, the value of the contract will also increase. If a contract exceeds the intrinsic value before expiration, it may have a higher value, for example, a 6-month contract will be more valuable than a 1-month contract. This value is known as the time value.

In this article we will work with two options: Put and Call. Put options are contracts that give us the right (not the obligation) to sell shares of the underlying asset at a certain price within a set time.

Typically, purchases of this type of contract are made when a fall in the strike price is predicted. When we purchase financial contracts (the opposite action to put options), these contracts can be called Call options.

Financial technology (Fintech) aims to optimize and automate financial processes and studies with the use of new technologies. Financial technology can range from the use of software to study financial datasets, using web and mobile applications for banking transactions and investments, to the development and use of cryptocurrencies.

Each of the mentioned examples can have its development branches, such as, for example, the implementation of cybersecurity for digital banking transactions, the use of open banking platforms for connecting applications with external providers, and of course, the use of Blockchain for the purchase and sale of stock contracts. With this brief introduction, I think it is easier to interpret what a Fintech chart could be.

What are 3D Fintech charts?

Fintech charts are usually used within a dashboard, which helps monitor and analyze financial data, transactions, and indicators. These charts are fed by information provided by a process of a Fintech platform/application that promotes interactivity with the users, helping them understand and analyze the data provided

A 2D chart is equivalent to a plane with length and width, or X-Y axes (as in the case of line charts), and allows us to interpret intensity, volume, or variations based on lines, bars, or sections. In the case of a 3D chart, we have a third dimension (depth), which gives a more complex sensation of immersion when rendering an object from several focal points.

Having a third dimension allows the creation of new objects or shapes for a better interpretation of the volume of a dataset (for example, a 3D bubble chart or a 3D surface chart). 3D charts are not too common because the complexity of development and implementation is much greater. Usually, it is necessary to use external software for developing 3D charts.

LightningChart JS Trader is a high-performance fintech-oriented library that leverages proprietary LightningChart technology. The LC JS Trader charts have all the rendering power of LightningChart, allowing billions of data points to be displayed on charts, and are more than 1.5 million times faster in real-time streaming use cases than the average chart control.

LC JS Trader features advanced technical chart types including candlestick charts, bar charts, line charts, mountain price charts, Kagi, Renko, Point and Figure, and Heikin-Ashi. LightningChart JS Trader also allows us to have a detailed visualization of our data in a tabular format thanks to the additional component DataGrid, that we will use in the development of the second chart.

This article will guide the creation of a 3D line series chart and a 3D point line series chart for options trading.

Both of the charts we will create are very similar therefore, the code explanation will apply to both examples. In the Point Line Chart with DataGrid section, I will only explain the code blocks added to the line chart. You can download both example project files and experiment with them, so I recommend that you go through this template setup.

1. Download the template provided to follow the tutorial.

2. After downloading the template, you’ll see a file tree like this:

3. Open a new terminal and run the npm install command. It is important to keep the configuration in the tsconfig.json file. This configuration will help you to import JSON files as data objects.

The series of JSON files contains the datasets for our charts. If you open one of these files, you’ll see the following values:

• Sym – The ticker symbol, e.g. AAPL, TSLA, SPY.
• OperationType – Call or Put trade.
• Date – Option creation date.
• Strike – The strike price
• Stock Price – current price that a share of stock is trading for on the market

This dataset is a sample of 60k+ option trades recorded from 13/11/2017 to 09/08/2019. The original dataset was filtered to use only 5 traded companies: Apple, Microsoft, Nvidia, Oracle, and Tesla. You can find this dataset in Kaggle. This would be everything for our initial setup. Let’s code.

Today the most recent versions are LightningChart JS 5.2.0 and XYData 1.4.0. I recommend that you review the most recent versions and update them. This is because some LightningChart JS tools do not exist in previous versions.

In the project’s package.json file you can find the LightningChart JS dependencies:

1. Importing libraries

We will start by importing the necessary libraries to create our chart.

2. Add license key (free)

Once the libraries are installed, we will import them into our chart.ts file. Note you will need to request a LightningChart JS Trader trial license, which is free. We would then add it to a variable that will be used for creating the chart object.

The chart3D class will help us to create and visualize data in a 3-dimensional scene, with a camera and light source(s). The camera can be moved around with the user interactions (mouse & touch). It is always oriented to face the center of the scene. The light source is always located at the location of the Camera and directed toward the center of the Axes.

Chart Properties

– Theme: defines the look and feel of your JavaScript stacked bar chart. Note that you must specify the color theme of the chart components beforehand.

– setBoundingBox: Sets the dimensions of the Scene’s bounding box. This bounding box serves as a visual reference, ensuring all data in the chart is depicted within its boundaries. The axes of the 3D chart are always positioned along the sides of the bounding box.

Axes Properties & Behavior

We can configure the behavior and visual properties of each axis. getDefaultAxis(X,Y,Z) will help us to access those axes of the selected chart object. In this case, we will set the default title for each axis:

The TickStrategy defines the positioning and formatting logic of Axis ticks as well as the style of created ticks. We can assign the Numeric, Time, DateTime, or empty strategies. In this case, the Z axis will work as a camera, so it doesn’t need a strategy.

The X-axis will use the DateTime strategy because we will use the Date value from the datasets. All data sets start in November 2017 and end in August 2019, so I specified the start and end intervals two months apart:

The following array will determine the number of series and their data sets.

The formatSeries() method will map all datasets and series at the beginning of the application and when we choose between operation types (Call-Put). The title of the chart will be updated with the operation type argument. “Call” is specified as the default value:

If we click on “put” option, the format series will be executed with this operation type and vice versa.

The resultMap variable will contain series data, if this is not null, all series will be removed (because a previous process created all of them and they can be duplicated).

We will use the seriesConf array to create the line series, using the name value for the series name, and the JSON data set for series data.

The following code block will map and add data points to the series. First, we will map all series from the resultMap variable. Each series will be added to the legend box. This legend box will help us to hide or show the series we choose in the chart:

Now, we need to filter the data set with the optionType (sent argument: “Put” – “Call”).

Now we can create the data point with the values of “Put” or “Call” contracts:

• The “add” function will create the data point in the current series.
• The “series” counter works as an index of the series in the process.

Depending on the value of the Z axis (0 to 4), the line series will be positioned one after another. Now, we need to give format to our date values using the getTime function:

Annotation controls will allow options traders to switch between trading methods Call and Put. The annotations are HTML elements that will help us with additional features for our chart. We need to create HTML components.

The annotationMenu will be an HTML div that will contain the HTML buttons. We can specify some CSS properties to the new HTML component using the style interface.

We will also need buttons and, as you can see, there is an array with two objects. We will create a span component for each of them, and this span will work as a button.

onClick() event

We can access the onClick event. This event will trigger the formatSeries() method by sending the operation type taken from the label property.

This chart will use the point line series. The difference between Line Series and Point Line Series is how the manipulation of the data points occurs. We can specify properties for each data point or all of them in the same series.

For instance, we can add custom colors, shapes, conditions, etc. To use Point Line Series, we need to replace addLineSeries with addPointLineSeries.

As you can see, I specified the size of all points. The shape can be a sphere or a square. The fillStyle will change the color of the points. We can also define one single color or gradients.

For 3D charts, we need to work with HTML containers. We need to have access to the main LC HTML component (‘chart’). Now we need to create two DIV components, containerChart1 will display the line chart and containerChart2 will display the data grid.

These containers will be appended to the main container. ContainerChart1 will be assigned to the chart3D object and ContainerChart2 to the DataGrid object:

As you may recall, we filtered the dataset with the optionType value (“Call” or “Put”). These parameters are sent from the annotation controls (“Call” is the default value).

We need to create a “data row” for the data grid. A Line Series needs a data point object with X, Y, and Z values. In the case of a data row, we need an array with column values separated by commas.

The number and names of columns will be specified in the initialization of the dataGridContent object. We can add mouse events to the series, in this case, we will display the DataGrid content when double-clicking on a series:

The title of the data grid will be updated with the current optionType and series name. The DataGrid content will be set with the previous array we pushed. To run the project, open a new terminal and execute the NPM START command to open the project in your local host.

Thanks for getting here, we were able to create two 3D line charts! I tried to create two projects that can serve as a basis for implementing your charts. I added elements such as the DataGrid component, data point customization, annotations, and mouse events to these chart examples.

In the official LightningChart documentation, you can find all the available events. For example, execute actions by moving the mouse over a specific area, or by releasing a draggable element.

On the other hand, the support of HTML components on the charts adds another level of interactivity for the user, allowing them to modify chart properties with a simple click. Advanced knowledge of CSS will help display more impressive controls.

The DataGrid component can be seen as a simple data table, but its easy implementation and integration with other charts make it a useful tool.

You only need to create the DataGrid elements and assign a data array to them. Regarding the datasets, I only had to extract the columns I needed and convert them to a JSON. If you have an API that can extract data from a database, you can generate these JSON files dynamically with your data.

In the second part of Fintech 3D charts, we will create a 3D bubble chart and a 3D surface chart.