Example shows React OHLC Chart Combined with Line Chart showing trend. Data is fetched from JSON using AJAX.
/* App.js */ import React, { Component } from 'react'; import CanvasJSReact from '@canvasjs/react-charts'; //let CanvasJSReact = require('@canvasjs/react-charts'); let CanvasJS = CanvasJSReact.CanvasJS; let CanvasJSChart = CanvasJSReact.CanvasJSChart; class App extends Component { constructor() { super(); this.state = { dps1: [], isLoaded: false }; this.calculateTrendLine = this.calculateTrendLine.bind(this); } componentDidMount() { fetch('https://canvasjs.com/data/docs/btcusd2018.json') .then(res => res.json()) .then((data) => { let dps = []; for (let i = 0; i < data.length; i++) { dps.push({ x: new Date(data[i].date), y: [Number(data[i].open), Number(data[i].high), Number(data[i].low), Number(data[i].close)] }); } this.setState({ isLoaded: true, dps1: dps }, () => { if (this.chart.data.length === 1) this.calculateTrendLine(); }); }); } calculateTrendLine() { let a, b, c, d, e, slope, yIntercept; let chart = this.chart; let xSum = 0, ySum = 0, xySum = 0, xSquare = 0, dpsLength = chart.data[0].dataPoints.length; for (let i = 0; i < dpsLength; i++) xySum += (chart.data[0].dataPoints[i].x.getTime() * chart.data[0].dataPoints[i].y[3]) a = xySum * dpsLength; for (let i = 0; i < dpsLength; i++) { xSum += chart.data[0].dataPoints[i].x.getTime(); ySum += chart.data[0].dataPoints[i].y[3]; } b = xSum * ySum; for (let i = 0; i < dpsLength; i++) xSquare += Math.pow(chart.data[0].dataPoints[i].x.getTime(), 2); c = dpsLength * xSquare; d = Math.pow(xSum, 2); slope = (a - b) / (c - d); e = slope * xSum; yIntercept = (ySum - e) / dpsLength; let startPoint = this.getTrendLinePoint(chart.data[0].dataPoints[0].x, slope, yIntercept); let endPoint = this.getTrendLinePoint(chart.data[0].dataPoints[dpsLength - 1].x, slope, yIntercept); this.chart.addTo("data", { type: "line", //Line series showing trend markerSize: 0, name: "Trend", showInLegend: true, color: "#E64A19", yValueFormatString: "$#,###.00", dataPoints: [startPoint, endPoint] }); } getTrendLinePoint(x, slope, intercept) { return { x: x, y: ((slope * x) + intercept) }; } render() { const options = { theme: "light2", zoomEnabled: true, title: { text: "Bitcoin Price" }, axisY: { title: "Price in USD", prefix: "$" }, axisX: { valueFormatString: "MMM", }, legend: { verticalAlign: "bottom", cursor: "pointer", itemclick: function (e) { if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) { e.dataSeries.visible = false; } else { e.dataSeries.visible = true; } e.chart.render(); } }, toolTip: { shared: true }, data: [{ type: "ohlc", showInLegend: true, name: "Bitcoin Price", yValueFormatString: "$#,###.00", xValueType: "dateTime", dataPoints: this.state.dps1 }] }; return ( <div> { this.state.isLoaded && <CanvasJSChart options={options} onRef={ref => this.chart = ref} /> } </div> ); } } export default App;
You can control the visibility of a dataseries by setting visible property. Other frequently used customization options are color, showInLegend, legendText etc.
Note For step by step instructions, follow our React Integration Tutorial