Change Scatter Chart Size and shape dynamically – LightningChart JS

How do we change scatter chart size and shape dynamically while adding data to series

const pointz = chart.addPointSeries({ pointShape: PointShape.Circle })
    .setName('Kuopio')
    .setPointFillStyle(fillStyles[0])
    .setPointSize(pointSize)
    .setMaxPointCount(10000);

I know that we can change color dynamically by

const fillStyle = new IndividualPointFill({ color: ColorHSV(0) })

Is there any way to change size dynamically like elipse series ?

Answer

Lightning Chart JS v2.0.0 or greater

Point size and rotation can be set individually for each point. To enable support for individual size or rotation call series.setIndividualPointSizeEnabled(true) and/or series.setIndividualPointRotationEnabled(true)

const series = chart.addPointSeries({ pointShape: PointShape.Triangle })
    .setIndividualPointSizeEnabled(true)

When the individual point size is enabled, the point size can be set by providing a value to a size field for each point.

series.add([
    { x: 0, y: 0, size: 1 },
    { x: 1, y: 0, size: 5 },
    { x: 2, y: 0, size: 10 },
    { x: 3, y: 0, size: 15 },
    { x: 4, y: 0, size: 20 },
    { x: 5, y: 0, size: 25 },
])

Rotation works in a similar way, the point rotation can be set by providing a value to a rotation field for each point. The rotation is defined in radians.

const series = chart.addPointSeries({ pointShape: PointShape.Triangle })
    .setIndividualPointSizeEnabled(true)

series.add([
    { x: 0, y: 3, rotation: 0 },
    { x: 1, y: 3, rotation: Math.PI / 4 },
    { x: 2, y: 3, rotation: Math.PI / 2 },
    { x: 3, y: 3, rotation: Math.PI },
    { x: 4, y: 3, rotation: Math.PI * 3/2 },
    { x: 5, y: 3, rotation: Math.PI * 2 },
])

Individual point size and rotation can be also used at the same time.

const series = chart.addPointSeries({ pointShape: PointShape.Triangle })
    .setIndividualPointSizeEnabled(true)
    .setIndividualPointRotationEnabled(true)

series4.add([
    { x: 0, y: 3, size: 1, rotation: 0 },
    { x: 1, y: 3, size: 5, rotation: Math.PI / 4 },
    { x: 2, y: 3, size: 10, rotation: Math.PI / 2 },
    { x: 3, y: 3, size: 15, rotation: Math.PI },
    { x: 4, y: 3, size: 20, rotation: Math.PI * 3/2 },
    { x: 5, y: 3, size: 25, rotation: Math.PI * 2 },
])

Point shape can’t yet be changed individually.

---

Lightning Chart JS v1.x:

LightningChart JS currently doesn’t support changing the point shape or size individually. This is a feature that we would like to develop but haven’t yet decided on when or if it will be done.

As a workaround you could use multiple point series for different shapes. So you could have one series for each point shape (square, triangle, circle) and then add the points to the different series based on the factors you want to use to determine the shape. I know that this isn’t an optimal solution but it’s the only solution that I can think of right now.