[Bug]: The horizontal axis is in the middle of the chart

[quiple]

Name

Minseo Lee

Are you an IBM employee?

• [ ] Yes

What happened?

This is a Combo chart, which is fine when displayed with a Line chart, but when you select just Simple Bar charts, the position of the horizontal axis goes up.

I'm not sure if this is the intended behavior, but I want to have the axis go to zero.

What do I need to do, or what am I doing wrong?

Version

@carbon/charts@1.7.0

Data & options used

const searchChart = document.getElementById('search_chart');

const searchChartData = [
  {
    group: 'Impressions',
    date: '2023-04-17T00:00:00.000+09:00',
    count: 0
  },
  {
    group: 'Clicks',
    date: '2023-04-17T00:00:00.000+09:00',
    count: 0
  },
  {
    group: 'Average CPC',
    date: '2023-04-17T00:00:00.000+09:00',
    cost: 0
  },
  {
    group: 'Impressions',
    date: '2023-04-18T00:00:00.000+09:00',
    count: 0
  },
  {
    group: 'Clicks',
    date: '2023-04-18T00:00:00.000+09:00',
    count: 0
  },
  {
    group: 'Average CPC',
    date: '2023-04-18T00:00:00.000+09:00',
    cost: 0
  },
  {
    group: 'Impressions',
    date: '2023-04-19T00:00:00.000+09:00',
    count: 625
  },
  {
    group: 'Clicks',
    date: '2023-04-19T00:00:00.000+09:00',
    count: 35
  },
  {
    group: 'Average CPC',
    date: '2023-04-19T00:00:00.000+09:00',
    cost: 2196
  },
  {
    group: 'Impressions',
    date: '2023-04-20T00:00:00.000+09:00',
    count: 322
  },
  {
    group: 'Clicks',
    date: '2023-04-20T00:00:00.000+09:00',
    count: 16
  },
  {
    group: 'Average CPC',
    date: '2023-04-20T00:00:00.000+09:00',
    cost: 2151
  }
];

const searchChartOptions = {
  title: 'Search',
  curve: curve,
  legend: legend,
  axes: {
    bottom: {
      mapsTo: 'date',
      scaleType: 'time'
    },
    left: {
      mapsTo: 'count',
      scaleType: 'linear',
      correspondingDatasets: ['Impressions', 'Clicks']
    },
    right: {
      mapsTo: 'cost',
      scaleType: 'linear',
      correspondingDatasets: 'Average CPC'
    }
  },
  toolbar: toolbar,
  timeScale: {
    localeObject: koLocaleObject,
    showDayName: true,
    timeIntervalFormats: koTimeIntervalFormats
  },
  comboChartTypes: [
    {
      type: 'simple-bar',
      correspondingDatasets: ['Impressions', 'Clicks']
    },
    {
      type: 'line',
      correspondingDatasets: 'Average CPC'
    }
  ]
};

new Charts.ComboChart(searchChart, { data: searchChartData, options: searchChartOptions });

Relevant log output

No response

Codesandbox example

No response

What priority level would this be in your opinion?

P3

[karanokara]

Same problem, I also have tried any ways to fix this, yet no solution. Setting the axes domain of both types of the combo chart will just make the whole chart to be blank.

Can try this example: https://stackblitz.com/edit/react-1raf6g?file=src%2Foptions.json,src%2Fdata.json