如何缩小Apex Charts工具提示中Y轴项的间距？

Apex Charts提供原生配置方案调整工具提示中Y轴各项的间距，无需完全自定义工具提示内容，具体可通过tooltip.itemMargin配置项实现：

• 在tooltip配置中添加itemMargin对象，通过设置top和bottom的数值，控制每个列表项的上下边距，从而缩小项与项之间的垂直间距。

修改你的配置代码，新增itemMargin配置如下：

const options = {
    chart: {
        type: 'area',
        width: '100%',
        foreColor: graphVar.color,
        toolbar: {
            show: false,
        },
    },
    grid: {
        show: graphVar.grid
    },
    dataLabels: {
        enabled: false
    },
    stroke: {
        width: 3,
        curve: 'smooth'
    },
    xaxis: {
        color: graphVar.color,
        type: 'datetime',
    },
    yaxis: {
        labels: {
            formatter: function (val) {
                return val
            }
        }
    },
    fill: {
        opacity: 0.5
    },
    tooltip: {
        x: {
            format: 'MMM dd yyyy'
        },
        y: {
            formatter: function (value, {series, seriesIndex, dataPointIndex, w}) {
                return value.toFixed(2)
            },  
        },
        fillSeriesColor: false,
        fixed: {
            enabled: false,
            position: 'topRight'
        },
        // 新增：控制工具提示项的上下边距
        itemMargin: {
            top: 2,
            bottom: 2
        }
    }
}

你可以根据需求调整top和bottom的数值（单位为像素），默认值通常为5px左右，减小数值即可缩小各项之间的间距。

如果需要更精细化的样式控制，也可以通过tooltip.cssClass为工具提示添加自定义类名，再结合CSS调整行高或内边距：

tooltip: {
    // ...其他配置
    cssClass: 'custom-tooltip'
}

对应的CSS：

.custom-tooltip .apexcharts-tooltip-series-group {
    margin: 2px 0;
    /* 或调整行高 */
    line-height: 1.2;
}

优先推荐使用itemMargin原生配置，更符合Apex Charts的设计逻辑。

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