I am editing a bar chart that should display the values ​​above each bar. I need the values ​​to be displayed outside the upper limit of the chart. I managed to get this graph:

chart i have

However, I need the values ​​to be displayed as if it were a double x-axis (my understanding is that apexchart only has double-axis implemented for the y-axis). In a nutshell, I need this:

chart i need

I managed to move the labels to the top using "offsety" inside "datalabels" in my chart options, but they stay inside the chart, sitting right on the line of the maximum value of the y-axis (and I need them to be located above this line ).

These are my chart options:

  const options = {
    grid: {
      position: 'front'
    },
    legend:{
      position: "bottom",
      horizontalAlign: "right",
      offsetY: 10
    },
    colors:["#59ad30","#134E32","#3A7B05","#59AD31"],
    chart: {
      toolbar:{show:false},
      type: 'bar',
      height: 350
    },
    plotOptions: {
      bar: {
        dataLabels: {
          position: 'top',
        },
        columnWidth: `${categorias.length*13}%`,
      },
    },
    dataLabels: {
      enabled: true,
      formatter: function (val, opts) {
        return `${val.toFixed(1)} Lt`
      },
      offsetY: -1000,
      style: {
        fontSize: '11px',
        fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
        fontWeight: undefined,
        colors: ["#000000"]
    },
    },
    stroke: {
      show: true,
      width: 2,
      colors: ['transparent']
    },
    xaxis: {
      categories: categorias,
      labels:{
        style: {
          fontWeight: "bold",
      },
      }
    },
    yaxis: {
      labels: {
        formatter: function(val) {
          return `${Math.floor(val)} Lt`
        }
      }
    },
    fill: {
      opacity: 1
    },
    tooltip: {
      y: {
        formatter: function (val) {
          return `${val} lts`
        }
      }
    }
  };

apexcharts version: "^3.35.3"

react-apexcharts version: "^1.4.0"