JavaScript Confidence Ellipse Chart

This example shows how a confidence ellipse can be drawn inside a scatter chart with LightningChart JS.

Confidence ellipses are used especially with statistic chart applications. A common usage, for example, is the 95% confidence ellipse, which visualizes the area that contains 95% of samples, which makes it easier for the user to understand which points are outliers.

There are various ways of defining and calculating the shape of different confidence ellipses - traditionally in 2D applications they are rotated ellipses with width and height, however in some cases they might not actually be ellipses geometrically, but more complex shapes.

Different confidence ellipse shapes

LightningChart JS currently does not come with any routine for calculating a confidence ellipse shape. However, just about any kind of confidence ellipse shape can be visualized using PolygonSeries.

PolygonSeries can be used to draw any non-complex polygon shape (polygon that doesn't intersect with itself) inside XY charts. It is configured by supplying a list of {x: number, y: number} coordinates.

// Example, visualization of polygon inside ChartXY.
const polygonSeries = chart.addPolygonSeries()
const polygonFigure = polygonSeries.add([
    { x: 0, y: 0 },
    { x: 5, y: 10 },
    { x: 10, y: 15 },
    { x: 15, y: 5 },
    { x: 10, y: -5 },
    { x: 5, y: -2 },
])