Change Scatter Chart Size and shape dynamically - LightningChart JS

Question

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 ?

Snekw · Accepted Answer · 2020-10-12T06:05:23.593

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.

Hi , please check my question with edited image , This feature is very helpful , all other charting libaries provide this , please add this feature in future release , my kind request .. thank you. — Gracie williams, Jun 08 '20 at 12:21
I do want to add this feature but right now I can't promise anything. — Snekw, Jun 09 '20 at 08:01

Change Scatter Chart Size and shape dynamically - LightningChart JS

1 Answers1