SolidJS Crypto Chart
Chart library based on lighweight-charts with data fetching from Binance (through REST and WebSocket).
Example
cd example
npm install
npm start
How To Install
NPM
npm i @husaria-solutions/solid-crypto-chart
Yarn
yarn add @husaria-solutions/solid-crypto-chart
Usage
import { CryptoChart } from '@husaria-solutions/solid-crypto-chart'
function Chart() {
return <CryptoChart pair="BTCUSDT" />
}Properties
| Prop | Required | Type | Default Value |
|---|---|---|---|
| pair | Yes | String | - Please refer binance api for more pairs binance rest api |
| interval | Yes | String enum (Binance values, like 1m, 15m, 1h, 1d, check types.ts) | - |
| candleStickConfig | No | Object |
{
upColor: "#00c176",
downColor: "#cf304a",
borderDownColor: "#cf304a",
borderUpColor: "#00c176",
wickDownColor: "#838ca1",
wickUpColor: "#838ca1",
}
|
| histogramConfig | No | Object |
{
base: 0,
lineWidth: 2,
priceFormat: {
type: "volume",
},
overlay: true,
scaleMargins: {
top: 0.8,
bottom: 0,
},
}
|
| chartLayout | No | Object |
{
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',
}
|
Author
License
This project is licensed under the MIT License - see the LICENSE file for details