ApexCharts基础时间线图表悬浮提示如何显示真实小数而非取整值

问题根因 #

• 你配置的xaxis.decimalInFloat本身存在拼写错误，ApexCharts控制坐标轴标签小数位的正确参数为decimalsInFloat（decimals为复数形式），原配置本身就无法生效
• 即使参数拼写正确，该配置仅作用于X轴刻度标签，不会影响悬浮提示框（Tooltip）的数值格式化逻辑，ApexCharts 对rangeBar类型图表的Tooltip默认做了整数取整处理，这是提示框显示0-0的核心原因

修复步骤 #

在原有配置基础上补充tooltip自定义格式化逻辑，同时修正参数拼写错误即可，完整可用配置如下：

options: {
  chart: {
    height: 350,
    type: 'rangeBar',
    toolbar: {
      show: true,
      autoSelected: 'selection'
    },
  },
  plotOptions: {
    bar: {
      horizontal: true
    }
  },
  xaxis: {
    type: 'numeric',
    title: {
      text: 'in ms'
    },
    labels: {
      show: true,
      decimalsInFloat: 3 // 修正拼写，控制X轴标签保留3位小数
    },
  },
  // 新增Tooltip配置，自定义数值格式化规则
  tooltip: {
    y: {
      formatter: function(val) {
        // 方案1：固定保留3位小数，不足补零，对应显示效果为 0.000 ~ 0.050
        // return val.toFixed(3)

        // 方案2：最多保留3位小数，不补零，对应显示效果为 0 ~ 0.05
        return parseFloat(val.toFixed(3))
      }
    }
  }
}

效果验证 #

使用你提供的测试数据：

const data = [{"x":"TaskData0link_Node0_Node1","y":[0.0,0.05]}]

配置完成后，鼠标悬浮在条形上时，Tooltip会正确展示真实小数值，不会再自动取整为整数。如果需要调整小数精度，修改toFixed()传入的数字参数即可。

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