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]: Duplicate tick labels in timeseries line/bar charts. #1837

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?

I have used the ticks.formatter() to show timestamp in specific format in timeseries x-axis. But I am noticing in some cases the tick values are repeating as can be seen in the below screen shot.

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

No response

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