I used Binance to trade some crypto. While they offer a competitive fees and wide range of products, I found understand it P&L a bit difficult. Usually I use TradingView to visualize my positions, therefore I am thinking if it is possible to build an app to show my crypto P&L 🤑 and that begin my journey
I haven't decided everything yet, but I want to use NextJs for building this project. The project scaffoldings is nice and the deployment pipeline is surprising wonderful! For chart library, I want to try the one offered by TradingView - lightweight-chart.
The example of lightweight-chart is not a common React style I learnt. After a bit of studying, we can achieve the same with useRef
import { createChart } from "lightweight-charts";
import { useEffect, useRef } from "react";
const data = [
{ time: "2019-04-11", value: 80.01 },
{ time: "2019-04-12", value: 96.63 },
//... skipped ...
{ time: "2019-04-20", value: 74.43 }
];
const Chart = () => {
const chartRef = useRef(null);
useEffect(() => {
const chart = createChart(chartRef.current, { width: 200, height: 200 });
const lineSeries = chart.addLineSeries();
lineSeries.setData(data);
}, []);
return <div ref={chartRef} />;
};
export default Chart;
My understanding is that:
1) first a div
is created in the React Page, the chartRef
is bind.
2) the useEffect
hook kicks in after the page is loaded
3) the createChart
can render into the div
that was bind
The full example will be liked this:
which is still having one error to resolve:
SyntaxError: Cannot use import statement outside a module
This error basically means that the lightweight-chart
is a frontend library but we are using it in a SSR (server side rendering) context, which is how NextJs work. Fortunately, it is pretty easy to resolve it. You will just need to dynamics import it
const Chart = dynamics(() => import("../components/charts", {
ssr: false
});
Top comments (0)