ChristTradeDocs

The react hook

This is the recommended way to use the chart in React apps (Next.js, plain react, and other frameworks built on top of React)

Obviously you don't have to use the hook in react apps, but it's recommended.

but why?

If you've ever used react yourself, you'll realize the nightmare of forgetting to ref/memoify something, accidentally causing rerender hell. The hook takes care of all that for you, it's not complex at all... but just makes life easier.

Check out this comparison:

Using the hook

import { useChristTradeChart, SimulatedMarketAdapter } from '@christtrade/depth';
import { useMemo } from 'react'

export default function MyChart() {
    const adapter = useMemo(() => new SimulatedMarketAdapter(), []);
    
    const { chart, element } = useChristTradeChart({
        dataAdapter: adapter,
        symbol: 'DEMO',
        horizon: Date.now(),
        initialLoad: {
            start: Date.now() - 1000 * 60 * 60 * 24,
            end: Date.now(),
        },
    });

    return <div style={{ width: '100%', height: '600px' }}>{element}</div>;
}

Not using the hook

import { ChristTradeChart, ChartLayout, SimulatedMarketAdapter } from '@christtrade/depth';
import { useRef, useMemo, useEffect } from 'react'

export default function MyChart() {
    const chartRef = useRef<ChristTradeChart | null>(null);
    const adapter = useMemo(() => new SimulatedMarketAdapter(), []);
    
    if (!chartRef.current) {
        chartRef.current = new ChristTradeChart({
            dataAdapter: adapter,
            symbol: 'DEMO',
            horizon: Date.now(),
            initialLoad: {
                start: Date.now() - 1000 * 60 * 60 * 24,
                end: Date.now(),
            },
        });
        chartRef.current.load('DEMO');
    }
    
    useEffect(() => () => { chartRef.current?.destroy(); }, []);
    
    return (
        <div style={{ width: '100%', height: '600px' }}>
            <ChartLayout {...chartRef.current.getProps()} />
        </div>
    );
}

It's just nicer for the eyes..

Note

There's one thing the hook won't save you from - the data adapter being recreated on every render, which is why you should memoize it, as in the examples above.

How do I use the hook?

I made it super simple to use, you can get a chart rendering in under 20 lines of code. You should first check out the example above using the hook - where you can see the structure. It just takes some options and returns chart and element.

First we'll take a look at the options it takes.

In the example, it provided dataAdapter, symbol, horizon, and initialLoad - all the parameters that are required for the chart to work.

PropTypeDefaultDescription
dataAdapterrequiredIDataAdapter-The data source that feeds data (like bars, ticks, and metadata) into the chart
symbolrequiredstring-The symbol to display - ex "BTC/USD" or "AAPL" etc
horizonrequiredbigint | number | string-Unix/ISO timestamp - the in-game time, basically. Everything past this point doesn't show up on the chart
initialLoadrequired{ start: bigint | number | string, end: bigint | number | string }-The initial load the chart data engine requests

Note

These are only the required parameters. There are lots of other parameters you can input, which you can read about here. You can also check out how you create a data adapter here

Moving on to what chart and element is - element is super simple, you just place it in a div, and it'll render the chart. You just render it and forget it. chart, however, is a lot more useful - that's the chart api, where you can access methods like use(), serialize(), setSymbol() and many more. You can read the full chart api here

Was this page helpful?