JavaScript Spline Line Chart - Editor

This example shows how to draw and style spline-series.

First create the series using chart method.

// Add a spline series using default X and Y axes.
const splineSeries = chart.addSplineSeries()

Option 1: Styling using a style object.

The first option for styling of series is to create a new object that contains the necessary information about visual settings. In the case of line-series, the object must be type of SolidLine to be visible.

// Create a new instance of visible solid line-style.
const strokeStyle = new SolidLine()
    // Set desired fill style of the stroke.
    .setFillStyle(
        // SolidLine can have only SolidFill fill-style.
        new SolidFill().setColor(ColorRGBA(96, 204, 232)),
    )
    // Set thickness of the stroke.
    .setThickness(5.0)

// Apply styling settings to the series.
splineSeries.setStrokeStyle(strokeStyle)

Option 2: Styling using a mutator function.

Usually, it can be even more easy to simply modify the existing Style of a component, rather than constructing a new one. This is done using so-called mutator-functions. Here's an example:

// Modify the previous Stroke style of a SplineSeries, by overriding its previous thickness.
splineSeries.setStrokeStyle((strokeStyle) => strokeStyle.setThickness(1.0))

Our coding practices include fluent, self-returning API, which allows us to easily call multiple setters in one statement.

splineSeries
    .setStrokeStyle(strokeStyle)
    // 'transparentFill' is a static constant
    // that needs to be imported from the library in order to be used.
    // It is used to draw things with transparent fill that aren't disposable
    // - like the points of a PointLineSeries.
    .setPointFillStyle(transparentFill)