react-dex-chart

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

• [x] Themes
• [x] Settings
• [x] Easy to use
• [x] 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

• [x] Binance
• [x] Coinbase
• [ ] Kucoin
• [ ] Coinex
• [ ] FTX

Live data fetching currently works for these exchanges

• [x] 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.