Financial-chart-made-simple NPM

The package that allows you to build responsive financial charts styled your way. The chart functionality is similar to that on coinmarketcap.io.

Installation

npm

npm install financial-chart-made-simple

yarn

yarn add financial-chart-made-simple

Documentation

Getting started

In order to create your own chart you need to import Chart component:

import { Chart } from "financial-chart-made-simple";

Then you can use it as following:

<Chart dataset={yourDataset} />

Props

//your own dataset
dataset: {
   Date: string;
   Open: number;
   High?: number;
   Low?: number;
   Close?: number;
   "Adj Close"?: number;
   Volume: number;
 }[];
//colors object to customize the appearance of the chart
colors?: {
    above?: string; //default: 'rgb(106, 173, 56)'
    below?: string; //default: 'rgb(255, 63, 63)'
    barChart?: string; //default: '#ccc'
    tooltip?: string; //default: 'rgb(102, 102, 102)'
    tooltipDate?: string; //default: 'white'
    tooltipTime?: string; //default: 'lightgrey'
    tooltipData?: string; //default: 'lightgrey'
    xLabel?: string; //default: 'rgb(102, 102, 102)'
    yLabel?: string; //default: 'rgb(102, 102, 102)'
    openLabel?: string; //default: 'rgba(102, 102, 102, 0.7)'
    minChartLine?: string; //default: 'rgb(54, 162, 235)'
    minChartBackground?: string; //default: 'rgba(54, 162, 235, 0.2)'
    slide?: string; //default: 'rgba(54, 162, 235, 0.4)'
  };
//font-family
font?: string; //default: 'Arial'
//currency; list of avaiable currencies and codes of them here: https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=currency-codes
currency?: string; //default: 'USD'

Changing a particular color

In order to change a particular color you need to do the following:

import { defaultColors } from "financial-chart-made-simple";
///...
const colors = defaultColors;
//if you want to change tooltip background for example
colors.tooltip = 'rgb(100, 100, 100)' //pass your value here
//...
<Chart dataset={yourDataset} colors={colors} />
//...