Line chart backgroundColor array in TypeScript

[Slion]

I'm porting some code from JavaScript to TypeScript and I'm having the following issue.
In JavaScript we could define backgroundColor as an array of colors to be able to specify the color of each of our data point.
However in TypeScript backgroundColor won't accept an array when the chart type is set to line.
Is there any thing I can do to workaround that issue? I mean the functionality is working seems to be an issue with the TypeScript definition.

My code looks like that:

    initChart() {

        this.iChartModel = new Chart(this.iChart, {
            type: 'line',
            data: {
                labels: Array(KPointCount).fill('MyData'),
                datasets: [{
                    //label: '# of Votes',
                    data: Array(KPointCount).fill(0),
                    //TODO: this would not compile, find a way to do that in TypeScript
                    // See: https://www.chartjs.org/docs/latest/charts/bar.html
                    // Looks like it works with bar chart type but not with line chart type
                    //backgroundColor: Array(KPointCount).fill('rgba(0, 0, 255, 1)'),
                    //borderColor: Array(KPointCount).fill('rgba(0, 0, 255, 1)'),
                    borderWidth: 1,
                    pointRadius: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                layout: {
                    //padding: 20
                },
                scales: {
                    x: {
                        display: false,
                        min: 0,
                        max: KPointCount + 50,
                        grid: {
                            display: false,
                            //SL: beginAtZero would not compile
                            //beginAtZero: true,
                            //drawBorder: false,
                        }
                    },
                    y: {
                        display: false, // Hide axis labels
                        min: 0,
                        max: 100,
                        grid: {
                            display: false,
                            //SL: beginAtZero would not compile
                            //beginAtZero: true,
                            //drawBorder: false,
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    }
                }

            }
        });
    }

[Slion]

Remotely related to:
#9692

[LeeLenaleee]

Array should work fine but can't test it right now.

But why wouldn't you just pass the single color instead of an array filled with the same color?

backgroundColor: 'rgba(0, 0, 255, 1)',
borderColor: 'rgba(0, 0, 255, 1)'

[Slion]

Initially it is filled with the same color but overtime that changes.
It worked in JavaScript but gives a compilation error in TypeScript.

[LeeLenaleee]

Indeed seemed an issue in the types, types only allowed for scriptable and not for array, putted in a pr to fix this: #10179