Line gaps not working in version 4.2 but work in version 3.8

[Mav-CG]

Issue Description

In lightweight-charts version 3.8, using null values in the data to create line gaps works correctly. However, in version 4.2, the same approach does not produce the expected gaps. Instead, the lines connect across the null values.

Steps to Reproduce

Version 3.8 (Works as Expected):

const lineSeries = chart.addLineSeries({
lineType: 2, // LineType.WithGaps in version 3.8
});

lineSeries.setData([
{ time: '2018-12-03', value: 26 },
{ time: '2018-12-04', value: 27 },
{ time: '2018-12-05', value: 28 },
{ time: '2018-12-06', value: 29 },
{ time: '2018-12-07', value: null },
{ time: '2018-12-08', value: 31 },
{ time: '2018-12-09', value: 32 },
{ time: '2018-12-10', value: null },
{ time: '2018-12-11', value: 34 },
{ time: '2018-12-12', value: 35 },
{ time: '2018-12-13', value: 36 },
{ time: '2018-12-14', value: 32 },
{ time: '2018-12-15', value: null },
{ time: '2018-12-16', value: 30 },
{ time: '2018-12-17', value: 25 },
{ time: '2018-12-18', value: 16 },
]);
Version 4.2 (Does Not Work as Expected):

const lineSeries = chart.addLineSeries({
lineType: window.LightweightCharts.LineType.WithGaps, // Using the updated enum
});

lineSeries.setData([
{ time: '2018-12-03', value: 26 },
{ time: '2018-12-04', value: 27 },
{ time: '2018-12-05', value: 28 },
{ time: '2018-12-06', value: 29 },
{ time: '2018-12-07', value: null },
{ time: '2018-12-08', value: 31 },
{ time: '2018-12-09', value: 32 },
{ time: '2018-12-10', value: null },
{ time: '2018-12-11', value: 34 },
{ time: '2018-12-12', value: 35 },
{ time: '2018-12-13', value: 36 },
{ time: '2018-12-14', value: 32 },
{ time: '2018-12-15', value: null },
{ time: '2018-12-16', value: 30 },
{ time: '2018-12-17', value: 25 },
{ time: '2018-12-18', value: 16 },
]);
Expected Behavior
The null values should create gaps in the line chart.

Actual Behavior
In version 4.2, the null values do not create gaps; instead, the lines connect across the null values.

Additional Context
Lightweight Charts version: 4.2
Browser: [Your Browser]
Operating System: [Your OS]
Any insights or fixes for this issue would be greatly appreciated. Thank you!

[SlicedSilver]

It is not the expected behaviour that setting the value for a point equal to null would create a gap in the chart.

What is supported is adding whitespace data, which is where a data point only has a time value and no price values. However the library will still draw the line connecting the two points either side of the whitespace and this is extended as well.

To achieve visual gaps in the line plot you could either split your data into multiple line series,

const seriesPart1 = chart.addLineSeries();
seriesPart1.setData([
	{ time: '2018-12-03', value: 26 },
	{ time: '2018-12-04', value: 27 },
	{ time: '2018-12-05', value: 28 },
	{ time: '2018-12-06', value: 29 },
	{ time: '2018-12-07' },
]);
const seriesPart2 = chart.addLineSeries();
seriesPart2.setData([
	{ time: '2018-12-08', value: 31 },
	{ time: '2018-12-09', value: 32 },
	{ time: '2018-12-10' },
]);
const seriesPart3 = chart.addLineSeries();
seriesPart3.setData([
	{ time: '2018-12-11', value: 34 },
	{ time: '2018-12-12', value: 35 },
	{ time: '2018-12-13', value: 36 },
	{ time: '2018-12-14', value: 32 },
	{ time: '2018-12-15' },
]);
const seriesPart4 = chart.addLineSeries();
seriesPart4.setData([
	{ time: '2018-12-16', value: 30 },
	{ time: '2018-12-17', value: 25 },
	{ time: '2018-12-18', value: 16 },
]);

or you could change the color for the points before the white space gaps to be transparent. This would appear to leave gaps but there is the downside that the crosshair marker on those points will also be transparent.

mainSeries.setData([
	{ time: '2018-12-03', value: 26 },
	{ time: '2018-12-04', value: 27 },
	{ time: '2018-12-05', value: 28 },
	{ time: '2018-12-06', value: 29, color: 'transparent' },
	{ time: '2018-12-07' },
	{ time: '2018-12-08', value: 31 },
	{ time: '2018-12-09', value: 32, color: 'transparent' },
	{ time: '2018-12-10' },
	{ time: '2018-12-11', value: 34 },
	{ time: '2018-12-12', value: 35 },
	{ time: '2018-12-13', value: 36 },
	{ time: '2018-12-14', value: 32, color: 'transparent' },
	{ time: '2018-12-15' },
	{ time: '2018-12-16', value: 30 },
	{ time: '2018-12-17', value: 25 },
	{ time: '2018-12-18', value: 16 },
]);