React-dex-chart NPM

react-dex-chart

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

npm.io npm.io

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.