in

SPFX with ChartJS v3 Property ‘datasets’ is missing in type ‘{}’ but required in type ‘ChartData<"bar", number[], unknown>


I am currently building spfx dashboard using react+ chartjs.
Everything is working with mock up data, the issues comes when I am trying to call a webservice from SP List.

I use Bar chart component and data to pass the properties. I created a public method to iterate with my state and pass the datasets. Here is where I get the error with datasets is missing in type

 `import * as React from "react";
import { IDashoardProps } from './IDashoardProps'
import { IListItem } from "../../../services/SharePoint/IListItem";
import SPServices from "../../../services/SPServices";
import { Bar, Line } from 'react-chartjs-2';
import { Chart, registerables, CategoryScale, LineController, LineElement, PointElement, LinearScale, Title } from 'chart.js'

Chart.register(...registerables)

export interface IDashboardState {
    items: IListItem[];
    loading: boolean;
    error: string | null;
}


export default class Dashoard extends React.Component<IDashoardProps, IDashboardState> {

    constructor(props: IDashoardProps) {
        super(props);
        //BInd methods
        this.getItems = this.getItems.bind(this);
        this.loadData = this.loadData.bind(this);



        // set initial state
        this.state = {
            items: [],
            loading: false,
            error: null
        }

    }
    public render(): JSX.Element {
        return (
            <div>
                {this.props.percentages}%


                {this.state.error && <p> {this.state.error} </p>}
                
                <Bar data= {this.loadData()} />
               
              
                {this.state.items.map(item => {
                    return (
                        <li key={item.Id}>
                            <b>{item.Title}</b>({item.Id})
                        </li>
                    )
                })}

                <button onClick={this.getItems} disabled= {this.state.loading}>
                    {this.state.loading ? 'Loading...' : 'Refresh'}
                </button>
            </div>
        );
    }

    //load data
    public getItems(): void {
        //set state to true
        this.setState({ loading: true });
        SPServices.getListItem('795d92f2-3e33-447c-96b0-ec340c5a2a84').then(items => {
            console.log(items);
            this.setState({
                items: items.value,
                loading: false,
                error: null
            });
        }).catch(err => {
            this.setState({
                error: 'Something went wrong reach out the admin',
                loading: false
            })
        })

    }
    //get Dashboard data
    public loadData(): object {
        const colors = [
            '#22482f',
            '#a4160b',
            '#3300ff',
            '#edc9cd',
        ]
        const data = {
            labels: ['Q1','Q2',],
            datasets: [],
        }
        //add datasets
        this.state.items.map((item ,i ) => {
            const dataset = {
                label: item.Title,
                data: [
                    item.Transfers,
                    item.OtherSeparations,
                ],
                backgroundColor: colors[ i % colors.length],
                borderColor: colors[ i % colors.length]
            };
            data.datasets.push(dataset);
        });

        return data;
    }

}`import * as React from "react";
import { IDashoardProps } from './IDashoardProps'
import { IListItem } from "../../../services/SharePoint/IListItem";
import SPServices from "../../../services/SPServices";
import { Bar, Line } from 'react-chartjs-2';
import { Chart, registerables, CategoryScale, LineController, LineElement, PointElement, LinearScale, Title } from 'chart.js'

Chart.register(...registerables)

export interface IDashboardState {
    items: IListItem[];
    loading: boolean;
    error: string | null;
}


export default class Dashoard extends React.Component<IDashoardProps, IDashboardState> {

    constructor(props: IDashoardProps) {
        super(props);
        //BInd methods
        this.getItems = this.getItems.bind(this);
        this.loadData = this.loadData.bind(this);



        // set initial state
        this.state = {
            items: [],
            loading: false,
            error: null
        }

    }
  
    public render(): JSX.Element {
        return (
            <div>
                {this.props.percentages}%


                {this.state.error && <p> {this.state.error} </p>}
                {/* <Bar 
                data = {
                    {
                    labels: ['Quarter 1', 'Quarter 2','Quarter3', 'Quarter 4'],
                    datasets: [
                        {
                       label: 'Quarter 1',
                        data:[1,5],
                        backgroundColor: 'rgb(255, 99, 0)',
                         borderColor: 'rgb(255, 99, 132)',
                    },{
                        label: 'Quarter 2',
                        data:[1,7],
                        backgroundColor: 'rgb(0, 99, 132)',
                    borderColor: 'rgb(255, 99, 132)',
                    },
                    {
                        label: 'Quarter 3',
                        data:[5,4],
                        backgroundColor: 'rgb(255, 0, 0)',
                        borderColor: 'rgb(255, 99, 132)',
                    },
                    {
                        label: 'Quarter 4',
                        data:[5,4],
                        backgroundColor: 'rgb(255, 0, 0)',
                        borderColor: 'rgb(255, 99, 132)',
                    }
                ]

                }}/> */}
                <Bar data= {this.loadData()} />
               
              
                {this.state.items.map(item => {
                    return (
                        <li key={item.Id}>
                            <b>{item.Title}</b>({item.Id})
                        </li>
                    )
                })}

                <button onClick={this.getItems} disabled= {this.state.loading}>
                    {this.state.loading ? 'Loading...' : 'Refresh'}
                </button>
            </div>
        );
    }

    //load data
    public getItems(): void {
        //set state to true
        this.setState({ loading: true });
        SPServices.getListItem('795d92f2-3e33-447c-96b0-ec340c5a2a84').then(items => {
            console.log(items);
            this.setState({
                items: items.value,
                loading: false,
                error: null
            });
        }).catch(err => {
            this.setState({
                error: 'Something went wrong reach out the admin',
                loading: false
            })
        })

    }
    //get Dashboard data
    public loadData(): object {
        const colors = [
            '#22482f',
            '#a4160b',
            '#3300ff',
            '#edc9cd',
        ]
        const data = {
            labels: ['Q1','Q2',],
            datasets: [],
        }
        //add datasets
        this.state.items.map((item ,i ) => {
            const dataset = {
                label: item.Title,
                data: [
                    item.Transfers,
                    item.OtherSeparations,
                ],
                backgroundColor: colors[ i % colors.length],
                borderColor: colors[ i % colors.length]
            };
            data.datasets.push(dataset);
        });

        return data;
    }

}`



Source: https://stackoverflow.com/questions/70603158/spfx-with-chartjs-v3-property-datasets-is-missing-in-type-but-required-in

Google OR-Tools: Pickup/deliveries with optional nodes for refueling

BSNL Offering Free 5GB of Data for 30 Days