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

• Themes
• Settings
• Easy to use
• Responsive

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

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.

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

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

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

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

npm run build

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
    }
}

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

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.

Find documentation here

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