[Bug]: Excessive padding for timeseries in line chart

[tlindener]

Contact Details

[email protected]

What happened?

A line chart is drawn but surrounding the data points is excessive padding.

Version

latest

Data & options used

See codebox with a reproduction sample based on the minimal configuration of a line chart

Relevant log output

No response

Codesandbox example

https://codesandbox.io/s/friendly-goldstine-2zmpg?file=/src/index.js

[theiliad]

Hi,
adding the addSpaceOnEdges config to your options should remove the spacing

[tlindener]

@theiliad
It's not that I don't want the padding. But if you look at the example above more than one day is added in terms of range. This seems to be beyond a reasonable default.

[SteffenBaumann]

Checking on this one, it is possible to overcome the behavior with additional computing:
https://codesandbox.io/s/suspicious-platform-0szs1?file=/src/index.js

We need to specify a custom domain + using addSpaceOnEdges, where the min/max values need to be before/after the first/last datatime element in the data. The given dataset causes rendering in a 6 hours interval for the ticks. Adjusting for GMT (to display 12am, 6am, 12pm, 6pm), the min value would be: "2021-12-13T05:00:00.000Z" (first entry is "2021-12-13T08:30:15.748Z"). Corresponding, the max value would be: "2021-12-15T11:00:00.000Z" (last entry is "2021-12-15T09:10:25.927Z").

@theiliad the interesting point is about addSpacesOnEdges: 0 being required though. Checking this item: #708 and the actual code here: https://github.com/carbon-design-system/carbon-charts/blob/master/packages/core/src/components/axes/axis.ts#L253, adding spaces should be skipped, if custom domains are provided? However, it seems to default to 1 though ... that's not intuitive to say at least. I would have expected the domain to take precedence and not rely on the spaces unless specifically disabled.

Furthermore, it appears there is another bug with timeSeries data and custom domains. If a custom Domain is used for a timeSeries scaled axis, the value axis can't be determined correctly by the library - in rare cases it does but this isn't reliable and I haven't found a pattern. Take this modified line (time series) code sandbox: https://codesandbox.io/s/competent-elbakyan-l77iy?file=/src/index.js. It results in a straight line for the value axis:

To overcome that second issue, we need to find the min and max values for the value-axis as well. In the given sample this we could use [300, 1300] to add additional padding. This actually smells like a bug though.

Summarizing all that, I'd like to see this item getting re-opened to double check on the addSpaceonEdges and custom domain issue. If you want, I am more than happy to open a 2nd issue for the timeSeries + custom domain issue impacting the value-axis.

Many thanks!