[Bug]: Missing tick labels in timeseries line and bar charts.

[kalyanixraut]

Relevant package(s)

• @carbon/charts
• @carbon/charts-svelte
• @carbon/charts-react
• @carbon/charts-angular
• @carbon/charts-vue
• Documentation website

Carbon Charts Version

1.13.21

Which bundler are you using?

Webpack

What happened and what did you expect to happen?

When plotting a time series Line/Bar chart in I am noticing that the ticks on x-axis are missed. As shown in below screen there is no tick label for first and last which makes interpretation of chart data confusing.

Chart data and options (automatically formatted so no need for backticks)

export default [
  {
    group: 'hour',
    date: new Date(2020, 11, 10, 1, 30),
    value: 10,
  },
  {
    group: 'hour',
    date: new Date(2020, 11, 10, 2, 30),
    value: 20,
  },
  {
    group: 'hour',
    date: new Date(2020, 11, 11, 3, 30),
    value: 30,
  },
  {
    group: 'hour',
    date: new Date(2020, 11, 11, 4, 30),
    value: 40,
  },
  {
    group: 'hour',
    date: new Date(2020, 11, 11, 5, 30),
    value: 50,
  },
  {
    group: 'hour',
    date: new Date(2020, 11, 11, 7, 30),
    value: 60,
  },
  {
    group: 'hour',
    date: new Date(2020, 11, 11, 8, 30),
    value: 70,
  },
  {
    group: 'hour',
    date: new Date(2020, 11, 11, 9, 30),
    value: 80,
  },
  {
    group: 'hour',
    date: new Date(2020, 11, 11, 10, 0),
    value: 90,
  },
  {
    group: 'hour',
    date: new Date(2020, 11, 11, 11, 30),
    value: 100,
  },
  {
    group: 'hour',
    date: new Date(2020, 11, 11, 12, 30),
    value: 110,
  },
  {
    group: 'hour',
    date: new Date(2020, 11, 11, 13, 30),
    value: 120,
  },
  {
    group: 'hour',
    date: new Date(2020, 11, 11, 14, 30),
    value: 130,
  },
  {
    group: 'hour',
    date: new Date(2020, 11, 11, 15, 30),
    value: 140,
  },
];


export default {
  title:
    "Line (time series) - Time interval hourly with custom ticks formats ('MMM d, HH:mm' and 'HH:mm')",
  axes: {
    left: {},
    bottom: {
      scaleType: 'time',
    },
  },
  legend: {
    clickable: false,
  },
  height: '400px',
};

JavaScript console or build output (if relevant)

No response

StackBlitz repro

https://stackblitz.com/edit/react-fzw3du-c1tc4k?file=src%2Fdata.js,src%2Foptions.js,src%2Findex.js

IBM Application/Team (if relevant)

Sterling Data Exchange- Inflight

What priority level would this be in your opinion?

P1 (High)

[kalyanixraut]

Related conversation: https://ibm-cognitive-engage.slack.com/archives/CCA7L4MS9/p1717398542954449