@finterm/react

Drop-in React components and Custom Elements for embedding the free Finterm chart and spreadsheet widgets.

• WebGL chart — 600+ crypto pairs and US equities, live data, four themes.
• Live spreadsheet — =PRICE(), =STOCK(), =BLACKSCHOLES() formulas that pull live data.
• No API key, no signup. The widgets run on Finterm's edge-cached infrastructure; your bundle is ~2 KB.

Install

npm install @finterm/react

React

import { FintermChart, FintermSheet } from '@finterm/react';

export default function Page() {
  return (
    <>
      <FintermChart
        symbol="BTCUSDT"
        provider="binance"
        timeframe="1h"
        theme="night"
        height={500}
      />

      <FintermSheet
        theme="night"
        height={500}
        content={'A1,B1\n=PRICE("BTCUSDT"),'}
      />
    </>
  );
}

Custom Elements (Vue, Svelte, Solid, plain HTML)

<script type="module">
  import '@finterm/react/elements';
</script>

<finterm-chart symbol="AAPL" provider="yahoo" timeframe="1d" theme="night" height="500"></finterm-chart>
<finterm-sheet theme="night" height="500"></finterm-sheet>

Props

<FintermChart> / <finterm-chart>

| prop / attr | values | default | | ------------- | ------------------------------------------------- | ---------------- | | symbol | Any Binance crypto pair or US equity ticker | BTCUSDT | | provider | binance | yahoo | binance | | timeframe | 1m | 5m | 15m | 1h | 4h | 1d | 1h | | theme | sand | night | ledger | high-contrast | high-contrast | | controls | true shows toolbar, false hides it | true | | height | number (px) or CSS string | 500 | | width | number (px) or CSS string | 100% |

<FintermSheet> / <finterm-sheet>

| prop / attr | values | default | | ------------- | ------------------------------------------------- | ---------------- | | content | CSV string to pre-fill (formulas supported) | empty | | theme | sand | night | ledger | high-contrast | high-contrast | | height | number (px) or CSS string | 500 | | width | number (px) or CSS string | 100% |

Self-hosting

Pass chartsOrigin / sheetsOrigin to point at your own Finterm deployment instead of the public one.

<FintermChart symbol="BTCUSDT" chartsOrigin="https://charts.example.com" />

License

MIT