Scatter chart + Ellipse chart with LightningChart JS

It's been a long time since my last article here in dev.to but for a good reason! I've been working on a series of WPF articles that I will share with you later.

But today we're charting again with LightningChart JS and this time, we're developing a scientific scatter chart in combination of an ellipse chart:

As odd as it may sound, this is a so-called Confidence ellipse chart and is very much used within scientific applications.

How to read a confidence ellipse chart?
Essentially, you'd read this chart as a simple scatter chart with single variables in both X and Y-axes. But the additional ellipse is the confidence region.

Notice that the variance and correlation coefficients will impact the size and the shape of the ellipse.

So, let's see how to create this Confidence ellipse chart using the LightningChart JS library.

Template setup

1) I recommend you to download the ready-made project template (.ZIP) so you can just run the code and do minor edits, if needed.

2) When you open the project template, e.g. in Visual Studio Code, you'll see the following file tree:

3) Open a new terminal and run the npm install command.

CHART.ts

Inside this file, we will have all the logic needed to create our chart, configure animations, and format the data.

1) First, we declare the lcjs constant to refer to the @arction/lcjs library.

Ps. The LightningChart JS is a GPU-accelerated and WebGL-rendered charting library. Basically, oriented to high-performance computations and applications with lots of ready-made charts for any kind of app purposes. More info in GitHub

2) Extract the required classes from lcjs and xyData

3) Import the demo-data.json file. This JSON contains the arrays that we will need to feed our chart.

const lcjs = require('@arction/lcjs')
import data from './demo-data.json'

// Extract required parts from LightningChartJS.
const { lightningChart, PointShape, ColorCSS, SolidLine, SolidFill, Themes } = lcjs

4) Now we create the chart XY.

To create a 2D chart, we need to use the XY chart. The ChartXY function, will create an instance of a XY chart

const chart = lightningChart()
    .ChartXY({
        theme: Themes.cyberSpace,
    })
    .setTitle('Scatter chart + confidence Ellipse')

• Theme: this property defines the look of the dashboard wich is applied to all the dashboard chart objects.

5) Configuring data points

const pointSeries = chart.addPointSeries({ pointShape: PointShape.Circle }).setPointSize(3).setName('Scatter series')

We can configure the shape, size and names of data points. The settings will be inherited to each data to be rendered in the chart.

PointShape, enum members including:

Circle

Triangle

Square

PointShape, point size in pixels, example:

shape: triangle

size: 10 px

name: scatter series

6) Adding the ellipse to the chart

Method for adding a new PolygonSeries to the chart. This series type visualizes a collection of polygons.

const polygonSeries = chart
  .addPolygonSeries()

7) Fetch data from the JSON file

const { scatterPoints, confidenceEllipsePolygonCoords } = data
// Add data to series.
pointSeries.add(scatterPoints)
polygonSeries
    .add(confidenceEllipsePolygonCoords)
    .setFillStyle(new SolidFill({ color: ColorCSS('gray').setA(30) }))

//sample of the JSON data
{
    "scatterPoints": [
      { "x": -0.5414887121534524, "y": -0.5752231711748559 },
      { "x": -0.146529403522317, "y": -0.5035569766001261 },
      { "x": -0.05660887729715133, "y": -0.3947159955669312 },

///sample of the confidenceEllipsePolygonCoords
"confidenceEllipsePolygonCoords": [
      { "x": 1.608716636804976, "y": 0.3567814973667311 },
      { "x": 1.6135824164772818, "y": 0.36962588144050523 },
      { "x": 1.6182525302433877, "y": 0.3824432068279447 },

8) Configuring the UI properties of the ellipse

const { scatterPoints, confidenceEllipsePolygonCoords } = data
// Add data to series.
pointSeries.add(scatterPoints)
polygonSeries
    .add(confidenceEllipsePolygonCoords)
    .setFillStyle(new SolidFill({ color: ColorCSS('gray').setA(30) }))
    .setStrokeStyle(
        new SolidLine({
            thickness: 1,
            fillStyle: new SolidFill({ color: ColorCSS('white') }),
        }),
    )

FillStyle

Color for the fill of the ellipse and setA for adjusting the transparency of the fill, example:

Color: red

setA: 200

StrokStyle

SolidLine.thickness: Ellipse line thickness.

SolidLine.fillStyle: color of the ellipse line.

Color: red

fillStyle: red

Conclusion

Finally, execute the npm start command to run the chart and open the localhost path to visualize the application on your browser.

As you saw this is not a difficult application and even it has a pretty scientific real-world application, you can still develop and further customize this model and use it within personal or academic projects.

Finally, consider this a quick example of the chart and visit the LightningChart JS documentation to see all the properties you can customize.

See you in the next article!

Written by:
Omar Urbano | Software Engineer & Technical Writer
Send me your questions via LinkedIn