chartjs-plugin-datasource implementation in React (react2chartjs)

Question

as the title suggest, i am trying to import data from Excel and display it as charts using ChartJs. Got some idea based on this question : ( Import data from Excel and use in Chart.js ) and got it working.

But what im trying to do now is to implement this in React using react2chartjs. But failed to do so, got error 'ChartDataSource' is not defined. When i did define it like this:-

import ChartDataSource from 'chartjs-plugin-datasource';

The error resides but the chart display no information Any idea?.

THE CODE

import React, {Component} from "react";
import {Bar} from 'react-chartjs-2';
import 'chartjs-plugin-datasource';

class Chart extends Component {
    constructor(props){
        super(props);
        this.state = {
            chartData:{
                datasets: [
                    {
                    hoverBorderWidth:5,
                    hoverBorderColor:'black',
                    pointStyle: 'rect',
                    backgroundColor:'green'
                    //backgroundColor:Array.apply(null, Array(4)).map(_ => getRandomColor())
                    },
                    {
                    hoverBorderWidth:5,
                    hoverBorderColor:'black',
                    pointStyle: 'rect',
                    backgroundColor:'red'
                    //backgroundColor:Array.apply(null, Array(4)).map(_ => getRandomColor())
                    }

                ]
            }
        }
    }

    render() {
        const option = {
            title:{
                display:true,
                text: 'Test Chart',
                fontSize:23,
            },
            legend:{
                display:true,
                position:'top',
                labels:{
                    fontColor:'Black',
                    usePointStyle: true
                }
            },
            layout:{
                padding:{
                    left:0,
                    right:0,
                    bottom:0,
                    top:0
                }
            },
            tooltips:{
                enabled:true
            },
            scales: {
                    yAxes: [{
                        ticks: {
                            suggestedMin: 0,
                        }
                    }]
            },

            plugins: {
                datasource: {
                url: 'Book1.xlsx',
                rowMapping: 'index'
                }
            }
        }

        return (
            <div className="Chart">
                <Bar
                    data={this.chartData}
                    options={option}
                    plugins={ChartDataSource}
                />
            </div>
        )
    }
}

export default Chart;

Answer 1

I know this is old, but in case anyone else comes here for a similar issue.

   <Bar
          data={chartData}
          plugins={[ChartDataSource]}// pass as array
          options={option}
        />

and url: 'Book1.xlsx' means you have Book1.xlsx in Your project\\public\\Book1.xlsx