Rendering multiple graphs in react js from canvasjs - reactjs

Question

I would like to render the stockprice graph referred from https://canvasjs.com/react-stockcharts/stockchart-date-time-axis-react/
import React, { Component } from 'react';
import CanvasJSReact from '../../assets/canvasjs.react';
var CanvasJSChart = CanvasJSReact.CanvasJSChart;
var CanvasJSStockChart = CanvasJSReact.CanvasJSStockChart;
class Chart extends Component {
render() {
const options = {
theme: "light2",
title:{
text:"React StockChart with Date-Time Axis"
},
subtitles: [{
text: "Price-Volume Trend"
}],
charts: [{
axisX: {
lineThickness: 5,
tickLength: 0,
labelFormatter: function(e) {
return "";
},
crosshair: {
enabled: true,
snapToDataPoint: true,
labelFormatter: function(e) {
return "";
}
}
},
axisY: {
title: "Litecoin Price",
prefix: "$",
tickLength: 0
},
toolTip: {
shared: true
},
data: [{
name: "Price (in USD)",
yValueFormatString: "$#,###.##",
type: "candlestick",
dataPoints : [
{ x: new Date("2016, 01, 01"), y: [36.040001, 37.500000, 35.790001, 36.950001] },
{ x: new Date("2016, 02, 01"), y: [37.099998, 39.720001, 37.060001, 39.169998] },
{ x: new Date("2016, 03, 01"), y: [38.669998, 39.360001, 37.730000, 38.820000] },
{ x: new Date("2016, 04, 01"), y: [38.869999, 39.669998, 37.770000, 39.150002] },
{ x: new Date("2016, 05, 01"), y: [39.099998, 43.419998, 38.580002, 43.209999] },
{ x: new Date("2016, 06, 01"), y: [43.209999, 43.889999, 41.700001, 43.290001] },
{ x: new Date("2016, 07, 01"), y: [43.250000, 43.500000, 40.549999, 40.880001] },
{ x: new Date("2016, 08, 01"), y: [40.849998, 41.700001, 39.549999, 40.610001] },
{ x: new Date("2016, 09, 01"), y: [40.619999, 41.040001, 36.270000, 36.790001] },
{ x: new Date("2016, 10, 01"), y: [36.970001, 39.669998, 36.099998, 38.630001] },
{ x: new Date("2016, 11, 01"), y: [38.630001, 42.840000, 38.160000, 40.380001] }
]
}]
},{
height: 100,
axisX: {
crosshair: {
enabled: true,
snapToDataPoint: true
}
},
axisY: {
title: "Volume",
prefix: "$",
tickLength: 0
},
toolTip: {
shared: true
},
data: [{
name: "Volume",
type: "column",
dataPoints : [
{ x: new Date("2016, 01, 01"), y: [100, 40] },
{ x: new Date("2016, 02, 01"), y: [50,60] },
{ x: new Date("2016, 03, 01"), y: [60, -50] },
{ x: new Date("2016, 04, 01"), y: [-50, 20] },
{ x: new Date("2016, 05, 01"), y: [20, -40] },
{ x: new Date("2016, 06, 01"), y: [43.209999, 43.290001] },
{ x: new Date("2016, 07, 01"), y: [43.250000, 40.880001] },
{ x: new Date("2016, 08, 01"), y: [40.849998, 40.610001] },
{ x: new Date("2016, 09, 01"), y: [40.619999, 36.790001] },
{ x: new Date("2016, 10, 01"), y: [36.970001, 38.630001] },
{ x: new Date("2016, 11, 01"), y: [38.630001, 40.380001] }
]
}]
}]
};
const containerProps = {
width: "100%",
height: "450px",
margin: "auto"
};
return (
<div>
<div>
{
// Reference: https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator
this.state.isLoaded &&
<CanvasJSStockChart containerProps={containerProps} options = {options}
/* onRef = {ref => this.chart = ref} */
/>
}
</div>
</div>
);
}
}
export default Chart;
Here is how I have tried. I found a single chart is rendered but more than one chart by using charts: [{}] isn't working. It shows nothing on my brower.
Has anybody had this kind of issue before? Do you think the reason is because I am using canvasjs graphs for free?

Answer 1

In case of column chart datapoints, y-value should be numeric but you are passing it as an array. If you like to show multiple values (a range) in y-value, you can use Range-Column Chart. Please find the working code below. Checkout this working sample.
import React, { Component } from 'react';
import CanvasJSReact from '../../assets/canvasjs.react';
var CanvasJSChart = CanvasJSReact.CanvasJSChart;
var CanvasJSStockChart = CanvasJSReact.CanvasJSStockChart;
class Chart extends Component {
render() {
const options = {
theme: "light2",
title:{
text:"React StockChart with Date-Time Axis"
},
subtitles: [{
text: "Price-Volume Trend"
}],
charts: [{
axisX: {
lineThickness: 5,
tickLength: 0,
labelFormatter: function(e) {
return "";
},
crosshair: {
enabled: true,
snapToDataPoint: true,
labelFormatter: function(e) {
return "";
}
}
},
axisY: {
title: "Litecoin Price",
prefix: "$",
tickLength: 0
},
toolTip: {
shared: true
},
data: [{
name: "Price (in USD)",
yValueFormatString: "$#,###.##",
type: "candlestick",
dataPoints : [
{ x: new Date("2016, 01, 01"), y: [36.040001, 37.500000, 35.790001, 36.950001] },
{ x: new Date("2016, 02, 01"), y: [37.099998, 39.720001, 37.060001, 39.169998] },
{ x: new Date("2016, 03, 01"), y: [38.669998, 39.360001, 37.730000, 38.820000] },
{ x: new Date("2016, 04, 01"), y: [38.869999, 39.669998, 37.770000, 39.150002] },
{ x: new Date("2016, 05, 01"), y: [39.099998, 43.419998, 38.580002, 43.209999] },
{ x: new Date("2016, 06, 01"), y: [43.209999, 43.889999, 41.700001, 43.290001] },
{ x: new Date("2016, 07, 01"), y: [43.250000, 43.500000, 40.549999, 40.880001] },
{ x: new Date("2016, 08, 01"), y: [40.849998, 41.700001, 39.549999, 40.610001] },
{ x: new Date("2016, 09, 01"), y: [40.619999, 41.040001, 36.270000, 36.790001] },
{ x: new Date("2016, 10, 01"), y: [36.970001, 39.669998, 36.099998, 38.630001] },
{ x: new Date("2016, 11, 01"), y: [38.630001, 42.840000, 38.160000, 40.380001] }
]
}]
},{
height: 100,
axisX: {
crosshair: {
enabled: true,
snapToDataPoint: true
}
},
axisY: {
title: "Volume",
prefix: "$",
tickLength: 0
},
toolTip: {
shared: true
},
data: [{
name: "Volume",
type: "rangeColumn",
dataPoints : [
{ x: new Date("2016, 01, 01"), y: [100, 40] },
{ x: new Date("2016, 02, 01"), y: [50,60] },
{ x: new Date("2016, 03, 01"), y: [60, -50] },
{ x: new Date("2016, 04, 01"), y: [-50, 20] },
{ x: new Date("2016, 05, 01"), y: [20, -40] },
{ x: new Date("2016, 06, 01"), y: [43.209999, 43.290001] },
{ x: new Date("2016, 07, 01"), y: [43.250000, 40.880001] },
{ x: new Date("2016, 08, 01"), y: [40.849998, 40.610001] },
{ x: new Date("2016, 09, 01"), y: [40.619999, 36.790001] },
{ x: new Date("2016, 10, 01"), y: [36.970001, 38.630001] },
{ x: new Date("2016, 11, 01"), y: [38.630001, 40.380001] }
]
}]
}]
};
const containerProps = {
width: "100%",
height: "450px",
margin: "auto"
};
return (
<div>
<div>
{
// Reference: https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator
this.state.isLoaded &&
<CanvasJSStockChart containerProps={containerProps} options = {options}
/* onRef = {ref => this.chart = ref} */
/>
}
</div>
</div>
);
}
}
export default Chart;