ApexChart x-axis does not show decimal numbers in the labels

Question

I have a problem with ApexChart in React. It does not show decimal numbers in the labels of the x-axis and repeats integers instead. It seams like it rounds in the integer. However when go with mouse on the bar it shows the correct value (maybe because of the tooltip I added). Furthermore I wanted to know how I can "artificially" extend the axis to a certain value.

this.state = {
        options: {
            chart: {
                height: '600',
                type: 'rangeBar',
                toolbar: {
                    show: true,
                    autoSelected: 'selection'
                },
            },
            plotOptions: {
                bar: {
                    horizontal: true,

                }
            },
            legend: {
                position: 'right'
            },
            xaxis: {
                type: 'numeric',
                title: {
                    text: 'ms'
                },
                labels: {
                    show: true
                },
                decimalInFloat: 3,
            },
            tooltip: {
                custom: ({ dataPointIndex, w }) => {
                    let s = w.config.series[0].data[dataPointIndex];
                    return `<div class="apexcharts-tooltip-rangebar"><div>
                <span class="category">${s.x}: </span>
                <span class="value start-value">${s.y[0]}</span>
                <span class="separator">-</span>
                <span class="value end-value">${s.y[1]}</span></div></div>`;
                }
            },
        },
        series: [
            {
                data: []
            }
        ],
    }

Answer 1

Add formater for xaxis to round to decimal place you want

xaxis: {
  ...
  labels: {
    formatter: function (val) {
      return val.toFixed(1);
    }
  }
},

Furthermore I wanted to know how I can "artificially" extend the axis to a certain value.

Set max value in xaxis