lightningchart

Cannot set the alpha value of individual data point in point series of Lightning Chart JS


I'm using Lightning Chart JS to plot a point series of data points, each with a unique 'quality' attribute that should dictate the alpha (opacity) of that point on the chart. Despite setting the alpha value based on this attribute, all points render with full opacity. Below is the code snippet for setting up the points.

const pointSeries = chart
    .addPointSeries({ pointShape: PointShape.Circle })
    .setPointSize(10);

// Data structure example: [{ x: 1, y: 2, quality: 0.5 }, ...]

const mappedData = data.value.map((point) => {
  const alpha = Math.round(point.quality * 255); // Convert quality to alpha (quality is between 0-1)
  const fillStyle = new IndividualPointFill({
    color: ColorRGBA(0, 255, 0, alpha), //every point has different alpha value
  });
  return { x: point.x, y: point.y, fillStyle };
});

// Add points to the series
pointSeries.add(mappedData);

Solution

  • const pointSeries = chart
        .addPointSeries({ pointShape: PointShape.Circle })
        .setPointSize(10)
        .setPointFillStyle(new IndividualPointFill())
    
    // Data structure example: [{ x: 1, y: 2, quality: 0.5 }, ...]
    
    const mappedData = data.value.map((point) => {
      const alpha = Math.round(point.quality * 255); // Convert quality to alpha (quality is between 0-1)
      return { x: point.x, y: point.y, color: ColorRGBA(0, 255, 0, alpha) };
    });
    
    // Add points to the series
    pointSeries.add(mappedData);