JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<div class="chartBox">
  <canvas id="myChart"></canvas>
</div>

CSS

.chartBox {
            width: 400px;
        }

JavaScript

let dataValues = [100, 120, 80, 100, 90, 110, 100, 100, 100]

        const sum = dataValues.reduce((a, b) => a + b, 0);
        const avg = sum / dataValues.length;
        const sorted = [...dataValues].sort(function(a, b) {
            return a - b;
        })
        console.log(typeof(dataValues[0]))
        console.log("hello")
        console.log(sorted)
        console.log("hello")
        console.log(dataValues)
                const data = {
            labels: [
                'Signal 1',
                'Signal 2',
                'Signal 3',
                'Signal 4',
                'Signal 5',
                'Signal 6',
                'Signal 7',
                'Signal 8',
                'Signal 9'

            ],
            datasets: [{
                label: '9 signals',
                data: dataValues,
                fill: true,
                backgroundColor: 'rgba(210, 203, 203, 0.4)',
                borderColor: 'rgb(210, 203, 203, 0.6)',
                pointBackgroundColor: function(context) {
                    var index = context.dataIndex;
                    var value = context.dataset.data[index];
                    /*return value < avg / 4 ? 'blue' :
                        value < avg * 2 / 4 ? 'green' :
                            value < avg * 3 / 4 ? 'orange' :
                                'red';*/
                    return value < sorted[3] ? 'blue' :
                        value <  sorted[5] ? 'green' :
                            value < sorted[7] ? 'orange' :
                                'red';
                },
                pointBorderColor: '#fff',
                pointHoverBackgroundColor: '#fff',
                pointHoverBorderColor: 'rgb(255, 99, 132)'
            }
            /*, {
                label: 'My Second Dataset',
                data: myData[1],
                fill: true,
                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                borderColor: 'rgb(54, 162, 235)',
 ...