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,
					},
				},
			},
		});