ApexChart 条中数据之间的比率太大，导致小条无法看到和击中。怎么解决？

Question

我有以下 ApexChart 栏：

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,
},
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: {
   intersect: true
}

但这并不能解决问题。

Answer 1

您可以尝试在plotOptions中设置

distributed:true

，这将使每个条形图成为单系列数据。请参阅文档和示例。

var ivaAnnualeOption = {
  // other configs...
  plotOptions: {
        bar: {
          distributed: true, // <== THIS
          ...
        },
  }
}