title: Apex charts: Show Y-axis label and data label value above the bar
body: <p>I am using ApexCharts to display a horizontal barchart.</p>
  <p>I have a design like this:</p>
  <p><a href="https://i.stack.imgur.com/onY0u.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/onY0u.png" alt="enter image description here" /></a></p>
  <p>So far I've achieved up to here using custom datalabels in apexcharts.</p>
  <p><a href="https://i.stack.imgur.com/XfSLw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XfSLw.png" alt="enter image description here" /></a></p>
  <p>How can I tweak apexcharts to match my design so that the y-axis label and data labels are above the bar like in my design? Also, can I apply border-radius to all four corners?</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({
    el: '#app',
    components: {
      apexchart: VueApexCharts,
    },
    data: function() {
      return {
        series: [{
          data: [12787, 11903, 4446, 163, 978, 93],
        }, ],
        chartOptions: {
          chart: {
            type: "bar",
            height: 350,
            toolbar: {
              show: false,
            },
          },
          dataLabels: {
            enabled: true,
            offsetY: -14,
            textAnchor: "start",
            formatter: function(val, opt) {
              return opt.w.globals.labels[opt.dataPointIndex] + ": " + val
            }
          },
          fill: {
            colors: ["#E0655D"],
          },
          plotOptions: {
            bar: {
              barHeight: "15%",
              borderRadius: 4,
              horizontal: true,
              dataLabels: {
                position: "bottom",
              },
              colors: {
                backgroundBarColors: ["#fff"],
                backgroundBarOpacity: 0.5,
                backgroundBarRadius: 4,
              },
            },
          },
          xaxis: {
            categories: [
              "RCC With Pillar",
              "Cement Bonded Bricks/Stone",
              "Mud Bonded Bricks/Stone",
              "Wooden Pillar",
              "Not Stated",
              "Others"
            ],
            labels: {
              show: false,
            },
            axisBorder: {
              show: false,
            },
            axisTicks: {
              show: false,
            },
          },
          yaxis: {
            show: false,
          },
        },
      };
    },
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.apexcharts-grid {
    display: none;
  }
  
  #chart {
    background-color: #252D35;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="app"&gt;
      &lt;div id="chart"&gt;
        &lt;apexchart type="bar" height="350" :options="chartOptions" :series="series"&gt;&lt;/apexchart&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/apexcharts"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>JS fiddle link: <a href="https://jsfiddle.net/aanish/4os8cuvL/4/" rel="nofollow noreferrer">https://jsfiddle.net/aanish/4os8cuvL/4/</a></p>
  <p>Thanks in advance</p>