Types: `spanGaps` not recognized in `options.elements.line`

[StephanTLavavej]

Expected behavior

I expected TypeScript to accept options: { elements: { line: { spanGaps: true } } }.

Current behavior

Compiler error:

Type '{ spanGaps: true; }' is not assignable to type '_DeepPartialObject<ScriptableAndArrayOptions<LineOptions & LineHoverOptions, ScriptableContext<"line">>>'.
Object literal may only specify known properties, and 'spanGaps' does not exist in type '_DeepPartialObject<ScriptableAndArrayOptions<LineOptions & LineHoverOptions, ScriptableContext<"line">>>'.

Reproducible sample

https://www.typescriptlang.org/play?ssl=32&ssc=7&pln=27&pc=1#code/JYWwDg9gTgLgBAbzgYQBYENZwL5wGZQQhwDkAxhrAHQBWAziQNwCwAUGwDYCm8ZMAHnAC8cACYQyAVxBcAdjCoBzHgFFuM+QCEAngElRACgBEIbWkwwjASjjo6cABIAVALIAZZOlkA3O2q4aMCys3PCm5lgislwA7iiUMAZ8-AA0iGxwcDDaYFwAXHBGHMDRRikZYugw6AUIFZmiVXY8dAUA2vWZ6axdvXAc6ABGXBwFRp4wdGWdvY3V7TN9SPwFAIxp2msADDjlPX29ywUATBsFAMw72HsHh3ArcOdncMdXN7eZR3AALM-fb4s7g8AKzPWSSDgcXaArpfABsYIhUOuMM+9wKAHZnpdofsPl8ABzPV64j5oh4ATj+ALxty+qy2zwZOBhAF13gdBtBRFwoMgIBxoGMAMRbMXi6a03qDdBkADWikIklkon5gqgIrFADEtWKjItsJ1WRUUfsIGAYMAILJWt1eiMAnJJrVFsVoi6pV06GAvABxdBgW0wKCSLgGzqm3p0Mjobi2uqeh4Jj7ZXJjN1cTCSj4gEprDl9EDoB4Mg0FzKbO23VP5QoZrPlrq52QFRkwosgrbh2mG-a97BWYJAA

Optional extra steps/info to reproduce

At runtime, spanGaps can appear within options.elements.line and definitely has an effect. Here's an example (try commenting out spanGaps or setting it to false): https://codepen.io/StephanTLavavej/pen/MWObjzg

TypeScript rejects this, apparently because LineOptions doesn't mention spanGaps:

Chart.js/types/index.esm.d.ts

Lines 1745 to 1800 in aebbb5a

	export interface LineOptions extends CommonElementOptions {
	/**
	* Line cap style. See MDN.
	* @default 'butt'
	*/
	borderCapStyle: CanvasLineCap;
	/**
	* Line dash. See MDN.
	* @default []
	*/
	borderDash: number[];
	/**
	* Line dash offset. See MDN.
	* @default 0.0
	*/
	borderDashOffset: number;
	/**
	* Line join style. See MDN.
	* @default 'miter'
	*/
	borderJoinStyle: CanvasLineJoin;
	/**
	* true to keep Bézier control inside the chart, false for no restriction.
	* @default true
	*/
	capBezierPoints: boolean;
	/**
	* Interpolation mode to apply.
	* @default 'default'
	*/
	cubicInterpolationMode: 'default' | 'monotone';
	/**
	* Bézier curve tension (0 for no Bézier curves).
	* @default 0
	*/
	tension: number;
	/**
	* true to show the line as a stepped line (tension will be ignored).
	* @default false
	*/
	stepped: 'before' | 'after' | 'middle' | boolean;
	/**
	* Both line and radar charts support a fill option on the dataset object which can be used to create area between two datasets or a dataset and a boundary, i.e. the scale origin, start or end
	*/
	fill: FillTarget | ComplexFillTarget;
	segment: {
	backgroundColor: Scriptable<Color|undefined, ScriptableLineSegmentContext>,
	borderColor: Scriptable<Color|undefined, ScriptableLineSegmentContext>,
	borderCapStyle: Scriptable<CanvasLineCap|undefined, ScriptableLineSegmentContext>;
	borderDash: Scriptable<number[]|undefined, ScriptableLineSegmentContext>;
	borderDashOffset: Scriptable<number|undefined, ScriptableLineSegmentContext>;
	borderJoinStyle: Scriptable<CanvasLineJoin|undefined, ScriptableLineSegmentContext>;
	borderWidth: Scriptable<number|undefined, ScriptableLineSegmentContext>;
	};
	}

---

There may also be a documentation issue here. Line Chart > Dataset Properties says:

Namespaces:

• data.datasets[index] - options for this dataset only
• options.datasets.line - options for all line datasets
• options.elements.line - options for all line elements
• options.elements.point - options for all point elements
• options - options for the whole chart

and then lists spanGaps in a table. I believe this is where I got the idea to set spanGaps within options.elements.line, and it appears to be accurate.

However, Line Chart > Line Styling goes on to say:

If the value is undefined, showLine and spanGaps fallback to the associated chart configuration options. The rest of the values fallback to the associated elements.line.* options.

This is confusing, because spanGaps appears to display fallback behavior to the elements.line.* options.

Finally, Elements > Line Configuration documents options.elements.line and doesn't mention spanGaps at all.

Possible solution

No response

Context

I'm converting the microsoft/STL Status Chart, powered by Chart.js (thank you! 😻), to use TypeScript.

chart.js version

v3.7.0

Browser name and version

Chrome 98.0.4758.81

Link to your project

No response

[etimberg]

Thanks for reporting @StephanTLavavej. It looks like the docs are wrong on the lookup order which was probably normalized when we got to v3. I'll go ahead and update the docs and add the property to the types.