@finchart

Appearance

Documentation / @finchart/react / ChartLine

Function: ChartLine() ​

ChartLine<TSource, TPoint>(props): Element

Defined in: react/src/components/chart-line.tsx:107

Connects points with a line. No need to build a series object yourself.

tsx
// sma20: (source: DataView<OHLC>) => LineDataPoint[] — a derivation is just a function (see README)
<ChartLine style={{ line: { color: "#f59e0b" } }} derive={sma20} deriveKey={[20]} />

Color is an argument. Keep the theme (the default color for every line) in a CSS variable, but give something that varies per series — "this indicator is orange" — here instead: there's no element on the canvas, so CSS has no way to pick out a single series. The shape is the imperative lane's — style here is what lineSeries(style) takes.

A new series object gets built every render, but the derivation cache survives it → see <ChartSeries>.

Type Parameters ​

TSource ​

TSource extends BaseDataPoint

TPoint ​

TPoint extends BaseDataPoint = TSource

Parameters ​

props ​

ChartLineProps<TSource, TPoint>

Returns ​

Element