Trader Charts

Trader Charts is a tool for performing technical analysis with interactive charts. It allows users to visualize stock data or other asset data depending on what the data providers supply, and to apply technical indicators to analyze price trends

* One charting tool to rule them all *

---

Interactive Web Interface

React Financial Charts - Exclusive version

Kairos AI

---

Trader Charts Frontend - Overview

The Frontend is the user-facing application built with React, MUI, Redux, and D3.js.
It provides interactive charts and dashboards for visualizing data collected and processed by the backend and compute services.
See backend → | See compute services →

---

🚀 Want to contribute?

We welcome collaborators who wish to contribute and help enhance this trading tool. Feel free to reach out to the maintainers to get involved.

---

Trader Charts Frontend

There's 3 environments: mock, develop and production

Install dependencies to be able to start project

1. Create main project & clone it

   $ mkdir trader-charts
   $ cd trader-charts
   $ git clone https://github.com/sgonzaloc/react-financial-charts.git
   

2. Clone sub-projects

   $ git clone https://github.com/sgonzaloc/trader-charts-frontend.git
   

3. Build react-financial-charts

   $ cd react-financial-charts
   $ npm ci && npm build
   

4. Install yalc globally:

   $ npm install -g yalc
   

5. Go to each package inside react-financial-charts/packages folder (anotations, axes, ...), and publish packages to yalc:

   $ yalc publish
   

6. Install Kairos AI chat, to enable the Kairos AI section

   $ cd trader-charts (go to main project, not subprojects)
   $ git clone https://github.com/$huggingface/chat-ui kairos-ai
   $ cd kairos-ai
   $ npm install
   

7. Apply Kairos AI patch

   $ npm install --save-dev cheerio recast @babel/parser
   $ curl -o scripts/patch-KairosAI.js https://raw.githubusercontent.com/TraderCharts/.github/refs/heads/main/patches/KairosAI/patch-KairosAI.js
   $ node scripts/patch-KairosAI.js
   $ rm scripts/patch-KairosAI.js
   

8. Configurate Kairos AI chat

   $ Go to https://huggingface.co/settings/tokens $ Create Hugginface API KEY, for using AI models $ Assign the api key to HF_TOKEN variable on .env.local file

9. Run Kairos AI patch

📝 The chat history is stored in a MongoDB instance, and having a DB instance available is needed for Kairos AI to work.

📝 In case you have error 401 "Invalid credentials in Authorization header", it's because you didn't add your API_KEY

1.  To run only the main Interactive Web Interface (no hot reloading)

            $ npm run build
            $ npm run preview

2.  To work on Kairos AI improvements (with hot reloading)

            $ npm run dev -- --open

9. Start project Mock/Develop environment

Start Mock Environment

For using the mock environment, you will need to run 'mock server', and then website itself that use the server that retrieves mock data. Please run the following commands:

1. Start the mock server:

   $ npm run mock-api
   

2. Run the website, which retrieves data from the mock-api:

   $ npm run start-mock
   

Start Develop environment:

For using the develop environment, you will need to run 'backend', and then website itself that use the server that retrieves mock data. Please run the following commands:

1. Go to Backend project and run the project:

2. For running website, which retrieves data from the backend server:

   $ npm run start-develop
   

Roadmap features

• Design main project structure

• Add Auth0 login component for login with Email

• Add Auth0 login component for login with Facebook

• Add general layout, main frame, upper bar, sidebar and profile picture

• Add profile menu

• Add charts section design

• Add candlesticks type to charts

• Add volume indicator to charts

• Add volume profile indicator to charts

• Allow running project with simulated data, to be able to develop this project independently of the backend project.

• Add tickers search box

• Add Open-High-Low-Close price fixed indicator (OHLC)

• Add moving average interactive indicator (SMA)

• Add exponential moving average interactive indicator (OHLC)

• Add indicators search box, to be able to add them to chart

• Allow to select the thickness of interactive indicators

• Allow to select the color of interactive indicators

• Add color picker, to be able to select the color of interactive indicators

• Add labels with details of interactive indicators

• Allow to edit interactive indicators, clicking on labels

• Add alerts section design

• Allow create alerts

• Allow edit alerts

• Fork finance chart library, and add new features to be able to delete selected lines este es el contexto pero solo corregi lo anterior q te pedi . NO REPITAS TODO!

Roadmap features

• Design main project structure

• Add Auth0 login component for login with Email

• Add Auth0 login component for login with Facebook

• Add general layout, main frame, upper bar, sidebar and profile picture

• Add profile menu

• Add charts section design

• Add candlesticks type to charts

• Add volume indicator to charts

• Add volume profile indicator to charts

• Allow running project with simulated data, to be able to develop this project independently of the backend project.

• Add tickers search box

• Add Open-High-Low-Close price fixed indicator (OHLC)

• Add moving average interactive indicator (SMA)

• Add exponential moving average interactive indicator (OHLC)

• Add indicators search box, to be able to add them to chart

• Allow to select the thickness of interactive indicators

• Allow to select the color of interactive indicators

• Add color picker, to be able to select the color of interactive indicators

• Add labels with details of interactive indicators

• Allow to edit interactive indicators, clicking on labels

• Add alerts section design

• Allow create alerts

• Allow edit alerts

• Fork finance chart library, and add new features to be able to delete selected lines

• Adding trending news sections from several different sources. It's possible to configure news from any country in any language

• Adding sentiment analysis for each news using Large Language Models (LLMs) trained specifically for financial news

• Adding topics for each news using multilingual Large Language Models (LLMs)

• Adding Kairos AI chat, similar to ChatGPT. You can ask anything and the model will reply. The model can search the internet

Future features

• Allow to remove all chart components
• Save chart components on templates

Trading Charts demo

• Demo Video

Captures

• Auth0 email login:

• Charts section:

• Alerts section:

• Trending news and topic extraction with AI:

• Trending news and sentimental analysis with AI:

• Kairos AI Chat. Ask anything!

• Interactive components of Fibonacci retracements and parallel channels:

• Interactive components of Trend lines:

• Interactive components of Rays and Extended lines:

• Gann fans interactive component:

• Tickers search box:

• Indicator's search box:

• Indicator's details:

• Indicator's color picker:

• Alerts editable details:

• Profile Menu:

Required Env Variables

Create .env.local file, and include all the following:

    HF_TOKEN=[string]
    MONGODB_URL=[string]

Contributors ✨

Thanks goes to these wonderful people:

Gonzalo Sanchez Cano