Search code examples
vue.jsvuejs3apexcharts

why is ApexChart x-axis title position bugging

enter image description hereThe x-axis title in my apexchart suddenly appeared overlapping on the graph as shown above (it should appear below the x-axis line), it was all fine before and I didn't change anything about its position. My code to set x-axis is:

xaxis: {
   categories: [41, 42, 43],
   title: { text: "number of people" },
}

I'm using vue3-apexcharts 1.4.1 and apexcharts 3.36.3. This is bugging me for the past week and I couldn't fix it. Is someone else also experiencing this problem or knows how to fix? Thank you so much!

Solution

  • Yes, I noticed that. You have two solutions:

    Downgrade your version of ApexCharts

    For instance, you can use this one: 3.35.1

    let options = {
  series: [{
    name: 'Series',
    data: [10, 20, 15]
  }],
  chart: {
    type: 'line',
    height: 350
  },
  dataLabels: {
    enabled: false
  },
  xaxis: {
    categories: ['Category 1', 'Category 2', 'Category 3'],
    title: {
      text: 'Axis title'
    }
  }
};

let chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();
    <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.35.1"></script>

<div id="chart"></div>

    Of course, if you do that, you will not have the latest enhancements: Releases · apexcharts/apexcharts.js · GitHub

    Use xaxis.title.offsetY

    This is documented here: xaxis – ApexCharts.js

    let options = {
  series: [{
    name: 'Series',
    data: [10, 20, 15]
  }],
  chart: {
    type: 'line',
    height: 350
  },
  dataLabels: {
    enabled: false
  },
  xaxis: {
    categories: ['Category 1', 'Category 2', 'Category 3'],
    title: {
      text: 'Axis title',
      offsetY: 100
    }
  }
};

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

<div id="chart"></div>

    Be careful with this second solution because you may need some responsive rules...

    EDIT

    After further investigation, it seems that this bug appeared with v3.36.1. Therefore, you can use v3.36.0.