Renko (React)

The Renko chart uses bricks of uniform size to chart the price movement. When a price moves to a greater or lesser value than the preset boxSize option required to draw a new brick, a new brick is drawn in the succeeding column. The change in box color and direction signifies a trend reversal.

This example uses React.

import "@grapecity/wijmo.styles/wijmo.css"; import "bootstrap.css"; import "./app.css"; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; // import * as wjCore from "@grapecity/wijmo"; import * as wjChart from "@grapecity/wijmo.react.chart"; import * as wjInput from "@grapecity/wijmo.react.input"; import * as wjFinance from "@grapecity/wijmo.react.chart.finance"; import { getData } from "./data"; class App extends React.Component { constructor(props) { super(props); this.state = { data: getData(), rmData: [{ text: 'Fixed', parm: 'Fixed' }, { text: 'Average True Range', parm: 'ATR' }], fieldsData: [{ text: 'High', parm: 'High' }, { text: 'Low', parm: 'Low' }, { text: 'Open', parm: 'Open' }, { text: 'Close', parm: 'Close' }, { text: 'HL AVG.', parm: 'HL2' }, { text: 'HLC Avg.', parm: 'HLC3' }, { text: 'HLOC Avg.', parm: 'HLOC4' }], rangeModeText: 'Fixed', fieldsText: 'Close', options: { renko: { boxSize: 2, rangeMode: 'Fixed', fields: 'Close' } }, style: { stroke: 'rgb(136, 189, 230)', fill: 'rgba(136, 189, 230, 0.701961)' }, altStyle: { stroke: 'rgb(136, 189, 230)', fill: 'transparent' } }; } render() { return <div className="container-fluid"> <div className="panel-group" id="settings"> <div className="panel panel-default"> <div id="settingsBody" className="panel-collapse collapse in"> <div className="panel-body"> <ul className="list-inline"> <li> <label>Box Size</label> <wjInput.InputNumber initialized={this.initializeInput.bind(this)} value={this.state.options.renko.boxSize} min={0} step={1} format="n0" valueChanged={this.boxSizeChanged.bind(this)}> </wjInput.InputNumber> </li> <li> <wjInput.Menu header="Range Mode" value={this.state.options.renko.rangeMode} itemClicked={this.rangeModeChanged.bind(this)}> <wjInput.MenuItem value="Fixed">Fixed</wjInput.MenuItem> <wjInput.MenuItem value="ATR">Average True Range</wjInput.MenuItem> </wjInput.Menu> </li> <li> <wjInput.Menu header="Data Fields" value={this.state.options.renko.fields} itemClicked={this.fieldsChanged.bind(this)}> <wjInput.MenuItem value="High">High</wjInput.MenuItem> <wjInput.MenuItem value="Low">Low</wjInput.MenuItem> <wjInput.MenuItem value="Open">Open</wjInput.MenuItem> <wjInput.MenuItem value="Close">Close</wjInput.MenuItem> <wjInput.MenuItem value="HL2">HL Avg.</wjInput.MenuItem> <wjInput.MenuItem value="HLC3">HLC Avg.</wjInput.MenuItem> <wjInput.MenuItem value="HLOC4">HLOC Avg.</wjInput.MenuItem> </wjInput.Menu> </li> </ul> <ul className="list-inline"> <li> <label>Stroke</label> <wjInput.InputColor value={this.state.style.stroke} valueChanged={this.strokeChanged.bind(this)}></wjInput.InputColor> </li> <li> <label>Alt. Stroke</label> <wjInput.InputColor value={this.state.altStyle.stroke} valueChanged={this.altStrokeChanged.bind(this)}></wjInput.InputColor> </li> </ul> <ul className="list-inline"> <li> <label>Fill</label> <wjInput.InputColor value={this.state.style.fill} valueChanged={this.fillChanged.bind(this)}></wjInput.InputColor> </li> <li> <label>Alt. Fill</label> <wjInput.InputColor value={this.state.altStyle.fill} valueChanged={this.altFillChanged.bind(this)}></wjInput.InputColor> </li> </ul> </div> </div> </div> </div> <wjFinance.FinancialChart initialized={this.initializeChart.bind(this)} itemsSource={this.state.data} bindingX="date" chartType="Renko" options={this.state.options} tooltipContent="tooltip"> <wjFinance.FinancialChartSeries binding="high,low,open,close" name="Facebook" style={this.state.style} altStyle={this.state.altStyle}></wjFinance.FinancialChartSeries> <wjChart.FlexChartLegend position="None"></wjChart.FlexChartLegend> </wjFinance.FinancialChart> </div>; } initializeChart(flex) { this.theChart = flex; this.ser = flex.series[0]; } initializeInput(input) { this.inputNumber = input; } tooltip(ht) { var date = ht.item && ht.item.date ? ht.item.date : null, content = ''; // if (wjCore.isDate(date)) { date = wjCore.Globalize.formatDate(date, 'MM/dd/yy'); } if (ht && ht.item) { content = '<b>' + ht.name + '</b><br/>' + 'Date: ' + date + '<br/>' + 'Open: ' + wjCore.Globalize.format(ht.item.open, 'n2') + '<br/>' + 'High: ' + wjCore.Globalize.format(ht.item.high, 'n2') + '<br/>' + 'Low: ' + wjCore.Globalize.format(ht.item.low, 'n2') + '<br/>' + 'Close: ' + wjCore.Globalize.format(ht.item.close, 'n2') + '<br/>' + 'Volume: ' + wjCore.Globalize.format(ht.item.volume, 'n0'); } return content; } strokeChanged(input) { this.setState({ style: { stroke: input.value, fill: this.state.style.fill } }); this.ser.style.stroke = input.value; this.optionChanged(); } altStrokeChanged(input) { this.setState({ altStyle: { stroke: input.value, fill: this.state.altStyle.fill } }); this.ser.altStyle.stroke = input.value; this.optionChanged(); } fillChanged(input) { this.setState({ style: { fill: input.value, stroke: this.state.style.stroke } }); this.ser.style.fill = input.value; this.optionChanged(); } altFillChanged(input) { this.setState({ altStyle: { fill: input.value, stroke: this.state.altStyle.stroke } }); this.ser.altStyle.fill = input.value; this.optionChanged(); } optionChanged() { if (this.theChart) { this.theChart.invalidate(); } } boxSizeChanged(input) { if (input.value < input.min || (input.max && input.value > input.max)) { return; } this.setState({ options: { renko: { boxSize: input.value } } }); if (this.theChart) { this.theChart.invalidate(); } } rangeModeChanged(menu) { var input = this.inputNumber; let selectedValue = menu.selectedValue; this.setState({ rangeModeText: selectedValue, options: { renko: { rangeMode: selectedValue, boxSize: this.state.options.renko.boxSize, fields: this.state.options.renko.fields, } } }); if (selectedValue === 'ATR') { input.format = 'n0'; input.min = 2; input.max = this.state.data.length - 2; input.value = wjCore.clamp(input.value, 14, this.state.data.length - 2); input.step = 1; } else { input.format = 'n0'; input.min = 1; input.max = null; input.step = 1; } this.optionChanged(); } fieldsChanged(menu) { var input = this.inputNumber; let selectedValue = menu.selectedValue; this.setState({ fieldsText: selectedValue, options: { renko: { boxSize: this.state.options.renko.boxSize, fields: selectedValue, rangeMode: this.state.options.renko.rangeMode } } }); console.log(this.state.options); this.optionChanged(); } } ReactDOM.render(<App />, document.getElementById('app'));
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Renko</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html>
body { margin-bottom: 24px; } label { margin-right: 3px; }
export function getData() { return [ { "date": "05/18/12", "open": 42.05, "high": 45, "low": 38, "close": 38.23, "volume": 580587742 }, { "date": "05/21/12", "open": 36.53, "high": 36.66, "low": 33, "close": 34.03, "volume": 168309831 }, { "date": "05/22/12", "open": 32.61, "high": 33.59, "low": 30.94, "close": 31, "volume": 102053826 }, { "date": "05/23/12", "open": 31.37, "high": 32.5, "low": 31.36, "close": 32, "volume": 73721135 }, { "date": "05/24/12", "open": 32.95, "high": 33.21, "low": 31.77, "close": 33.03, "volume": 50275879 }, { "date": "05/25/12", "open": 32.9, "high": 32.95, "low": 31.11, "close": 31.91, "volume": 37189630 }, { "date": "05/29/12", "open": 31.48, "high": 31.69, "low": 28.65, "close": 28.84, "volume": 78060799 }, { "date": "05/30/12", "open": 28.7, "high": 29.55, "low": 27.86, "close": 28.19, "volume": 57267867 }, { "date": "05/31/12", "open": 28.54, "high": 29.67, "low": 26.83, "close": 29.6, "volume": 111639200 }, { "date": "06/01/12", "open": 28.89, "high": 29.15, "low": 27.39, "close": 27.72, "volume": 41855500 }, { "date": "06/04/12", "open": 27.2, "high": 27.65, "low": 26.44, "close": 26.9, "volume": 35230290 }, { "date": "06/05/12", "open": 26.7, "high": 27.76, "low": 25.75, "close": 25.87, "volume": 42473262 }, { "date": "06/06/12", "open": 26.07, "high": 27.17, "low": 25.52, "close": 26.81, "volume": 61487019 }, { "date": "06/07/12", "open": 27, "high": 27.35, "low": 26.15, "close": 26.31, "volume": 26167757 }, { "date": "06/08/12", "open": 26.55, "high": 27.76, "low": 26.44, "close": 27.1, "volume": 38033420 }, { "date": "06/11/12", "open": 27.18, "high": 28.07, "low": 26.84, "close": 27, "volume": 28225887 }, { "date": "06/12/12", "open": 27.48, "high": 27.77, "low": 26.96, "close": 27.4, "volume": 15822414 }, { "date": "06/13/12", "open": 27.66, "high": 28.1, "low": 27.1, "close": 27.27, "volume": 17118672 }, { "date": "06/14/12", "open": 27.65, "high": 28.32, "low": 27.38, "close": 28.29, "volume": 16854124 }, { "date": "06/15/12", "open": 28.5, "high": 30.1, "low": 28.35, "close": 30.01, "volume": 43563739 }, { "date": "06/18/12", "open": 29.96, "high": 32.08, "low": 29.41, "close": 31.41, "volume": 42978209 }, { "date": "06/19/12", "open": 31.54, "high": 32.18, "low": 30.7, "close": 31.91, "volume": 30848913 }, { "date": "06/20/12", "open": 31.92, "high": 31.93, "low": 31.15, "close": 31.6, "volume": 15558921 }, { "date": "06/21/12", "open": 31.67, "high": 32.5, "low": 31.51, "close": 31.84, "volume": 21875228 }, { "date": "06/22/12", "open": 32.41, "high": 33.45, "low": 32.06, "close": 33.05, "volume": 74833976 }, { "date": "06/25/12", "open": 32.86, "high": 33.02, "low": 31.55, "close": 32.06, "volume": 24352818 }, { "date": "06/26/12", "open": 32.69, "high": 33.44, "low": 32.5, "close": 33.1, "volume": 24858611 }, { "date": "06/27/12", "open": 32.46, "high": 32.9, "low": 31.9, "close": 32.23, "volume": 28599506 }, { "date": "06/28/12", "open": 31.96, "high": 32.19, "low": 30.9, "close": 31.36, "volume": 17713292 }, { "date": "06/29/12", "open": 31.92, "high": 31.99, "low": 30.76, "close": 31.1, "volume": 19526823 }, { "date": "07/02/12", "open": 31.25, "high": 31.73, "low": 30.55, "close": 30.77, "volume": 14131476 }, { "date": "07/03/12", "open": 30.91, "high": 31.44, "low": 30.8, "close": 31.2, "volume": 8765498 }, { "date": "07/05/12", "open": 31.32, "high": 31.62, "low": 31.02, "close": 31.47, "volume": 10036688 }, { "date": "07/06/12", "open": 31.44, "high": 31.9, "low": 31.26, "close": 31.73, "volume": 10949006 }, { "date": "07/09/12", "open": 32.1, "high": 32.88, "low": 31.99, "close": 32.17, "volume": 17785180 }, { "date": "07/10/12", "open": 32.43, "high": 32.48, "low": 31.16, "close": 31.47, "volume": 14276996 }, { "date": "07/11/12", "open": 31.48, "high": 31.56, "low": 30.55, "close": 30.97, "volume": 13027752 }, { "date": "07/12/12", "open": 30.7, "high": 31.4, "low": 30.6, "close": 30.81, "volume": 11306636 }, { "date": "07/13/12", "open": 31.04, "high": 31.07, "low": 30.56, "close": 30.72, "volume": 8117346 }, { "date": "07/16/12", "open": 30.5, "high": 30.5, "low": 28.21, "close": 28.24, "volume": 24672074 }, { "date": "07/17/12", "open": 28.48, "high": 28.59, "low": 27.15, "close": 28.09, "volume": 30438551 }, { "date": "07/18/12", "open": 28.31, "high": 29.29, "low": 28.15, "close": 29.11, "volume": 16841779 }, { "date": "07/19/12", "open": 29.41, "high": 29.5, "low": 28.63, "close": 29, "volume": 13685031 }, { "date": "07/20/12", "open": 29, "high": 29.47, "low": 28.72, "close": 28.76, "volume": 11869046 }, { "date": "07/23/12", "open": 28.12, "high": 29, "low": 28.01, "close": 28.75, "volume": 12393864 }, { "date": "07/24/12", "open": 28.82, "high": 29.45, "low": 28.1, "close": 28.45, "volume": 11539799 }, { "date": "07/25/12", "open": 28.39, "high": 29.49, "low": 28.08, "close": 29.34, "volume": 17230154 }, { "date": "07/26/12", "open": 27.75, "high": 28.23, "low": 26.73, "close": 26.84, "volume": 64597378 }, { "date": "07/27/12", "open": 23.19, "high": 24.54, "low": 22.28, "close": 23.7, "volume": 123098340 }, { "date": "07/30/12", "open": 24, "high": 24.04, "low": 23.03, "close": 23.15, "volume": 29285895 }, { "date": "07/31/12", "open": 23.37, "high": 23.37, "low": 21.61, "close": 21.71, "volume": 56179322 }, { "date": "08/01/12", "open": 21.5, "high": 21.58, "low": 20.84, "close": 20.88, "volume": 44604365 }, { "date": "08/02/12", "open": 20.77, "high": 20.84, "low": 19.82, "close": 20.04, "volume": 56374436 }, { "date": "08/03/12", "open": 20.36, "high": 22.16, "low": 19.9, "close": 21.09, "volume": 80646975 }, { "date": "08/06/12", "open": 21.39, "high": 22.15, "low": 21.3, "close": 21.92, "volume": 27778038 }, { "date": "08/07/12", "open": 22.2, "high": 22.45, "low": 20.5, "close": 20.72, "volume": 36782827 }, { "date": "08/08/12", "open": 20.71, "high": 21.15, "low": 20.22, "close": 20.72, "volume": 29537376 }, { "date": "08/09/12", "open": 20.75, "high": 21.17, "low": 20.61, "close": 21.01, "volume": 15618515 }, { "date": "08/10/12", "open": 21.41, "high": 21.82, "low": 21.13, "close": 21.81, "volume": 25794673 }, { "date": "08/13/12", "open": 22.15, "high": 22.45, "low": 21.4, "close": 21.6, "volume": 24972973 }, { "date": "08/14/12", "open": 21.41, "high": 21.6, "low": 20.25, "close": 20.38, "volume": 39308634 }, { "date": "08/15/12", "open": 20.64, "high": 21.41, "low": 20.4, "close": 21.2, "volume": 47860767 }, { "date": "08/16/12", "open": 20.44, "high": 20.48, "low": 19.69, "close": 19.87, "volume": 157554938 }, { "date": "08/17/12", "open": 20, "high": 20.08, "low": 19, "close": 19.05, "volume": 129293342 }, { "date": "08/20/12", "open": 19.05, "high": 20.13, "low": 18.75, "close": 20.01, "volume": 101186524 }, { "date": "08/21/12", "open": 19.58, "high": 19.98, "low": 19.09, "close": 19.16, "volume": 70640462 }, { "date": "08/22/12", "open": 19.36, "high": 19.53, "low": 18.96, "close": 19.44, "volume": 49892130 }, { "date": "08/23/12", "open": 19.5, "high": 19.73, "low": 19.36, "close": 19.44, "volume": 32813310 }, { "date": "08/24/12", "open": 19.52, "high": 19.68, "low": 19.25, "close": 19.41, "volume": 29622155 }, { "date": "08/27/12", "open": 19.49, "high": 19.53, "low": 19.1, "close": 19.15, "volume": 20703907 }, { "date": "08/28/12", "open": 19.1, "high": 19.38, "low": 18.95, "close": 19.34, "volume": 25425786 }, { "date": "08/29/12", "open": 19.32, "high": 19.38, "low": 19.07, "close": 19.1, "volume": 16124625 }, { "date": "08/30/12", "open": 19.27, "high": 19.45, "low": 19.06, "close": 19.09, "volume": 30647472 }, { "date": "08/31/12", "open": 18.68, "high": 18.7, "low": 18.03, "close": 18.06, "volume": 58764170 }, { "date": "09/04/12", "open": 18.08, "high": 18.27, "low": 17.55, "close": 17.73, "volume": 46622354 }, { "date": "09/05/12", "open": 18.27, "high": 18.75, "low": 18.18, "close": 18.58, "volume": 60781719 }, { "date": "09/06/12", "open": 18.74, "high": 19.26, "low": 18.72, "close": 18.96, "volume": 46066347 }, { "date": "09/07/12", "open": 19.1, "high": 19.42, "low": 18.78, "close": 18.98, "volume": 36371696 }, { "date": "09/10/12", "open": 19.06, "high": 19.2, "low": 18.55, "close": 18.81, "volume": 24797642 }, { "date": "09/11/12", "open": 18.92, "high": 19.58, "low": 18.85, "close": 19.43, "volume": 50508126 }, { "date": "09/12/12", "open": 20.76, "high": 21.16, "low": 20.28, "close": 20.93, "volume": 121583996 }, { "date": "09/13/12", "open": 20.96, "high": 21.48, "low": 20.61, "close": 20.71, "volume": 65041524 }, { "date": "09/14/12", "open": 21.13, "high": 22.08, "low": 20.9, "close": 22, "volume": 72819643 }, { "date": "09/17/12", "open": 22.67, "high": 22.75, "low": 21.5, "close": 21.52, "volume": 50666447 }, { "date": "09/18/12", "open": 21.6, "high": 21.98, "low": 21.37, "close": 21.87, "volume": 36760449 }, { "date": "09/19/12", "open": 21.99, "high": 23.37, "low": 21.77, "close": 23.29, "volume": 78782783 }, { "date": "09/20/12", "open": 23.02, "high": 23.24, "low": 22.54, "close": 22.59, "volume": 57248663 }, { "date": "09/21/12", "open": 22.97, "high": 23.24, "low": 22.6, "close": 22.86, "volume": 51218097 }, { "date": "09/24/12", "open": 21.77, "high": 21.98, "low": 20.36, "close": 20.79, "volume": 79105121 }, { "date": "09/25/12", "open": 21.2, "high": 21.21, "low": 20.22, "close": 20.28, "volume": 46291655 }, { "date": "09/26/12", "open": 20.14, "high": 20.78, "low": 19.8, "close": 20.62, "volume": 38271878 }, { "date": "09/27/12", "open": 20.99, "high": 21, "low": 20.16, "close": 20.32, "volume": 30215821 }, { "date": "09/28/12", "open": 20.57, "high": 21.95, "low": 20.5, "close": 21.66, "volume": 65485921 }, { "date": "10/01/12", "open": 22.08, "high": 22.59, "low": 21.73, "close": 21.99, "volume": 51262680 }, { "date": "10/02/12", "open": 22.08, "high": 22.49, "low": 21.82, "close": 22.27, "volume": 29341393 }, { "date": "10/03/12", "open": 22.3, "high": 22.49, "low": 21.8, "close": 21.83, "volume": 32000079 }, { "date": "10/04/12", "open": 22.32, "high": 22.4, "low": 21.41, "close": 21.95, "volume": 46894595 }, { "date": "10/05/12", "open": 21.49, "high": 21.63, "low": 20.88, "close": 20.91, "volume": 40529223 }, { "date": "10/08/12", "open": 20.62, "high": 20.75, "low": 20.16, "close": 20.4, "volume": 32236628 }, { "date": "10/09/12", "open": 20.39, "high": 20.55, "low": 19.97, "close": 20.23, "volume": 27161736 }, { "date": "10/10/12", "open": 19.93, "high": 19.94, "low": 19.45, "close": 19.64, "volume": 39321758 }, { "date": "10/11/12", "open": 19.88, "high": 19.96, "low": 19.61, "close": 19.75, "volume": 21817227 }, { "date": "10/12/12", "open": 19.75, "high": 19.8, "low": 19.48, "close": 19.52, "volume": 18809397 }, { "date": "10/15/12", "open": 19.68, "high": 19.88, "low": 19.49, "close": 19.52, "volume": 20189668 }, { "date": "10/16/12", "open": 19.68, "high": 19.69, "low": 19.3, "close": 19.48, "volume": 21834687 }, { "date": "10/17/12", "open": 19.5, "high": 20.48, "low": 19.37, "close": 19.88, "volume": 44074433 }, { "date": "10/18/12", "open": 19.7, "high": 19.79, "low": 18.89, "close": 18.98, "volume": 52157366 }, { "date": "10/19/12", "open": 19, "high": 19.06, "low": 18.8, "close": 19, "volume": 34834947 }, { "date": "10/22/12", "open": 19.2, "high": 19.43, "low": 19.05, "close": 19.32, "volume": 32447005 }, { "date": "10/23/12", "open": 19.25, "high": 19.8, "low": 19.1, "close": 19.5, "volume": 78381102 }, { "date": "10/24/12", "open": 24.13, "high": 24.25, "low": 22.85, "close": 23.23, "volume": 228949142 }, { "date": "10/25/12", "open": 23.29, "high": 23.31, "low": 22.47, "close": 22.56, "volume": 76141922 }, { "date": "10/26/12", "open": 22.4, "high": 22.88, "low": 21.88, "close": 21.94, "volume": 73259521 }, { "date": "10/31/12", "open": 20.82, "high": 21.5, "low": 20.73, "close": 21.11, "volume": 99378184 }, { "date": "11/01/12", "open": 21.08, "high": 21.44, "low": 21.01, "close": 21.21, "volume": 37713887 }, { "date": "11/02/12", "open": 21.26, "high": 21.69, "low": 21.07, "close": 21.18, "volume": 38344332 }, { "date": "11/05/12", "open": 21.1, "high": 21.48, "low": 20.92, "close": 21.25, "volume": 31806692 }, { "date": "11/06/12", "open": 21.24, "high": 21.37, "low": 20.99, "close": 21.17, "volume": 29062642 }, { "date": "11/07/12", "open": 20.85, "high": 20.95, "low": 20.37, "close": 20.47, "volume": 33396731 }, { "date": "11/08/12", "open": 20.52, "high": 20.73, "low": 19.98, "close": 19.99, "volume": 34254535 }, { "date": "11/09/12", "open": 19.96, "high": 20, "low": 19.13, "close": 19.21, "volume": 42295434 }, { "date": "11/12/12", "open": 19.15, "high": 20.17, "low": 18.87, "close": 20.07, "volume": 67349109 }, { "date": "11/13/12", "open": 19.6, "high": 20.11, "low": 19.56, "close": 19.86, "volume": 71775069 }, { "date": "11/14/12", "open": 20.1, "high": 22.5, "low": 19.93, "close": 22.36, "volume": 229750911 }, { "date": "11/15/12", "open": 22.34, "high": 22.5, "low": 21.65, "close": 22.17, "volume": 78857405 }, { "date": "11/16/12", "open": 22.25, "high": 23.93, "low": 22.18, "close": 23.56, "volume": 107182168 }, { "date": "11/19/12", "open": 23.96, "high": 24.12, "low": 22.82, "close": 22.92, "volume": 85021259 }, { "date": "11/20/12", "open": 22.73, "high": 23.9, "low": 22.7, "close": 23.1, "volume": 46655291 }, { "date": "11/21/12", "open": 23.22, "high": 24.53, "low": 23.05, "close": 24.32, "volume": 89862342 }, { "date": "11/23/12", &