React Crypto Chart
crypto chart widget for react using binance api
Example
- Example App:
cd example
npm install
npm start
How To Install
npm i react-crypto-chart
yarn
yarn add react-crypto-chart
Usage
import TradeViewChart from "react-crypto-chart";
<TradeViewChart pair="BTCBUSD" />;Properties
| Prop | Required | Type | Default Value |
|---|---|---|---|
| pair | No | String | BTCBUSD Please refer binance api for more pairs binance rest api |
| interval | No | String | 1m |
| candleStickConfig | No | Object Candlestick Config type |
{
upColor: "#0ecb81",
downColor: "#f6465da",
borderDownColor: "#f6465da",
borderUpColor: "#0ecb81",
wickDownColor: "#838ca1",
wickUpColor: "#838ca1",
}
|
| histogramConfig | No | Object Histogram Config type |
{
base: 0,
lineWidth: 2,
priceFormat: {
type: "volume",
},
overlay: true,
scaleMargins: {
top: 0.8,
bottom: 0,
},
}
|
| chartLayout | No | Object Chart Layout types |
{
layout: {
backgroundColor: "#ededed",
textColor: "#253248",
},
grid: {
vertLines: {
color: "#838fa3",
style: LineStyle.SparseDotted,
},
horzLines: {
color: "#838fa3",
style: LineStyle.SparseDotted,
},
},
crosshair: {
mode: CrosshairMode.Normal,
},
priceScale: {
borderColor: "#485c7b",
},
timeScale: {
borderColor: "#485c7b",
timeVisible: true,
secondsVisible: false,
},
}
|
| containerStyle | No | Object |
{
maxWidth: '100%',
maxHeight: '100vh',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}
|
Authors
- Justin K Xavier - Initial work - LinkedIn
See also the list of contributors who participated in this project.
License
This project is licensed under the MIT License - see the LICENSE.md file for details