open
hi
low
close
To use the stock price chart, import these on top:
import { StockPriceChart } from 'chartformers';
import 'chartformers/dist/chartformers.css';Minimum call:
The chart must be called in a container with width and height set. It will then fill the available space of this container.
<div className="w-full h-60 md:h-96">
<StockPriceChart data={[]} />
</div>The component requires a mandatory data property. This data is an array of objects with 7 properties:
- date: string which describes a date
- open: string of a number value
- hi: string of a number value
- low: string of a number value
- close: string of a number value
- adj_close: string of a number value
- volume: string of a number value
Sample Data
const stockData = [
{
"date": "2016-01-04",
"open": "4580.17",
"hi": "4603.82",
"low": "4525.92",
"close": "4525.92",
"adj_close": "4525.92",
"volume": "2063833200"
},
// etc
]You can select to display stock price in either 'linechart' or 'candlestick' via the 'mode' prop. This visualization consists of 3 charts: the stock price itself at the top, the trading volume and the brush control at the bottom where you can click and drag/pinch to zoom into your selected timeframe. Currently the chart is not yet animated, there will be improvements in the future.
#Property Table
| property | description | mandatory | default value |
|---|---|---|---|
| data | Array of objects with 7 properties: date, open, hi, low, close, adj_close volume. eg: const stockData = [ { "date": "2016-01-04", "open": "4580.17", "hi": "4603.82", "low": "4525.92", "close": "4525.92", "adj_close": "4525.92", "volume": "2063833200" }, /*..etc..*/ ] | Yes | [] |
| mode | Can be either "linechart" (default) or "candlestick". Choose to display stock price in either line chart or candlestick chart | No | linechart |
| timeframe | Timeframe will only affect the chart if mode is "candlestick", can be "daily" (default), "weekly" or "monthly" | No | daily |
| tooltipFormat | see below. Warning: stock price chart cannot customize the "formatType" of "tooltipFormat" prop. | No | {} |
About tooltipFormat prop
For most chart types you can pass the optional tooltipFormat prop. This prop has 3 properties: formatType, prefix and suffix, all are optional.
| formatType | prefix | suffix |
|---|---|---|
| either 'long' or 'short', default is 'long' (warning: does not apply for StockPriceChart). If given a number value of 1500, 'long' will format the value into '1,500', while 'short' will format into '1,5k'. Optional property. | prefix for the given number value, optional property. eg: 'US$' | suffix for the given number value, optional property. eg: 'KWh' |
Example use:
if given number value of 1500:
<StockPriceChart data={[...]} tooltipFormat={{ prefix:"US$ " }} />
with default 'formatType' as 'long', will render 'US$ 1,500' at the tooltip component.
Hint: In this example the US$ prefix has a single space at the end. If you want to put space between prefix and the value, do so by manually typing the space at the end of the prefix.
<StockPriceChart data={[...]} tooltipFormat={{ formatType: "short", suffix:" KWh" }} />
with the 'formatType' as 'short', will render '1,5k KWh' at the tooltip component.
Hint: In this example the KWh suffix has a single space at the start. If you want to put space between suffix and the value, do so by manually typing the space at the start of the suffix.