Search code examples
javascriptchartsbar-chartapexcharts

ApexCharts - How to set width for x/y axis

I'm making a bar chart using ApexCharts.js, but I'm confused about setting the width of the x/y axis. This is the axis I mean, I want it to be wider.

enter image description here

And this is my code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Grafik Batang dengan ApexCharts.js</title>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts-zoom"></script>
  </head>
  <body>
    <div class="row">
      <div class="container" style="min-width: 500px">
        <div id="chart"></div>
      </div>
    </div>

    <script>
      
      
      var options = {
          series: [{
          data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
        }],
          chart: {
          type: 'bar',
          height: 350
        },
        plotOptions: {
          bar: {
            borderRadius: 10,
            horizontal: true,
          }
        },
        dataLabels: {
          enabled: false
        },
        xaxis: {
          categories: ['South Korea asdsad asd asdas asdasda asda', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan',
            'United States', 'China', 'Germany'
          ],
        }
        };

        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();
    </script>
  </body>
</html>

Solution

  • By default the yaxis.labels.maxWidth is 160, you can increase the maxWidth to allow showing the text completely.

    var options = {
   ...,
   yaxis: {
        labels: {
            maxWidth: 500
        }
   }
};

    Demo @ StackBlitz