Let's implement TradingView's Advanced Real-Time Chart Widget in NextJS.
- Charting Library files from this site under Technical Analysis Charts section.
-
components
for reusable components -
pages
NextJS pages -
public
public assets. We put the Charting Library files in/public/lib/trading_view
in this folder. The lib folder may begitignored
. Please check and and ask for the access. -
src
for helper functions, core constants, global custom hooks,redux-toolkit
folder and a file for global types. -
styles
for.sass
files.
We start our charting functions from /src/hooks/useTradingView.ts
file. Let's open the file and read through.
The Arguments:
-
widgetOptions
is the setup object. Required. -
depsArr
is the dependency array for theuseEffect
. It'll be an empty array if you don't want to re-initiate the chart on anything. Required. -
applyOverrides
an optional object used for the styling of the main chart background and bars.
First we create a function named chartinit
, which gets an argument which will be the widgetOptions
we took as an argument for this custom hook. In the function we store the widget
constructor in a variable and later we add the variable in the global window
object as tvWidget
. This new object has many methods attached to it. Here's the list of the methods in the interface ChartingLibraryWidgetOptions
. We worked on the onChartReady
and applyOverrides
inside this.
Inside the useEffect
we first made the tvWidget
null so it doesn't keep anything from the past. Then we call out chartInit
function. At last we write our cleaner function.
Finally we return the depsArr
which we got from the argument. It's optional.
Notes ๐
-
The arguments of the custom hooks are in an object.
-
window.tvWidget
is not giving ts error because in the/src/globalTypes.ts
file we addedtvWidget
in the global namespace inwindow
object.
In the Chart Component file, we only have a div
that has a ref
, id
and some styling. We get the id
and ref
from the useChart hook file. The useChart
hook is the place where we customize the chart.
๐ Make sure the file is default exported. Named export will give build error.
From the line 25-40, we mainly have some variables and helper functions. Then we see some objects.
-
applyOverrides
see applyOverrides -
studyOverrides
see studyOverrides -
timeFrames
see timeFrames -
widgetOptions
see widgetOptions -
depsArr
the dependency array on which the the char re-initiates.
Apply overrides to the colors of the main chart background and bars. This doesn't override the colors of the top, bottom or side toolbars. See the applyOverrides
object in useChart hook which is commented there.
This override object is to set in widgetOptions
object for the key studies_overrides
. It overrides the colors of the newly created indicators. Example can be found in the studyOverrides
object in useChart hook which is commented there for the volume
indicator. Others indicators are not properly tested yet.
It's the constructor of the tvWidget
that is needed to inititate the chart. Let's talk about the required
parameters.
Symbol, interval
Symbol is the symbol for the data fetching. Resolution or interval is a time period of one bar.
Container
The container
can either be a reference to an attribute of a DOM element inside which the iframe with the chart will be placed or the HTMLElement
itself. It can be useRef
or document.getElementById('id')
or just the id of the element as an reference.
library_path
The static path of the charting library. Provide the path to the folder, not any file.
datafeed
JS object that implements the JS API. The required methods are:
-
onReady
This call is intended to provide the object filled with the configuration data. Charting Library assumes that you will call the callback function and pass your datafeedconfigurationData
as an argument. Configuration data is an object. -
searchSymbols
This call is intended to provide the list of symbols that match the user's search query. -
resolveSymbol
Charting Library will call this function when it needs to get SymbolInfo by symbol name. -
getBars
This function is called when the chart needs a history fragment defined by dates range. -
subscribeBars
Charting Library calls this function when it wants to receive real-time updates for a symbol. The Library assumes that you will callonRealtimeCallback
every time you want to update the most recent bar or to add a new one. -
unsubscribeBars
Charting Library calls this function when it doesn't want to receive updates for this subscriber any more.subscriberUID
will be the same object that Library passed tosubscribeBars
before.
To read more about datafeed
, go to the datafeed wiki or the datafeed file.
You can see the toolbar at the bottom of the chart. Each of those buttons on the left side switches the chart time frame. Switching time frame means:
- Switch the chart resolution
- Force the bars to scale horizontally in order to cover the entire requested date/time range.
You can customize default time frames using the time_frames
argument of the widget constructor.