Skip to main content
Version: 6.1.2

Pictures

A common need in different Polar Chart based visualizations is to show custom pictures positioned on axis coordinates.

This can be done using a specifically configured Scatter chart](/6.1.2/features/polar/scatter). There are two different approaches clearly separated in this documentation.

Icons as Point shape​

PolarPointSeries supports point shape as a Icon object. This results in the Icon image source being used like a mask texture. The colors of the picture are overridden by whatever is the active fill style of the series.

This can be convenient as you can use one picture and programmatically color it with various colors, or use advanced coloring approaches like dynamic coloring.

Icon scatter chart Icon scatter chart

const image = new Image()
image.crossOrigin = ''
image.src = 'image.png'
const iconSeries = chart
    .addPointSeries()
    .setPointShape(chart.engine.addCustomIcon(image))
    .setEffect(false)
    // Point alignment can be used to offset the images relative to their size. For example, position image by its bottom.
    .setPointAlignment({ x: 0, y: -1.1 })
    // When using Icons, point size is interpreted as multiplier of source image size.
    .setPointSize(0.8)
    .setData([{ amplitude: 0.5, angle: 45 }])

For more documentation, please refer to documentation of Scatter chart](/6.1.2/features/polar/scatter).

Image Fill​

PolarPointSeries supports point fill style as a ImageFill. This results in points rendered as the supplied image source.

Image fill scatter chart Image fill scatter chart

const image = new Image()
image.crossOrigin = ''
image.src = 'lightningchart.png'
const eventSeries = chart
    .addPointSeries()
    .setPointFillStyle(new ImageFill({ source: image }))
    // Point alignment can be used to offset the images relative to their size. For example, position image by its bottom.
    .setPointAlignment({ x: 0, y: -1.1 })
    // When using ImageFill, point size is interpreted as multiplier of source image size.
    .setPointSize(0.8)
    .setData([{ amplitude: 0.5, angle: 45 }])

To clarify, this approach can be used to display a massive amount of custom pictures, by simply adding more samples to the series.

For more documentation, please refer to documentation of Scatter chart](/6.1.2/features/polar/scatter).