Uncontrollable width / indentation of bars in candlestick ApexChart

Question

I'm using ApexchartJS library.

Is it possible to set a candle width or indentation size between separate candle bars for the candlestick chart?

Now I have overlapping of two bars on top of each other.

Please take a look on CodePen: https://codepen.io/yura_bezhentsev/pen/abOGGZo

This is my options config:

const options = {
  series: [{
    data: [
      {
        x: 'First',
        y: [6630, 6660, 6623, 6650]
      },
      {
        x: 'Second',
        y: [6650, 6663, 6623, 6630]
      },
      {
        x: 'Third',
        y: [6630, 6660, 6623, 6650]
      }
    ]
  }],
  chart: {
    type: 'candlestick',
    height: 400
  },
  xaxis: {
    type: 'category',
    min: 0,
    max: 4
  }
};

Answer 1

It looks like a bug in ApexCharts when small number of candles are present. A small workaround is to set the tickPlacement property (you'll lose the ability to zoom though)

xaxis: {
  tickPlacement: 'between'
}