Skip to content

Instantly share code, notes, and snippets.

@rrag
Last active Aug 19, 2019
Embed
What would you like to do?
Chart with edge coordinates & Moving average overlay using React Stockcharts
license: MIT
height: 470
"use strict";
var { ChartCanvas, Chart, series, scale, coordinates, tooltip, axes, indicator, helper } = ReStock;
var { CandlestickSeries, BarSeries, LineSeries, AreaSeries } = series;
var { discontinuousTimeScaleProvider } = scale;
var { EdgeIndicator } = coordinates;
var { CrossHairCursor, MouseCoordinateX, MouseCoordinateY, CurrentCoordinate } = coordinates;
var { OHLCTooltip, MovingAverageTooltip } = tooltip;
var { XAxis, YAxis } = axes;
var { ema, sma } = indicator;
var { fitWidth, TypeChooser } = helper;
class CandleStickChartWithEdge extends React.Component {
render() {
var { data, type, width, ratio } = this.props;
var ema20 = ema()
.id(0)
.windowSize(20)
.merge((d, c) => {d.ema20 = c})
.accessor(d => d.ema20);
var ema50 = ema()
.id(2)
.windowSize(50)
.merge((d, c) => {d.ema50 = c})
.accessor(d => d.ema50);
var smaVolume70 = sma()
.id(3)
.windowSize(70)
.sourcePath("volume")
.merge((d, c) => {d.smaVolume70 = c})
.accessor(d => d.smaVolume70);
return (
<ChartCanvas ratio={ratio} width={width} height={450}
margin={{left: 90, right: 90, top:70, bottom: 30}} type={type}
seriesName="MSFT"
data={data} calculator={[ema20, ema50, smaVolume70]}
xAccessor={d => d.date} xScaleProvider={discontinuousTimeScaleProvider}
xExtents={[new Date(2016, 0, 1), new Date(2016, 9, 11)]}>
<Chart id={2}
yExtents={[d => d.volume, smaVolume70.accessor()]}
height={150} origin={(w, h) => [0, h - 150]}>
<YAxis axisAt="left" orient="left" ticks={5} tickFormat={d3.format(".0s")}/>
<BarSeries yAccessor={d => d.volume} fill={d => d.close > d.open ? "#6BA583" : "#FF0000"} />
<AreaSeries yAccessor={smaVolume70.accessor()} stroke={smaVolume70.stroke()} fill={smaVolume70.fill()}/>
<CurrentCoordinate yAccessor={smaVolume70.accessor()} fill={smaVolume70.stroke()} />
<CurrentCoordinate yAccessor={d => d.volume} fill="#9B0A47" />
<EdgeIndicator itemType="first" orient="left" edgeAt="left"
yAccessor={d => d.volume} displayFormat={d3.format(".4s")} fill="#0F0F0F"/>
<EdgeIndicator itemType="last" orient="right" edgeAt="right"
yAccessor={d => d.volume} displayFormat={d3.format(".4s")} fill="#0F0F0F"/>
<EdgeIndicator itemType="first" orient="left" edgeAt="left"
yAccessor={smaVolume70.accessor()} displayFormat={d3.format(".4s")} fill={smaVolume70.fill()}/>
<EdgeIndicator itemType="last" orient="right" edgeAt="right"
yAccessor={smaVolume70.accessor()} displayFormat={d3.format(".4s")} fill={smaVolume70.fill()}/>
</Chart>
<Chart id={1}
yPan yExtents={[d => [d.high, d.low], ema20.accessor(), ema50.accessor()]}
padding={{ top: 10, bottom: 20 }}>
<XAxis axisAt="bottom" orient="bottom" />
<XAxis axisAt="top" orient="top" flexTicks />
<YAxis axisAt="right" orient="right" ticks={5} />
<CandlestickSeries />
<LineSeries yAccessor={ema20.accessor()} stroke={ema20.stroke()} highlightOnHover />
<LineSeries yAccessor={ema50.accessor()} stroke={ema50.stroke()} highlightOnHover />
<CurrentCoordinate yAccessor={ema20.accessor()} fill={ema20.stroke()} />
<CurrentCoordinate yAccessor={ema50.accessor()} fill={ema50.stroke()} />
<EdgeIndicator itemType="last" orient="right" edgeAt="right"
yAccessor={ema20.accessor()} fill={ema20.fill()}/>
<EdgeIndicator itemType="last" orient="right" edgeAt="right"
yAccessor={ema50.accessor()} fill={ema50.fill()}/>
<EdgeIndicator itemType="last" orient="right" edgeAt="right"
yAccessor={d => d.close} fill={d => d.close > d.open ? "#6BA583" : "#FF0000"}/>
<EdgeIndicator itemType="first" orient="left" edgeAt="left"
yAccessor={ema20.accessor()} fill={ema20.fill()}/>
<EdgeIndicator itemType="first" orient="left" edgeAt="left"
yAccessor={ema50.accessor()} fill={ema50.fill()}/>
<EdgeIndicator itemType="first" orient="left" edgeAt="left"
yAccessor={d => d.close} fill={d => d.close > d.open ? "#6BA583" : "#FF0000"}/>
<MouseCoordinateX
at="top"
orient="top"
displayFormat={d3.timeFormat("%Y-%m-%d")} />
<MouseCoordinateX
at="bottom"
orient="bottom"
displayFormat={d3.timeFormat("%Y-%m-%d")} />
<MouseCoordinateY
at="right"
orient="right"
displayFormat={d3.format(".2f")} />
<MouseCoordinateY
at="left"
orient="left"
displayFormat={d3.format(".2f")} />
<OHLCTooltip origin={[-40, -65]}/>
<MovingAverageTooltip onClick={(e) => console.log(e)} origin={[-38, -55]}
calculators={[ema20, ema50]}/>
</Chart>
<CrossHairCursor />
</ChartCanvas>
);
}
}
/*
*/
CandleStickChartWithEdge.propTypes = {
data: React.PropTypes.array.isRequired,
width: React.PropTypes.number.isRequired,
ratio: React.PropTypes.number.isRequired,
type: React.PropTypes.oneOf(["svg", "hybrid"]).isRequired,
};
CandleStickChartWithEdge.defaultProps = {
type: "svg",
};
CandleStickChartWithEdge = fitWidth(CandleStickChartWithEdge);
var parseDate = d3.timeParse("%Y-%m-%d %H:%M:%S");
d3["tsv"]("//rrag.github.io/react-stockcharts/data/MSFT.tsv", (err, data) => {
/* change MSFT.tsv to MSFT_full.tsv above to see how this works with lots of data points */
data.forEach((d, i) => {
d.date = new Date(d3.timeParse("%Y-%m-%d")(d.date).getTime());
d.open = +d.open;
d.high = +d.high;
d.low = +d.low;
d.close = +d.close;
d.volume = +d.volume;
// console.log(d);
});
/* change the type from hybrid to svg to compare the performance between svg and canvas */
ReactDOM.render(<TypeChooser type="hybrid">{type => <CandleStickChartWithEdge data={data} type={type} />}</TypeChooser>, document.getElementById("chart"));
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>React Stockcharts - CandleStickChartWithEdge Example</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.7/d3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.17.0/babel.min.js"></script>
<!-- <script type="text/javascript" src="//unpkg.com/react-stockcharts@latest/dist/react-stockcharts.min.js"></script> -->
<script type="text/javascript" src="//rrag.github.io/react-stockcharts/dist/react-stockcharts.min.js"></script>
</head>
<body>
<span id="iconPreload" class="glyphicon glyphicon-arrow-down"></span>
<div id="chart">
</div>
<script>
// Use babel transform so the examples work on the browser
d3.request("./CandleStickChartWithEdge.jsx")
.get(function(err, data) {
var outputEl = document.getElementById('chart');
try {
var output = Babel.transform(data.responseText, { presets: ["es2015", "react", "stage-3"] }).code;
eval(output);
} catch (ex) {
outputEl.innerHTML = 'ERROR: ' + ex.message;
}
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment