Javascript Apexchart title of x axis always in the wrong position

Question

I'm having some issues with the positioning of the title of the x axis in my column chart. Depending on the range of the y values, the title is always in a different position, like in the examples:

Example 1

Example 2

Here's my code:

  var options = {
    chart: {
      type: 'bar'
    },
    series: [{
      name: 'Elevation',
      data: dict["values"],
      color: "#e0bf51"
    }],
    xaxis: {
      title: {
        text: 'Elevation (m)',
          //  offsetY: +120,
            floating: true,
      },
        categories: newkeys,
        tickAmount: 10,
        
    },
    dataLabels: {
        enabled: false
    },
    yaxis: {
      title: {
        text: 'Percentage (%)',
        offsetX:  10,
        floating: true,
      },
      axisBorder: {
        show: true
      },
      labels: {
        show: false,
        formatter: function (val) {
          return val + "%"; 
        }
      }
    },
    stroke: {
      colors: ["transparent"],
      width: 2
    },
    plotOptions: {
      bar: {
        columnWidth: "100%",
        rangeBarOverlap: true,
        rangeBarGroupRows: false
      }
    },
    tooltip: {
      x: {
        formatter: (value) => { return String(value) + '-' + String((parseInt(value)+9)) + " m" },
    },
    y: {
      title: {
          formatter: (seriesName) => "Percentage of land:",
      },
  },
  }
  }
  
  var chart = new ApexCharts(document.getElementById(elementId), options);
  
  chart.render();

I tried changing the offset values, but as the title is always in a new position this approach doesn't work.

Answer 1

It is not ideal, but you can downgrade a bit the version of ApexCharts .

This bug appeared with v3.36.1 , so it was not in v3.36.0 .

 let options = { series: [{ name: 'Series', data: [10, 20, 15] }], chart: { type: 'bar', height: 350 }, dataLabels: { enabled: false }, xaxis: { categories: ['Category 1', 'Category 2', 'Category 3'], title: { text: 'Axis title' } } }; let chart = new ApexCharts(document.querySelector('#chart'), options); chart.render();

 <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.36.0"></script> <div id="chart"></div>