carbon-design-system / carbon-charts

:bar_chart: :chart_with_upwards_trend:⠀Robust dataviz framework implemented using D3 & typescript
https://charts.carbondesignsystem.com
Apache License 2.0
904 stars 184 forks source link

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

Open kalyanixraut opened 3 months ago

kalyanixraut commented 3 months ago

Relevant package(s)

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.

image

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 commented 3 months ago

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