Scatter chart + Ellipse chart with LightningChart JS
Tags: charting, javascript, tutorial, node
Published: 2023-05-10 08:51:34

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:


![scatter-chart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t84cvtbvun3za85ik8jn.jpg)

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](/wp-content/uploads/templates/Scatter-chart+Ellipse-chart.zip) (.ZIP) so you can just run the code and do minor edits, if needed.<br>

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

![scatter-chart-file-tree](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vhh9483tdmv1j3nsg4ba.png)

3) Open a new terminal and run the `npm install` command.
<br>
## CHART.ts
Inside this file, we will have all the logic needed to create our chart, configure animations, and format the data.

<b>1) First, we declare the `lcjs` constant to refer to the `@arction/lcjs` library. </b><br>

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](https://github.com/Arction)

<b>2) Extract the required classes from lcjs and xyData</b></br>

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

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

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

<b>4) Now we create the chart XY.</b></br>
 
To create a 2D chart, we need to use the XY chart. The ChartXY function, will create an instance of a XY chart

```javascript
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.

<b>5) Configuring data points</b>

```javascript
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.

<dl>
 <dt><b>PointShape</b>, enum members including:</dt>
  <dd>Circle</dd>
  <dd>Triangle</dd>
  <dd>Square</dd><br>

 <dt><b>PointShape</b>, point size in pixels, example:</dt>
  <dd>shape: triangle</dd>
  <dd>size: 10 px</dd>
  <dd>name: scatter series</dd>
</dl>


![scatter-series](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8vxmczf1tsyhdkwq9gof.png)

<b>6) Adding the ellipse to the chart</b></br>

Method for adding a new [PolygonSeries](https://lightningchart.com/lightningchart-js-api-documentation/v4.0.1/classes/ChartXY.html#addPolygonSeries) to the chart. This series type visualizes a collection of polygons.

```javascript
const polygonSeries = chart
  .addPolygonSeries()
```

<b>7) Fetch data from the JSON file</b></br>

```javascript
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 },
```
<b>8) Configuring the UI properties of the ellipse</b></br>

```javascript
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') }),
        }),
    )
```
<dl>
 <dt><b>FillStyle</b></dt>
  <dd>Color for the fill of the ellipse and setA for adjusting the transparency of the fill, example:</dd>
  <dd>Color: red</dd>
  <dd>setA: 200</dd>
</dl>

![fillStyle-properties](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xh5awollilc2f19gg87t.png)

<dl>
 <dt><b>StrokStyle</b></dt>
  <dd>SolidLine.thickness: Ellipse line thickness.</dd>
  <dd>SolidLine.fillStyle: color of the ellipse line.</dd>
  <dd>Color: red</dd>
  <dd>fillStyle: red</dd>
</dl>


![StrokeStyle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p93o49c6fpybmpm3ewym.png)

---

### 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](https://www.linkedin.com/in/omarurbanocuellar/)