yasincidem / chart

TradingView chart implementation for React using Cryptocompare websocket API

Demo https://thawing-waters-43695.herokuapp.com/

CryptoCompare API may be blocked by CORS policy so try out the solution. (https://stackoverflow.com/a/42024918/6382158)

Interval

• To change supported intervals in chart, modify the array

  chart/src/components/TVChartContainer/api/index.js

  Line 5 in cad09dc

  const supportedResolutions = ["1", "3", "5", "15", "30", "60", "120", "240", "D", "W"]

Timeframe

• To change timeframe in chart, modify the object

  chart/src/components/TVChartContainer/index.jsx

  Line 19 in cad09dc

  const TIME_FRAMES = [

Default Options

• To change widget default options like theme, interval, symbol etc. modify the defaultProps object

  chart/src/components/TVChartContainer/index.jsx

  Line 33 in cad09dc

  static defaultProps = {

Disable Features

• To disable some features, modify the array

  chart/src/components/TVChartContainer/index.jsx

  Line 57 in cad09dc

  disabled_features: ['use_localstorage_for_settings'],

Enable Features

• To enable some features, modify the array

  chart/src/components/TVChartContainer/index.jsx

  Line 58 in cad09dc

  enabled_features: ['study_templates', 'hide_left_toolbar_by_default'],

Configure Buttons

chart/src/components/TVChartContainer/index.jsx

Line 76 in ebf4007

widget.createButton()

Add New Pairings

• To add new pairings, add symbol like "BTC/UTH" as key, exhange that supports the key(symbol) as value

  chart/src/components/TVChartContainer/api/pairs.js

  Line 1 in cad09dc

  export default {

• and add symbol, full_name, description, exchange, type to data array for searchable and selectable pairings
• Let's say you want to add "LTC/BTC" pairing.You should know which exchange supports the pairing.In this case "LTC/BTC" is supported by Binance.Then,

export default {
  "BTC/USD": "Coinbase",
  "ETH/USD": "Coinbase",
  "XLM/BTC": "Bitfinex",
  "XLM/ETH": "Bitfinex",
  "XLM/USD": "Bitfinex",
  "LTC/BTC": "Binance"
}

{
  symbol: 'LTC/BTC',
  full_name: 'LTC/BTC',
  description: 'description',
  exchange: 'Binance',
  type: 'type'
}

How to build

git clone https://github.com/yasincidem/chart.git

cd chart

npm install

Make your changes on code

To test your changes do npm start.It will be displayed on localhost:3000

To get production build do npm run build.It will create build folder.

Get charting_library folder, static folder and index.html from build folder add these to public folder in your react app