能否使用MUI X Charts在柱状图中显示标记与数值？

ApexCharts完全支持在柱状图上直接显示数值，无需依赖鼠标悬停，核心是配置**dataLabels**选项，具体实现如下：

基础配置（开启数值显示） #

只需要在图表配置中启用dataLabels.enabled，并可按需调整样式和位置：

var options = {
  chart: {
    type: 'bar'
  },
  series: [{
    name: '销售额',
    data: [180, 250, 320, 290, 410, 350, 450, 520]
  }],
  xaxis: {
    categories: ['Q1', 'Q2', 'Q3', 'Q4', 'Q1(下一年)', 'Q2', 'Q3', 'Q4']
  },
  dataLabels: {
    enabled: true, // 关键：开启直接显示数值
    style: {
      fontSize: '13px',
      fontWeight: '600',
      colors: ['#2c3e50'] // 数值文字颜色
    },
    offsetY: -15 // 垂直偏移量，避免数值与柱子顶部重叠
  }
};

var chart = new ApexCharts(document.getElementById('bar-chart'), options);
chart.render();

进阶自定义 #

如果需要给数值添加单位、格式化内容，或者针对不同系列设置显示规则，可以使用dataLabels.formatter函数：

dataLabels: {
  enabled: true,
  formatter: function(value) {
    // 自定义数值显示内容，比如添加货币符号
    return '$' + value.toFixed(2);
  },
  // 仅对特定系列开启显示
  enabledOnSeries: [0]
}

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