text: 
  import React from "react";
  import PropTypes from "prop-types";
  
  import { format } from "d3-format";
  import { timeFormat } from "d3-time-format";
  
  import { ChartCanvas, Chart } from "react-stockcharts";
  import {
  	BarSeries,
  	RenkoSeries,
  } from "react-stockcharts/lib/series";
  import { XAxis, YAxis } from "react-stockcharts/lib/axes";
  import {
  	CrossHairCursor,
  	MouseCoordinateX,
  	MouseCoordinateY,
  } from "react-stockcharts/lib/coordinates";
  
  import { discontinuousTimeScaleProvider } from "react-stockcharts/lib/scale";
  import {
  	OHLCTooltip,
  } from "react-stockcharts/lib/tooltip";
  import { renko } from "react-stockcharts/lib/indicator";
  import { fitWidth } from "react-stockcharts/lib/helper";
  import { last } from "react-stockcharts/lib/utils";
  
  class Renko extends React.Component {
  	render() {
  		const renkoCalculator = renko();
  		const { type, data: initialData, width, ratio } = this.props;
  
  		const calculatedData = renkoCalculator(initialData);
  		const xScaleProvider = discontinuousTimeScaleProvider
  			.inputDateAccessor(d => d.date);
  		const {
  			data,
  			xScale,
  			xAccessor,
  			displayXAccessor,
  		} = xScaleProvider(calculatedData);
  
  		const start = xAccessor(last(data));
  		const end = xAccessor(data[Math.max(0, data.length - 150)]);
  		const xExtents = [start, end];
  
  		return (
  			<ChartCanvas height={400}
  				ratio={ratio}
  				width={width}
  				margin={{ left: 80, right: 80, top: 10, bottom: 30 }}
  				type={type}
  				seriesName="MSFT"
  				data={data}
  				xScale={xScale}
  				xAccessor={xAccessor}
  				displayXAccessor={displayXAccessor}
  				xExtents={xExtents}
  			>
  				<Chart id={1}
  					yExtents={d => [d.high, d.low]}
  					padding={{ top: 10, bottom: 20 }}
  				>
  					<XAxis axisAt="bottom" orient="bottom"/>
  					<YAxis axisAt="right" orient="right" ticks={5} />
  					<MouseCoordinateY
  						at="right"
  						orient="right"
  						displayFormat={format(".2f")} />
  
  					<RenkoSeries />
  					<OHLCTooltip origin={[-40, 0]}/>
  				</Chart>
  				<Chart id={2}
  					yExtents={d => d.volume}
  					height={150} origin={(w, h) => [0, h - 150]}
  				>
  					<YAxis axisAt="left" orient="left" ticks={5} tickFormat={format(".0s")}/>
  					<MouseCoordinateX
  						at="bottom"
  						orient="bottom"
  						displayFormat={timeFormat("%Y-%m-%d")} />
  					<MouseCoordinateY
  						at="left"
  						orient="left"
  						displayFormat={format(".4s")} />
  					<BarSeries yAccessor={d => d.volume} fill={d => d.close > d.open ? "#6BA583" : "#FF0000"} />
  				</Chart>
  				<CrossHairCursor />
  			</ChartCanvas>
  		);
  	}
  }
  
  Renko.propTypes = {
  	data: PropTypes.array.isRequired,
  	width: PropTypes.number.isRequired,
  	ratio: PropTypes.number.isRequired,
  	type: PropTypes.oneOf(["svg", "hybrid"]).isRequired,
  };
  
  Renko.defaultProps = {
  	type: "svg",
  };
  Renko = fitWidth(Renko);
  
  export default Renko;
  