Multi tool use

React HighChart Example

I m using React-js-highcharts, and i have done the below code, getting data e.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
error.

Kindly help me to sort out this.

Have followed this example.

https://github.com/whawker/react-jsx-highcharts/blob/gh-pages/examples/SimpleLine/App.js

import React from 'react';
import Highcharts from 'highcharts';
import {
HighchartsChart, Chart, withHighcharts, XAxis, YAxis, Title, Subtitle, Legend, LineSeries
} from 'react-jsx-highcharts';
import { extent as d3ArrayExtent } from 'd3-array';


const plotOptions = {
series: {
pointStart: 2010
}
};

class ProductHealth extends React.Component {
constructor(props) {
super(props);
this.state = {
data: ,
}
}

componentDidMount() {

let defaultOptions = {
method:'GET',
headers:{
Accept: 'application/json',
}
};

fetch('http://localhost:3000/health', defaultOptions)
.then(function(response) {
// The response is a Response instance.
// You parse the data into a useable format using `.json()`
let resData = response.json();
return resData;
}).then(response => {
console.log("Response",response);
this.processResponseData(response);
}).catch(function(error){ console.log(error) })
}

processResponseData = (response) => {
let apiValues = ;
response.forEach(element => {
let value = ;
element.values.forEach(item => {
value.push(
[item.count]
);
})

apiValues.push({
name : element.api,
value : value
})
});

this.setState({
data : apiValues
});
};



renderLineChart() {
return this.state.data.map((lineData, index) => {
return (
<LineSeries key={index} name={lineData.api} data={lineData.value} />
)
})
}

render() {
if (this.state.data.length > 0) {
return (

<div>
<HighchartsChart plotOptions={plotOptions}>
<Chart />

<Title>Visa Direct Data</Title>
<Legend layout="vertical" align="right" verticalAlign="middle" />
<XAxis>
<XAxis.Title>Time</XAxis.Title>
</XAxis>
<YAxis>
<YAxis.Title>API Calls</YAxis.Title>
{this.renderLineChart()}
</YAxis>
</HighchartsChart>
</div>
);
} else {
return <div>Loading...</div>;

}
}
}

export default withHighcharts(ProductHealth, Highcharts);


1 Answer
1

I strongly recommend you to try to use our official React wrapper which is also available to download through npm.

npm

Here is the link to package: https://www.npmjs.com/package/highcharts-react-official

GitHub repository: https://github.com/highcharts/highcharts-react

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.