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)