Rendering multiple charts with React

Question

I am a newbie to React, Highcharts and UI developing in general. I would like to render multiple charts from an array of data. Currently, the page displays only the last chart - from the last data in the array.

function chartToRender(seriesArr){
//console.log(JSON.stringify(application));
 var Chart = React.createClass({
     // When the DOM is ready, create the chart.
     componentDidMount: function() {
       // Extend Highcharts with modules
       if (this.props.modules) {
         this.props.modules.forEach(function(module) {
           module(Highcharts);
         });
       }
       // Set container which the chart should render to.
       this.chart = new Highcharts[this.props.type || "Chart"](
         this.props.container,
         this.props.options
       );
     },
     //Destroy chart before unmount.
     componentWillUnmount: function() {
       this.chart.destroy();
     },
     //Create the div which the chart will be rendered to.
     render: function() {
       return React.createElement('div', {
         id: this.props.container
       });
     }
   }), element2;



return seriesArr.map(application => 
 element2 = React.createElement(Chart, {
     container: 'stockChart',
     type: 'stockChart',
     options: {
       rangeSelector: {
         selected: 0
       },
       title: {
         text: application.app_name + ' application Free Memory'
       },
       tooltip: {
         style: {
           width: '200px'
         },
         valueDecimals: 4,
         shared: true
       },
       xAxis:{
         type:'datetime',
         //categories : timeSeries,
         dateTimeLabelFormats : {
             millisecond: '%Y-%m-%dT%H:%M:%S.%L'
         }
       },
       yAxis: {
         title: {
           text: 'Free Memory'
         }
       },
       series: application.series
     }
   })

)

 }

Currently, I am calling this function through the render function on the class

render() {

    var seriesArr = getSeriesArr(this.props)


    return(

    <div>
        <div className="row">
            <ul>            
                {chartToRender(seriesArr)}
            </ul>
        </div>
    </div>                   

    )
}

How can I display all the charts on the page one below the other? the "seriesArr" variable has all the data required to render the charts.

Looks like you've missed out some code - there's no chartToRender() function anywhere. Possibly an issue at the end of the Chart component? — Duncan Thacker
– Duncan Thacker, Commented Sep 19, 2017 at 21:14
Hi Duncan, thanks for your time. I've edited the question to show the function I use. The function just defines the Chart class and uses it to create the Element to render — user2405589
– user2405589, Commented Sep 19, 2017 at 21:23
Stil looks a bit weird - what's with the }), element2; line after your createClass(). Is that deliverate? — Duncan Thacker
– Duncan Thacker, Commented Sep 20, 2017 at 11:18
Duncan, I am just declaring 2 variables - Chart and element2. — user2405589
– user2405589, Commented Sep 20, 2017 at 17:26

monkeyjumps · Accepted Answer · 2017-09-19 21:24:42Z

1

Try pushing your dynamically created Chart components into an array and then render the array. That should get you going in the right direction.

 let charts =[];
    charts =   seriesArr.map(application => 
    element2 = React.createElement(Chart, {
     container: 'stockChart',
     type: 'stockChart',
     options: {
       rangeSelector: {
         selected: 0
       },
       title: {
         text: application.app_name + ' application Free Memory'
       },
       tooltip: {
         style: {
           width: '200px'
         },
         valueDecimals: 4,
         shared: true
       },
       xAxis:{
         type:'datetime',
         //categories : timeSeries,
         dateTimeLabelFormats : {
             millisecond: '%Y-%m-%dT%H:%M:%S.%L'
         }
       },
       yAxis: {
         title: {
           text: 'Free Memory'
         }
       },
       series: application.series
     }
   })    
    )

render() {   

     return(

        <div>
            <div className="row">
                <ul>            
                    {charts}
                </ul>
            </div>
        </div>                   

        )
    }

answered Sep 19, 2017 at 21:24

monkeyjumps

7121 gold badge15 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user2405589 Over a year ago

I created the charts array - exactly as you said, but I still am displaying the last chart.

user2405589 Over a year ago

I've even checked that the array has 9 chart elements , but the page displays only the last one.

monkeyjumps Over a year ago

try inspecting the html. Also inspect the scope of element2, that is not clear to me in your code sample.

user2405589 Over a year ago

Ahh the problem was the key wasn't unique within the Chart Component each time. Thanks for your help

Collectives™ on Stack Overflow

Rendering multiple charts with React

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related