@finchart

Appearance

Documentation / @finchart/react / ChartData

Function: ChartData() ​

ChartData<T>(__namedParameters): Element

Defined in: react/src/components/chart-data.tsx:35

Gives the series inside it different data.

<ChartContainer data> is the default for the whole chart. Drawing BTC and ETH together needs somewhere for the second series' data to go — since the registration owns its data, the core can already do this, and this component opens the same path in the declarative lane.

tsx
<ChartContainer deps={deps} data={btc}>
  <ChartCandles />              // the container's data
  <ChartData value={eth}>
    <ChartLine style={{ line: { color: "#888" } }} />  // this data
  </ChartData>
</ChartContainer>

When only one series differs, <ChartLine data={eth} /> is shorter. Reach for this component when several need to see the same thing — a set of indicators running over one source, say.

Doesn't re-fit. Same rule as declarative data everywhere — mounting ETH later shouldn't jump the window that was showing BTC to their union.

Type Parameters ​

T ​

T extends BaseDataPoint

Parameters ​

__namedParameters ​

ChartDataProps<T>

Returns ​

Element