Charting Library with Financial Candlesticks Chart that provides an alternative to TradingView
npm install @streamlinedfi/chartsCharting Library with Financial Candlesticks Chart that provides an alternative to TradingView
!Screenshot of Streamlined Charts
This chart is the one used by Streamlined Finance. It is free to use, provided that attribution is maintained by keeping the logo visible in the chart.
If you encounter any issues or have suggestions, please open an issue in the repository.
``with Yarn
$ yarn add @streamlinedfi/charts styled-components
Basic Setup
CandlesCharts works like a controlled component, where you provide the config and the data.
`jsx
import { CandlesChart } from '@streamlinedfi/charts';const defaultRequestBars = 100;
const TimeFrames = {
M1: 'M1',
M3: 'M3',
M5: 'M5',
M10: 'M10',
M15: 'M15',
M20: 'M20',
M30: 'M30',
H1: 'H1',
H2: 'H2',
H4: 'H4',
D1: 'D1',
W1: 'W1',
};
// timeframes need a text and id property
const timeframes = {
[TimeFrames.M15]: {
text: '15m',
id: TimeFrames.M15,
},
[TimeFrames.M30]: {
text: '30m',
id: TimeFrames.M30,
},
[TimeFrames.H1]: {
text: '1h',
id: TimeFrames.H1,
},
[TimeFrames.H4]: {
text: '4h',
id: TimeFrames.H4,
},
[TimeFrames.D1]: {
text: 'D',
id: TimeFrames.D1,
},
[TimeFrames.W1]: {
text: 'W',
id: TimeFrames.W1,
},
};
// format the data like this:
const data = [
{
time: 1742961600000,
open: 575.19,
high: 576.33,
low: 567.19,
close: 568.59,
volume: 51848300,
},
{
time: 1742961600000,
open: 575.19,
high: 576.33,
low: 567.19,
close: 568.59,
volume: 51848300,
},
];
function App() {
const [loading, setLoading] = useState(true);
const [fullscreen, setFullscreen] = useState(false);
const [timeframe, setTimeframe] = useState(timeframes.D1);
const [config, setConfig] = useState({});
return (
loading={loading}
config={{
width: 960,
height: 560,
symbol: {
name: 'Apple Inc.',
code: 'AAPL',
},
decimals: 2,
symbolClick: true,
fullscreen: false,
showFullscreenButton: false,
initialCandlesWindow: defaultRequestBars,
timeframe,
timeframes: values(timeframes),
timeframesMenu: {
Minute: [timeframes.M15, timeframes.M30],
Hour: [timeframes.H1, timeframes.H4],
'Day/Week': [timeframes.D1, timeframes.W1],
},
}}
data={data}
onConfig={setConfig}
onTimeframeChange={setTimeframe}
onLoadMore={() => {
console.log('load more candles and update data...');
}}
onSymbolClick={() => {
console.log('symbol clicked, code your');
}}
onFullscreen={setFullscreen}
/>
);
}
`Custom Theme
You can fully customize the chart's theme by passing a
theme property to the config prop, using the following structure:`js
config.theme = {
colors: 'string[]',
bgColor: 'string',
borderRadius: 'number',
primary: 'string',
lineColor: 'string',
lineWidth: 'number',
lineCircleSize: 'number',
candleUpColor: 'string',
candleDownColor: 'string',
fontFamily: 'string',
fontSize: 'number',
fontWeight: 'number',
color: 'string',
padding: '[number, number, number, number]',
title: {
fontSize: 'number',
marginBottom: 'number',
color: 'string',
colorHover: 'string',
},
subtitle: {
fontSize: 'number',
marginBottom: 'number',
color: 'string',
colorHover: 'string',
},
header: {
angleDownSize: 'number',
angleDownColor: 'string',
angleDownColorHover: 'string',
toolbarBorderColor: 'string',
buttonFontSize: 'number',
buttonColor: 'string',
buttonColorHover: 'string',
buttonColorActive: 'string',
buttonBgColorActive: 'string',
buttonBorderColor: 'string',
buttonBorderColorActive: 'string',
marginRight: 'number',
background: 'string',
},
legend: {
fontSize: 'number',
color: 'string',
itemMarginRight: 'number',
itemMarginBottom: 'number',
marginBottom: 'number',
circle: {
positionTop: 'number',
size: 'number',
marginRight: 'number',
lineWidth: 'number',
},
},
grid: {
lineColor: 'string',
showY: 'boolean',
showX: 'boolean',
},
axes: {
fontSize: 'number',
color: 'string',
emphasizeColor: 'string',
lineColor: 'string',
tickColor: 'string',
tickSize: 'number',
tickMargin: 'number',
lastValueTickBgSize: 'number',
xEndShiftRatio: 'number',
minTickWidthX: 'number',
minTickSpaceY: 'number',
hoverColor: 'string',
},
indicatorWindow: {
splitLineColor: 'string',
splitLineWidth: 'number',
bgColor: 'string',
color: 'string',
settingsColor: 'string',
},
crosshair: {
color: 'string',
tickColor: 'string',
tickBgColor: 'string',
lineColor: 'string',
lineDash: '[number, number]',
},
ohlcvOverlay: {
keyColor: 'string',
valueColor: 'string',
fontSize: 'number',
overlayMarginTop: 'number',
overlayMarginBottom: 'number',
overlayMarginRight: 'number',
itemMarginBottom: 'number',
itemMarginRight: 'number',
colMarginRight: 'number',
},
menu: {
bgColor: 'string',
borderColor: 'string',
borderWidth: 'number',
borderRadius: 'number',
padding: 'number',
item: {
padding: 'number',
fontSize: 'number',
color: 'string',
colorHover: 'string',
colorActive: 'string',
bgColorHover: 'string',
bgColorActive: 'string',
borderRadius: 'number',
},
},
input: {
labelColor: 'string',
labelBgColor: 'string',
color: 'string',
bgColor: 'string',
bgColorHover: 'string',
bgColorDarker: 'string',
bgColorDarkerHover: 'string',
},
button: {
borderColor: 'string',
borderColorHover: 'string',
borderColorActive: 'string',
color: 'string',
colorHover: 'string',
colorActive: 'string',
},
popoverMenu: {
zIndex: 'number',
background: 'string',
bgColor: 'string',
borderColor: 'string',
color: 'string',
uppercaseColor: 'string',
},
indicatorsMenu: {
titleColor: 'string',
subtitleColor: 'string',
indicatorTextColor: 'string',
borderColor: 'string',
settingsColor: 'string',
buttonBgColor: 'string',
buttonBorderColor: 'string',
buttonBorderColorActive: 'string',
labelColor: 'string',
addIconColor: 'string',
addIconColorActive: 'string',
settingsColorActive: 'string',
removeIconColor: 'string',
},
drawingToolbar: {
colors: 'string[]',
iconColor: 'string',
bgColor: 'string',
borderColor: 'string',
closeColor: 'string',
closeBgColor: 'string',
textColor: 'string',
textColorActive: 'string',
textBgColor: 'string',
},
switch: {
activeBgColor: 'string',
inactiveBgColor: 'string',
activeColor: 'string',
inactiveColor: 'string',
},
dragList: {
topZIndex: 'number',
borderColor: 'string',
bgColorHover: 'string',
handleBgColorHover: 'string',
handleColor: 'string',
},
close: {
bgColorActive: 'string',
color: 'string',
colorHover: 'string',
colorActive: 'string',
},
indicators: {
bb: {
bgColor: 'string',
upperlineColor: 'string',
middlelineColor: 'string',
lowerlineColor: 'string',
},
macd: {
bgColor: 'string',
histogramColor: 'string',
histogramBgColor: 'string',
signalLineColor: 'string',
signalLineBgColor: 'string',
histogramBarColor: 'string',
histogramBarBgColor: 'string',
},
roc: {
zeroLineColor: 'string',
},
rsi: {
bgColor: 'string',
upperLineColor: 'string',
lowerLineColor: 'string',
middleLineColor: 'string',
},
stochastic: {
bgColor: 'string',
upperLineColor: 'string',
lowerLineColor: 'string',
middleLineColor: 'string',
},
},
};
``