Type error setting pointStype to false

[b2m-marcjovani]

Expected behavior

I hope I can define a dataset with a boolean pointStyle without getting a typing error

Current behavior

When i add the following config:

new Chart(canvas, {
    type: 'line',
    data: {
        labels: generateLabels(),
        datasets: [
            {
                label: 'Dataset',
                data: generateData(),
                pointStyle: false, <-- 
            },
        ],
}

I get the following typing error

Type '{ pointStyle: boolean; }' is not assignable to type 'ChartDatasetCustomTypesPerDataset<"line", number[]>'.

Reproducible sample

https://codesandbox.io/s/ng2charts-chart-js-issue-template-forked-r5kcm4

Updated example: https://codesandbox.io/s/ng2charts-chart-js-issue-template-forked-6fd62d?file=/src/app/app.component.ts

(does not complain about the boolean type, but neither does it complain about an invalid string type)

Optional extra steps/info to reproduce

No response

Possible solution

It is currently "fixed" by forcing a type as shown here

pointStyle: false as unknown as string,

but I wouldn't want to have to do this.

Context

I am working on Angular 16

chart.js version

4.3.0

Browser name and version

Firefox Developer Edition 115.0b9 (64-bit) on Ubuntu

Link to your project

No response

[LeeLenaleee]

The codesandbox you linked is in version 3.7.1. If you update the version it works fine: https://codesandbox.io/s/ng2charts-chart-js-issue-template-forked-zjsm79?file=/src/app/app.component.ts

[b2m-marcjovani]

The codesandbox you linked is in version 3.7.1. If you update the version it works fine: https://codesandbox.io/s/ng2charts-chart-js-issue-template-forked-zjsm79?file=/src/app/app.component.ts

I have updated the example to this link: https://codesandbox.io/s/ng2charts-chart-js-issue-template-forked-6fd62d?file=/src/app/app.component.ts:518-554

Thanks for the heads up @LeeLenaleee, however now I am not complaining about any type errors.

Anyway, i found this quirk. If I set the attributes separately, like here:

        const chartData = {
            labels: generateLabels(),
            datasets: [
                {
                    label: 'Dataset',
                    data: generateData(),
                    borderColor: '#0046e1',
                    borderWidth: 1.5,
                    backgroundColor: gradient,
                    fill: 'origin',
                    tension: 0,
                    borderDashOffset: 99,
                    pointHoverRadius: 1000,
                    pointStyle: false, <-- type error
                },
            ],
        };

        this.chart = new Chart(canvas, {
            type: 'line',
            data: chartData,
            options: {
                animation: false,
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        enabled: false,
                    },
                },
                scales: {
                    x: {
                        display: false,
                    },
                    y: {
                        display: false,
                    },
                },
            },
        });

Whereas if I put it like this, it's all good. =S

        this.chart = new Chart(canvas, {
            type: 'line',
            data: {
                labels: generateLabels(),
                datasets: [
                    {
                        label: 'Dataset',
                        data: generateData(),
                        borderColor: '#0046e1',
                        borderWidth: 1.5,
                        backgroundColor: gradient,
                        fill: 'origin',
                        tension: 0,
                        borderDashOffset: 99,
                        pointHoverRadius: 1000,
                        pointStyle: false,
                    },
                ],
            },
            options: {
                animation: false,
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        enabled: false,
                    },
                },
                scales: {
                    x: {
                        display: false,
                    },
                    y: {
                        display: false,
                    },
                },
            },
        });