Introduction

Candlestick chart that graphically represents the price moves of an asset for a given timeframe. As the name suggests, it’s made up of candlesticks, each representing the same amount of time. In the current implementation it is possible to filter by various intervals, e.g. 1 day, 3 days, 1 week etc It is also possible to filter items by date range. BUY and SELL signals are generated by picking a random item in the chart. It will be recalculated on any filter change. Please see screenshots for more references.

Install

npm install @nataliia-dev/candlestick-charts

@nataliia-dev/candlestick-charts npm package

Usage

Chart Component

import { KlineCandlestickChart, ApiProvider } from '@nataliia-dev/candlestick-charts'

const Example = () => {
  return (
    <KlineCandlestickChart apiProvider={ApiProvider.Binance} pair="BTCUSD" />
  );
};

Chart Component Props

type Props = {
  // apiProvider - [Optional] - Api to fetch data from. Currently only Binance is available.
  // default value - ApiProvider.Binance
  apiProvider?: ApiProvider;
  // pair - [Optional] - name of the two assests which is compared to each other
  // default value - "BTCUSD" 
  pair?: string;
};

Screenshots

Default state

Filters applied & tooltip presentation

Modern.js Package

Setup

Install the dependencies:

npm run install

Get Started

Run and debug the module:

npm run dev

Run test cases:

npm run test

Build the module for production:

npm run build

Enable optional features:

npm run new

Other commands:

npm run lint         # Lint and fix source files
npm run change       # Add a new changeset
npm run bump         # Update version and changelog via changeset
npm run release      # Release the package

For more information, see the Modern.js Module documentation.