CODEWITHSUNDEEP
reactjshighcharts
Shankar
Shankar

Reputation: 175

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);

Upvotes: 1

Views: 3687

Answers (2)

Will Hawker
Will Hawker

Reputation: 733

I know I'm 7 months late to this, but looks like the clue lies in 

You may have returned undefined, an array or some other invalid object

You are returning this.state.data.map which will return an array.

I would suggest you try

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

Upvotes: 0

daniel_s
daniel_s

Reputation: 3732

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

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

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

Upvotes: 2

Related Questions