Drawing candle stick chart sample

examples/CandleStickChart/package.json

@@ -3,6 +3,7 @@
   "description": "Examples for react-stockcharts",
   "version": "0.0.24",
   "dependencies": {
+    "d3": "^5.9.2",
     "d3-dsv": "^1.0.8",
     "d3-format": "^1.2.1",
     "d3-scale": "^1.0.7",

examples/CandleStickChart/src/Chart.js

@@ -3,53 +3,63 @@ import React from "react";
 import PropTypes from "prop-types";
 
 import { scaleTime } from "d3-scale";
-import { utcDay } from "d3-time";
+import { utcHour } from "d3-time";
 
 import { ChartCanvas, Chart } from "react-stockcharts";
 import { CandlestickSeries } from "react-stockcharts/lib/series";
 import { XAxis, YAxis } from "react-stockcharts/lib/axes";
 import { fitWidth } from "react-stockcharts/lib/helper";
 import { last, timeIntervalBarWidth } from "react-stockcharts/lib/utils";
 
+const colorLoader = d => (d.close > d.open && '#00C300') || '#FF3300'
+
+const candlesAppearance = {
+  wickStroke: colorLoader,
+  fill:colorLoader,
+  stroke: colorLoader,
+  candleStrokeWidth: 1,
+  widthRatio: 0.3,
+  opacity: 0.9,
+}
+
 class CandleStickChart extends React.Component {
-	render() {
-		const { type, width, data, ratio } = this.props;
-		const xAccessor = d => d.date;
-		const xExtents = [
-			xAccessor(last(data)),
-			xAccessor(data[data.length - 100])
-		];
-		return (
-			<ChartCanvas height={400}
-					ratio={ratio}
-					width={width}
-					margin={{ left: 50, right: 50, top: 10, bottom: 30 }}
-					type={type}
-					seriesName="MSFT"
-					data={data}
-					xAccessor={xAccessor}
-					xScale={scaleTime()}
-					xExtents={xExtents}>
-
-				<Chart id={1} yExtents={d => [d.high, d.low]}>
-					<XAxis axisAt="bottom" orient="bottom" ticks={6}/>
-					<YAxis axisAt="left" orient="left" ticks={5} />
-					<CandlestickSeries width={timeIntervalBarWidth(utcDay)}/>
-				</Chart>
-			</ChartCanvas>
-		);
-	}
+  render() {
+    const { type, width, data, ratio } = this.props;
+    const xAccessor = d => d.date;
+    const xExtents = [
+      xAccessor(last(data)),
+      xAccessor(data[0])
+    ];
+    return (
+      <ChartCanvas height={400}
+          ratio={ratio}
+          width={width}
+          margin={{ left: 100, right: 100, top: 20, bottom: 30 }}
+          type={type}
+          seriesName="MSFT"
+          data={data}
+          xAccessor={xAccessor}
+          xScale={scaleTime()}
+          xExtents={xExtents}>
+        <Chart id={1} yExtents={d => [d.high, d.low]}>
+          <XAxis axisAt="bottom" orient="bottom" ticks={6}/>
+          <YAxis axisAt="right" orient="right" ticks={5} />
+          <CandlestickSeries width={timeIntervalBarWidth(utcHour)} {...candlesAppearance}/>
+        </Chart>
+      </ChartCanvas>
+    );
+  }
 }
 
 CandleStickChart.propTypes = {
-	data: PropTypes.array.isRequired,
-	width: PropTypes.number.isRequired,
-	ratio: PropTypes.number.isRequired,
-	type: PropTypes.oneOf(["svg", "hybrid"]).isRequired,
+  data: PropTypes.array.isRequired,
+  width: PropTypes.number.isRequired,
+  ratio: PropTypes.number.isRequired,
+  type: PropTypes.oneOf(["svg", "hybrid"]).isRequired,
 };
 
 CandleStickChart.defaultProps = {
-	type: "svg",
+  type: "svg",
 };
 CandleStickChart = fitWidth(CandleStickChart);
 

examples/CandleStickChart/src/index.js

@@ -2,29 +2,16 @@
 import React from 'react';
 import { render } from 'react-dom';
 import Chart from './Chart';
-import { getData } from "./utils"
 
 import { TypeChooser } from "react-stockcharts/lib/helper";
 
-class ChartComponent extends React.Component {
-	componentDidMount() {
-		getData().then(data => {
-			this.setState({ data })
-		})
-	}
-	render() {
-		if (this.state == null) {
-			return <div>Loading...</div>
-		}
-		return (
-			<TypeChooser>
-				{type => <Chart type={type} data={this.state.data} />}
-			</TypeChooser>
-		)
-	}
-}
+
+
+const ChartComponent = ({ data = mockData }) => (
+  <Chart data={data} type="canvas" />
+);
 
 render(
-	<ChartComponent />,
-	document.getElementById("root")
+  <ChartComponent />,
+  document.getElementById("root")
 );