Skip to content
This repository has been archived by the owner on Mar 17, 2024. It is now read-only.
/ react-dex-chart Public archive

πŸ“ˆ A Chart Component built with React, Lightweight-Charts, Styled Components

License

Notifications You must be signed in to change notification settings

debased/react-dex-chart

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

25 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

This repo has been archived, as its no longer maintained by it's authors.


πŸ“ˆ react-dex-chart πŸ“‰

A Chart Component built with react and lightweight-charts - by debased dao

Contributors Forks Stargazers Issues MIT License Sicko Mode


  • Themes
  • Settings
  • Easy to use
  • Responsive

Getting Started

These instructions will help guide you to get and setup a copy of this library into to your own local repository and using it.

Incomplete Parts

Currenctly background gradiant is not yet implemented, and some exchanges do not work for data fetching, be it static or live. For some exchanges you will need your own CORS proxy server in order to load data.

Data fetching

This library is designed to use other exchanges API endpoints to fetch reliable data, this is done by pair splitting and listening to remote-endpoints

Static data fetching currently works for these exchanges

  • Binance
  • Coinbase
  • Kucoin
  • Coinex
  • FTX

Live data fetching currently works for these exchanges

  • Binance
  • Coinbase
  • Kucoin
  • Coinex
  • FTX

Prerequisites

Feel free to use the package manager of your choice:

NPM: npm install react react-dom react-dex-chart

Yarn: yarn add react react-dom react-dex-chart


Development

If you are not interested in contributing to this repo and only in setting the chart up, skip to the part ahead.

Testing:

cd react-dex-chart && npm install

sudo npm link

Inside of your testing project:

cd example && npm install

npm link react-dex-chart

npm run start

Inside of react-dex-chart:

npm link example/node_modules/react

Setup the chart as usual to get started with development

Building react-dex-chart:

npm run build


Setting up the chart and its settings

Create your own themes

You can setup your own color schemes, or only allow a singular theme:

const darkTheme: Theme = {
  name: "dark",
  //default for now
  candleStickConfig: {},
  histogramConfig: {},

  chartLayout: {
    layout: {
      backgroundColor: "rgba(7, 7, 28, 1)",
      lineColor: "#2B2B43",
      textColor: "#D9D9D9",
    },
    grid: {
      vertLines: {
        color: "rgba(250, 250, 250, .1)",
      },
      horzLines: {
        color: "rgba(250, 250, 250, .1)",
      },
    },
  },
};

Configure settings, and add your own:

{
    timezone: {
        locale: '-4 UCT (NY)',
        showSessions: false,
    },
    trade: {
        showExecutions: true,
        showOrders: true,
        showPositions: true,
        extendLines: true,
        playSound: true,
    },

    background: {
        gradient: false,
        color: undefined
    }
}

View example project

https://github.com/debased/react-dex-chart/

Why this library?

Mainly to not have a huge clutter of files in your repo, while also making an extended and easier to use charting library with an as least possible setup required and many options.

Documentation

Find documentation here

Recommended usage

We recommend using component states for settings, and allowing them to be updated to improve UX.