Skip to main content
Version: 5.2.1

Line

Polar line chartPolar line chart

// Creation of a polar line series
const lineSeries = chart.addLineSeries()

Adding data​

lineSeries.setData([
    { angle: 0, amplitude: 50 },
    { angle: 45, amplitude: 60 },
    { angle: 90, amplitude: 35 },
    // ...
])

Changing stroke color​

const fillRed = new SolidFill({ color: ColorRGBA(255, 0, 0, 255) })
lineSeries.setStrokeStyle((stroke) => stroke.setFillStyle(fillRed))

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

Changing stroke thickness​

lineSeries.setStrokeStyle((stroke) => stroke.setThickness(1))

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

Dashed line series​

lineSeries.setStrokeStyle((stroke) => new DashedLine({
    fillStyle: stroke.getFillStyle(),
    thickness: stroke.getThickness(),
    pattern: StipplePatterns.Dashed,
}))

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

Auto connect ends​

To close loop between first and last data point, use setConnectDataAutomaticallyEnabled method:

lineSeries.setConnectDataAutomaticallyEnabled(true)

User interactions​

Custom user interactions can be implemented using the Events API:

lineSeries.onSeriesBackgroundMouseClick((_, event) => {
    console.log('user clicked series', event)
})

To find nearest data point to user interaction, use "solve nearest" functionality (see below).

Solve nearest from location​

// Example 1, when user clicks on chart, log closest data point to console
chart.onSeriesBackgroundMouseClick((_, event) => {
    const nearest = lineSeries.solveNearestFromScreen(event)
    console.log(nearest?.location)
})
// Example 2, solve nearest data point from an axis coordinate
const locationAxis = { angle: 45, amplitude: 10 }
const locationClient = chart.translateCoordinate(locationAxis, chart.coordsClient)
const nearest = chart.solveNearest(locationClient)
console.log(nearest?.location)