https://github.com/justinkx/react-crypto-chart

crypto chart widget for react using binance api
https://github.com/justinkx/react-crypto-chart

crypto react

Last synced: 3 months ago
JSON representation

crypto chart widget for react using binance api

• Host: GitHub
• URL: https://github.com/justinkx/react-crypto-chart
• Owner: justinkx
• License: mit
• Created: 2021-06-10T10:32:15.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2023-02-24T10:10:43.000Z (over 3 years ago)
• Last Synced: 2025-09-13T23:24:35.312Z (10 months ago)
• Topics: crypto, react
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-crypto-chart
• Size: 336 KB
• Stars: 26
• Watchers: 2
• Forks: 13
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# React Crypto Chart

[![Latest Github release](https://img.shields.io/github/release/justinkx/react-crypto-chart.svg)](https://github.com/justinkx/react-crypto-chart/releases/latest)

[![MIT License](https://img.shields.io/apm/l/atomic-design-ui.svg?)](https://github.com/justinkx/react-crypto-chart/blob/master/LICENSEs)

[![Version](https://badge.fury.io/gh/tterb%2FHyde.svg)](https://badge.fury.io/gh/tterb%2FHyde)[![Github All Releases](https://img.shields.io/github/downloads/justinkx/react-crypto-chart/total.svg?style=flat)]()[![Issues](https://img.shields.io/github/issues-raw/justinkx/react-crypto-chart.svg?maxAge=25000)](https://github.com/justinkx/react-crypto-chart/issues) [![GitHub pull requests](https://img.shields.io/github/issues-pr/justinkx/react-crypto-chart.svg?style=flat)]()

[![NPM Version](https://img.shields.io/npm/v/npm.svg?style=flat)]()[![GitHub last commit](https://img.shields.io/github/last-commit/justinkx/react-crypto-chart.svg?style=flat)]()

#### crypto chart widget for react using binance api



### Example

- Example App:

```

cd example

npm install

npm start

```

- [Stackblitz example](https://stackblitz.com/edit/react-crypto-chart)

## How To Install

```npm

npm i react-crypto-chart

```

#### yarn

```npm

yarn add react-crypto-chart

```

## Usage

```javascript

import TradeViewChart from 'react-crypto-chart';

;

```

## 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: "#00c176",

        downColor: "#cf304a",

        borderDownColor: "#cf304a",

        borderUpColor: "#00c176",

        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](https://www.linkedin.com/in/justin-k-xavier-59b82710a/)

See also the list of [contributors](https://github.com/justinkx/RNChallenge_1/graphs/contributors) who participated in this project.

## License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details

---

😊Pull requests accepted with ❤️