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} />
//...
License
financial-chart-made-simple is available under the MIT license.