Skip to main content
Version: 8.3.0

Polar Chart

PolarChart is a collection of polar series, axes and other chart components. It can be used to create an incredible number of different data visualization elements in the context of visualizing radial data (data measured at different angles considering a central view point).

// Creation of PolarChart
const lc = lightningChart()
const chart = lc.Polar()

Polar chartPolar chart

Polar radial direction​

By default, Polar chart begins with angle 0 being on right, and incrementing angle in counter-clockwise direction. The direction of angle direction can be changed with PolarAxisRadial.setClockwise method:

chart.getRadialAxis().setClockwise(true)

Polar radial subdivisions​

// Show 6 radial ticks
chart.getRadialAxis().setDivision(6)

Polar North angle​

By default, Polar chart begins with angle 0 being on right. This can be changed with PolarAxisRadial.setNorth method:

// Use angle of 0 degrees as "North" (up).
chart.getRadialAxis().setNorth(0)

Chart title​

chart
    .setTitle('Voltage')
    .setTitleFont(font => font.setSize(10).setFamily('Segoe UI'))
    .setTitleFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))

For more details about style API, please see Styles, colors and fonts.

Background style​

PolarChart has 3 different levels of backgrounds:

  • Series background (area enclosed by axes)
  • Chart background (entire chart area)
  • Engine background (additional background shared by entire engine)
    • Understanding difference between chart/engine background is mainly useful if you are using the legacy Dashboard feature - in this case, engine background is shared across the whole dashboard.
chart
    .setBackgroundFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
    .setSeriesBackgroundFillStyle(new SolidFill({ color: ColorRGBA(0, 255, 0) }))
    .setSeriesBackgroundStrokeStyle(new SolidLine({ thickness: 1, fillStyle: new SolidFill({ color: ColorRGBA(0, 0, 255) }) }))
chart.engine.setBackgroundFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 255) }))

For more details about style API, please see Styles, colors and fonts.

Space around chart​

chart.setPadding({ left: 10, right: 10, top: 10, bottom: 10 })

Disable animations​

const chart = lc.ChartXY({ animationsEnabled: false })

Coordinate translations​

LightningChartJS has a number of different coordinate systems that are not natively present on a web page - most importantly, the charts Axes.

In many data visualization use cases it is critical to add annotations or markers at specific coordinates along the Axes and data series. Because of this, the ability to translate between coordinates on the web page and the axes is critical.

In this context, "client" refers to the Web API Client coordinate system.

Translating client coordinate to Axis​

chart.seriesBackground.addEventListener('click', event => {
    const locationAxis = chart.translateCoordinate(event, chart.coordsAxis)
    // -> { angle: number, amplitude: number }
})

Translating Axis coordinate to client​

const locationAxis = { angle: 45, amplitude: 15 }
const locationClient = chart.translateCoordinate(locationAxis, chart.coordsClient)

Relative coordinate system​

Apart from the widely used "axis" and "client" coordinate system, there is another, the "relative" coordinate system. This is mostly utilized for LightningChart UI components that are positioned as pixel locations relative to the chart (e.g. 10 pixels from left edge etc.).

// Example, translate axis to relative coordinate
const locationAxis = { angle: 45, amplitude: 15 }
const locationRelative = chart.translateCoordinate(locationAxis, chart.coordsRelative)

Cursors​

Please see common Cursors section.

Axis​

Polar chart has always two axes, Amplitude axis, and Radial axis. For the most part, they are used exactly like any other chart types axis (see common Axis section).

Only differences to mention are with the Radial axis, specifically how ticks are formatted and styled:

// Radial axis does not have `setTickStrategy` method contrary to other axes. Instead, it has `setTickFormattingFunction` and `setTickStyle` methods:
polar
    .getRadialAxis()
    .setTickFormattingFunction((value) =>
        // NOTE: value is radians
        ((value * 180) / Math.PI).toFixed(0),
    )
    .setTickStyle((ticks) => ticks.setLabelFont((font) => font.setWeight('bold')))

For more details about style API, please see Styles, colors and fonts.

Legend​

Please see common Legend section.

Positioning charts​

Please see common Positioning charts section.

Color themes​

Please see common Color themes section.