Frameworks

React

Declare charts, financial series, and general panes as React components.

Install

npm install @aeristerminal/aeris-charts react

Import the adapter from @aeristerminal/aeris-charts/react. Apps that never import it never load React.

Usage

Dashboard.tsx

import { AerisChart, FinancialSeries, GeneralPane } from "@aeristerminal/aeris-charts/react";
import "@aeristerminal/aeris-charts/design.css";

const axes = [
  { id: "month", dimension: "x", scale: "band" },
  { id: "revenue", dimension: "y", scale: "linear" },
] as const;

export function Dashboard({ candles, revenue }) {
  return (
    <AerisChart options={{ autoSize: true }} style={{ width: "100%", height: 560 }}>
      <FinancialSeries kind="candlestick" data={candles} />
      <GeneralPane
        options={{ horizontal_domain: { type: "category", scale: "band" } }}
        axes={axes}
        series={[{
          key: "revenue",
          kind: "column",
          options: { x_axis_id: "month", y_axis_id: "revenue", title: "Revenue" },
          data: revenue,
        }]}
      />
    </AerisChart>
  );
}

Reaching the chart API

Everything the components do not cover is one step away. Use onChartReady or onSeriesReady, or call useAerisChart() from a component inside AerisChart.

Indicators in React

import { useEffect } from "react";
import { AerisChart, FinancialSeries, useAerisChart } from "@aeristerminal/aeris-charts/react";

function Crosshair() {
  const chart = useAerisChart();
  useEffect(() => {
    const onMove = (params) => console.log(params.time);
    chart.subscribe_crosshair_move(onMove);
    return () => chart.unsubscribe_crosshair_move(onMove);
  }, [chart]);
  return null;
}

export function PriceChart({ bars }) {
  return (
    <AerisChart options={{ autoSize: true }} style={{ height: 480 }}>
      <FinancialSeries kind="candlestick" data={bars} onSeriesReady={(series) => {}} />
      <Crosshair />
    </AerisChart>
  );
}

Components

React adapter exports
Export	Props
`AerisChart`	options, className, style, children, onChartReady(chart)
`useAerisChart()`	Returns the chart. Must be used inside AerisChart.
`FinancialSeries`	kind (any financial kind except custom), data, options, onSeriesReady(series)
`GeneralPane`	options, useInitialPane, axes, series, references, children, onPaneReady, onSeriesReady(key, series), onReferenceReady, onValidationError
`GeneralAxis`	An axis declared as a child of GeneralPane.
`GeneralSeries`	A series declared as a child of GeneralPane.
`MappedGeneralSeries`	A general series that maps your own row type to engine rows.
`GeneralReference`	A reference line or band.
`GeneralDataLabels`	seriesKey, visible
`GeneralLegend`	options
`GeneralTooltip`	options
`GeneralBrushControls`	options, range, defaultRange, onChange. Controlled or uncontrolled.

Lifecycle and SSR

The chart is created once per mount. Prop changes reconcile data and options onto the same engine handles instead of rebuilding the chart.
Unmount calls chart.remove().
The module is safe to import during server rendering. In Next.js, render AerisChart from a client component; it does no DOM work until it mounts.