ApexChart柱状图数据差距过大，小柱子无法查看及触发Tooltip怎么解决？

针对二月数据柱子过短、tooltip触发困难的问题，提供两种可行方案：

方案一：设置柱子最小高度 #

直接在plotOptions.bar中添加minHeight属性，强制柱子保持最低高度，既解决视觉识别问题，也能提升hover触发的便捷性：

var ivaAnnualeOption = {
    series: [{
        name: 'Saldo IVA',
        data: [3500, -53, -30000, -1000, -2000, 1500, 500, 0, 0, 0, 0, 0]
    }],
    chart: {
        type: 'bar',
        height: 350
    },
    plotOptions: {
        bar: {
            colors: {
                ranges: [{
                    from: -Infinity,
                    to: 0,
                    color: '#FFD8C8'
                }, {
                    from: 0,
                    to: +Infinity,
                    color: '#E1FEEF'
                }]
            },
            columnWidth: '60%',
            minHeight: 20 // 设置柱子最小高度，可根据需求调整数值
        }
    },
    dataLabels: {
        enabled: false,
    },
    yaxis: {
        title: {
            text: '',
        },
        labels: {
            formatter: function (val) {
                return italianNumberFormatter(val) + '€';
            }
        }
    },
    xaxis: {
        type: 'string',
        categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dic"],
        labels: {
            rotate: -90
        }
    }
};

var ivaAnnualeChart = new ApexCharts(document.querySelector("#ivaAnnuale"), ivaAnnualeOption);
ivaAnnualeChart.render();

方案二：扩大Tooltip触发范围 #

通过调整tooltip配置，关闭精确相交检测，让鼠标只要落在对应月份的垂直区域内就触发tooltip，无需精准hover到柱子上：

var ivaAnnualeOption = {
    series: [{
        name: 'Saldo IVA',
        data: [3500, -53, -30000, -1000, -2000, 1500, 500, 0, 0, 0, 0, 0]
    }],
    chart: {
        type: 'bar',
        height: 350
    },
    plotOptions: {
        bar: {
            colors: {
                ranges: [{
                    from: -Infinity,
                    to: 0,
                    color: '#FFD8C8'
                }, {
                    from: 0,
                    to: +Infinity,
                    color: '#E1FEEF'
                }]
            },
            columnWidth: '60%',
        }
    },
    dataLabels: {
        enabled: false,
    },
    tooltip: {
        intersect: false, // 关闭精确相交检测
        followCursor: true, // tooltip跟随鼠标移动，提升触发灵敏度
        x: {
            show: true
        }
    },
    yaxis: {
        title: {
            text: '',
        },
        labels: {
            formatter: function (val) {
                return italianNumberFormatter(val) + '€';
            }
        }
    },
    xaxis: {
        type: 'string',
        categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dic"],
        labels: {
            rotate: -90
        }
    }
};

var ivaAnnualeChart = new ApexCharts(document.querySelector("#ivaAnnuale"), ivaAnnualeOption);
ivaAnnualeChart.render();

你可以根据需求选择其中一种方案，或者同时启用两种方案以获得最佳体验。

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