javascriptapexcharts

How can I Rotate DataLabel Text in ApexChart

How can I rotate datalabel text in ApexChart (Bar Chart)

enter image description here

I tried by adding rotate property in like this

dataLabels: {
    enabled: true,
    textAnchor: 'end',
    style: {
        fontSize: '13px',
        letterSpacing: '5px',
        colors: ['#fff'],
    },
    formatter: function (val, opt) {
        return formatWithSuffix(val)
    },
    offsetX: 18,
    dropShadow: {
        enabled: true
    },
    *rotate: -90*
}
Solution

  • You need to set orientation on the dataLabels:

    plotOptions: {
  bar: {
    dataLabels: {
      orientation: 'vertical',
    },
  }
},

    Applying that on one of the Apex Demo's gives you the following:

    var options = {
  series: [{
  name: 'Inflation',
  data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2]
}],
  chart: {
  height: 350,
  type: 'bar',
},
plotOptions: {
  bar: {
    borderRadius: 10,
    dataLabels: {
      position: 'top',
      orientation: 'vertical',
    },
  }
},
dataLabels: {
  enabled: true,
  formatter: function (val) {
    return val + "%";
  },
  offsetY: -50,
  style: {
    fontSize: '12px',
    colors: ["#304758"]
  }
},

xaxis: {
  categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
  position: 'top',
  axisBorder: {
    show: false
  },
  axisTicks: {
    show: false
  },
  crosshairs: {
    fill: {
      type: 'gradient',
      gradient: {
        colorFrom: '#D8E3F0',
        colorTo: '#BED1E6',
        stops: [0, 100],
        opacityFrom: 0.4,
        opacityTo: 0.5,
      }
    }
  },
  tooltip: {
    enabled: true,
  }
},
yaxis: {
  axisBorder: {
    show: false
  },
  axisTicks: {
    show: false,
  },
  labels: {
    show: false,
    formatter: function (val) {
      return val + "%";
    }
  }

},
title: {
  text: 'Monthly Inflation in Argentina, 2002',
  floating: true,
  offsetY: 330,
  align: 'center',
  style: {
    color: '#444'
  }
}
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
    <div id="chart"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>