如何防止ApexCharts图表标签出现倾斜及溢出问题

问题表现 #

你遇到的是ApexCharts长X轴标签默认自动倾斜、溢出隐藏的问题，只需要在两个图表的xaxis配置项中新增标签控制参数即可解决。 #

具体修改方案 #

在两个图表的xaxis配置中添加如下labels相关配置：

xaxis: {
  categories: ['A cég gondot fordít az ügyfelek igényeinek minél jobb megismerésére'],
  // 新增以下配置
  labels: {
    rotate: 0, // 强制标签水平显示，关闭默认倾斜效果
    hideOverflow: false, // 不隐藏超出默认宽度的标签内容
    style: {
      whiteSpace: 'normal', // 允许长标签自动换行
      fontSize: '12px' // 可自行调整字号适配显示效果
    },
    maxHeight: 120 // 给多行标签预留足够的显示高度，避免被截断
  }
},

如果觉得多行标签占空间过高，也可以用自定义格式化函数截断长文本，悬停时显示完整内容：

xaxis: {
  categories: ['A cég gondot fordít az ügyfelek igényeinek minél jobb megismerésére'],
  labels: {
    rotate: 0,
    formatter: function(val) {
      // 超过20个字符截断加省略号
      return val.length > 20 ? val.slice(0, 20) + '...' : val
    }
  },
  tooltip: {
    enabled: true // 开启X轴标签悬停提示，显示完整文本
  }
}

完整修改后的代码示例 #

var options07 = {
  series: [{
    name: 'SOHA',
    data: [ {{i.szervkult07a}} ]
  }, {
    name: 'RITKÁN',
    data: [ {{i.szervkult07b}} ]
  }, {
    name: 'IDŐNKÉNT',
    data: [ {{i.szervkult07c}} ]
  }, {
    name: 'GYAKRAN',
    data: [ {{i.szervkult07d}} ]
  }, {
    name: 'MINDIG',
    data: [ {{i.szervkult07e}} ]
  }],
  chart: {
    type: 'bar',
    height: 350,
    stacked: true,
    stackType: '100%'
  },
  responsive: [{
    breakpoint: 480,
    options: {
      legend: {
        position: 'bottom',
        offsetX: -10,
        offsetY: 0
      }
    }
  }],
  xaxis: {
    categories: ['A cég gondot fordít az ügyfelek igényeinek minél jobb megismerésére'],
    labels: {
      rotate: 0,
      hideOverflow: false,
      style: {
        whiteSpace: 'normal',
        fontSize: '12px'
      },
      maxHeight: 120
    }
  },
  fill: {
    opacity: 1
  },
  legend: {
    position: 'right',
    offsetX: 0,
    offsetY: 50
  },
};

var chart = new ApexCharts(document.querySelector("#chart_szk07"), options07);
chart.render();


var options07b = {
  series: [{
    name: 'SOHA',
    data: [{{i.szervkult07a}}]
  }, {
    name: 'RITKÁN',
    data: [{{i.szervkult07b}}]
  }, {
    name: 'IDŐNKÉNT',
    data: [{{i.szervkult07c}}]
  }, {
    name: 'GYAKRAN',
    data: [{{i.szervkult07d}}]
  }, {
    name: 'MINDIG',
    data: [{{i.szervkult07e}}]
  }],
  chart: {
    type: 'bar',
    height: 350
  },
  plotOptions: {
    bar: {
      horizontal: false,
      columnWidth: '55%',
      endingShape: 'rounded'
    },
  },
  dataLabels: {
    enabled: false
  },
  stroke: {
    show: true,
    width: 2,
    colors: ['transparent']
  },
  xaxis: {
    categories: ['A cég gondot fordít az ügyfelek igényeinek minél jobb megismerésére'],
    labels: {
      rotate: 0,
      hideOverflow: false,
      style: {
        whiteSpace: 'normal',
        fontSize: '12px'
      },
      maxHeight: 120
    }
  },
  yaxis: {
    title: {
      text: 'fő'
    }
  },
  fill: {
    opacity: 1
  },
  tooltip: {
    y: {
      formatter: function (val) {
        return val + " fő"
      }
    }
  }
};

var chart = new ApexCharts(document.querySelector("#chart_szk07b"), options07b);
chart.render();

内容的提问来源于stack exchange，提问作者RlM