Show the latest labels in a bar chart with React.js using react-chartjs

Question

I am working on creating a bar chart in React.js using react-chartjs library. I am able to get the bar chart to display but since my data is huge and it is collected for every 10 seconds. The bar chart displays something like

My dataset for it looks like

var loadData = [{
    options: {
        elements: {
            rectangle: {
              borderWidth: 2,
              borderColor: 'rgb(0, 255, 0)',
              borderSkipped: 'bottom'
            }
        },
        responsive: true,
        legend: {
            position: 'top'
        },
        title: {
            display: true,
            text: 'ETL Load Chart'
        },
        scales: {
            xAxes: [{
                type: 'time',
                ticks: {
                    autoSkip:true,
                    maxTicksLimit:20
                }
           }]
        }
    },
    data: {
        labels: [],
        datasets: [
            {

                backgroundColor: "rgba(220,220,220,0.5)",
                data: []
            }
        ]
    }
}]

I am updating the the data with the help of a library immutability-helpers

case 'GET_LOAD_DATA_RECEIVED': 
            var payload = action.data.payload
            var dataValues = [], labelValues = [];
            payload.forEach(function(item){
                dataValues.push(parseInt(item['recs_upd']) + 1);
                labelValues.push(item['from_ts']);
            })
            return update(state, {
                0: {
                    data: {
                        labels: {
                            $push: labelValues
                        },
                        datasets: {
                            0: {
                                data: {
                                    $push: dataValues
                                }
                            }
                        }   
                    }
                }
            })
            break;

and I am calling the rendering of Chart like

<Bar data={this.props.loadInfo[0].data} options={this.props.loadInfo[0].options} width="600" height="250" />

I am using "react-chartjs": "^0.8.0", and "chart.js": "^1.1.1" I couldn't update to 2.0 in chart.js were I saw something called showXlabels being present since react-chartjs supports the current version.

Thanks for any help.

Answer 1

Pass only the latest n number of data for every 10 seconds.

const updatedData = {...this.props.loadInfo[0]}

const newData = {
  data: {
    labels: [...updatedData.labels].reverse().slice(0, 30).reverse(),
    datasets: [...updatedData.datasets].reverse().slice(0, 30).reverse(),
  }
}

const newLimitedData = {...updatedData, ...newData }

<Bar data={newLimitedData.data} options={newLimitedData.options} width="600" height="250" />

Hope this helps!