Как мне создать гистограмму из тестовых данных в состоянии с помощью response-chartjs-2?

Question

Я пытаюсь создать гистограмму из гистограммы response-chartjs-2.У меня есть массив тестовых данных, а также: количество интервалов, интервалы классов, стандартное отклонение, диапазон и среднее значение.Я не могу найти ресурсы, в которых указано, где разместить каждое из этих значений для создания гистограммы.

Как мне отразить мои данные / расчеты в гистограмме, составленной из модифицированной гистограммы chartjs?

Кто-нибудь знает хорошие учебники / ресурсы, которые я могу использовать, чтобы указать мне правильное направление?

const numberOfTestTakers = (arr) => {
            return arr.length
        }

        const findRange = (arr) => {
            let sortedArr = arr.sort()
            console.log('sortedArr', sortedArr)
            let min = sortedArr[0]
            console.log('min', min)
            let max = sortedArr[sortedArr.length - 1]
            console.log('max', max)
            let range = max - min
            return range
        }

        const getNumberOfIntervals = (num) => {
            let squareRoot = Math.sqrt(numberOfTestTakers)
            let intervals = Math.round(squareRoot)
            return intervals
        }

        const findMean = (arr) => {
            let sum = 0
            for (let i = 0; i < arr.length; i++) {
                sum += arr[i]
            }
            console.log('sum', sum)
            let mean = sum / arr.length
            return mean

        }

        const standardDeviation = (arr) => {
            let diffArr = []
            for (let i = 0; i < arr.length; i++) {
                diffArr.push(Math.pow(arr[i] - (findMean(arr)), 2))
            }
            return Math.sqrt(findMean(diffArr))

        }

        const getClassIntervals = (arr) => {
            const intervalWidth = standardDeviation(arr) / 3
            return intervalWidth
        }

        const getScoreFrequency = (arr) => {
            return arr.reduce(function (acc, curr) {
                if (typeof acc[curr] == 'undefined') {
                    acc[curr] = 1;
                } else {
                    acc[curr] += 1;
                }

                return acc;
            }, {});
        }


        const chartData = {
            data: {
            labels: [???],
            datasets: [{
                label: 'Scores',
                data: ???,
                backgroundColor: 'rgba(255, 99, 132, 1)',
            }],
        borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
        ],
            borderWidth: 1
    }
}
options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}

        return (
            <div className="App" >
                <header className="App-header">
                    <h1>Student Results Chart</h1>
                    <p>Number of Test Takers: {numberOfTestTakers(this.props.studentScores)}</p>
                    <p>Score Range: {findRange(this.props.studentScores)} points</p>
                    <p>Standard Deviation: {standardDeviation(this.props.studentScores)}</p>
                    <p>Interval Width: {getClassIntervals(this.props.studentScores)}</p>
                </header>
                <article className="canvas-container">
                    <Bar data={data} />
                </article>
            </div >
        );
    }
}