Estoy editando un gráfico de barras que debería mostrar los valores encima de cada barra. Necesito que los valores se muestren fuera del límite superior del gráfico. Me las arreglé para obtener este gráfico:

gráfico que tengo

Sin embargo, necesito que los valores se muestren como si fuera un doble eje x (tengo entendido que apexchart solo tiene implementado un doble eje para el eje y). En pocas palabras, necesito esto:

gráfico que necesito

Me las arreglé para mover las etiquetas a la parte superior usando "offsety" dentro de "datalabels" en las opciones de mi gráfico, pero permanecen dentro del gráfico, justo en la línea del valor máximo del eje y (y necesito que estén situado encima de esta línea).

Estas son mis opciones de gráfico:

 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` } } } };

versión de apexcharts: "^3.35.3"

versión de react-apexcharts: "^1.4.0"