如何解决ApexCharts混合图表中散点被截断的问题？

问题描述 #

在ApexCharts的混合图表（柱状+折线+散点）中，2024年对应的散点（Case 3）出现截断情况，该散点实际处于SVG容器范围内，但无法完整显示。

解决方案 #

问题根源在于yaxis配置中的forceNiceScale属性自动调整了刻度范围，导致散点的y值（16.31）超出了计算出的y轴上限，同时图表绘图区域顶部未预留足够空间。可以通过以下两种方式解决：

方式1：手动设置y轴范围，关闭自动刻度美化 #

修改yaxis配置，移除forceNiceScale并手动定义min和max，确保覆盖散点的y值：

yaxis: {
  stepSize: 5,
  // 移除或注释forceNiceScale属性
  min: 0,
  max: 20, // 确保数值大于散点的y值16.31
  labels: { show: true },
  axisBorder: { show: true },
  axisTicks: { show: true }
}

方式2：保留自动刻度，增加顶部内边距 #

在chart配置中添加顶部内边距，给散点留出显示空间，让ApexCharts自动扩展y轴范围：

chart: { 
  height: "400", 
  toolbar: { show: false }, 
  zoom: { enabled: false },
  margin: { top: 30 } // 增加顶部内边距
},

修改后的完整代码示例 #

var options = {
  chart: { height: "400", toolbar: { show: false }, zoom: { enabled: false } },
  series: [
    {
      name: "Case 1",
      type: "bar",
      data: [
        { x: 2012, y: "15.13" },
        { x: 2013, y: "12.76" },
        { x: 2014, y: "13.27" },
        { x: 2015, y: "12.91" },
        { x: 2016, y: "13.23" },
        { x: 2017, y: "12.66" },
        { x: 2018, y: "12.81" },
        { x: 2019, y: "11.46" },
        { x: 2020, y: "11.15" },
        { x: 2021, y: "11.65" },
        { x: 2022, y: "14.08" },
        { x: 2023, y: "12.88", fillColor: "#850000" },
        { x: 2024, y: "13.20", fillColor: "#850000" }
      ]
    },
    {
      name: "Case 2",
      type: "line",
      data: [
        { x: 2012, y: "4.29" },
        { x: 2013, y: "3.34" },
        { x: 2014, y: "3.54" },
        { x: 2015, y: "2.76" },
        { x: 2016, y: "2.99" },
        { x: 2017, y: "2.31" },
        { x: 2018, y: "3.20" },
        { x: 2019, y: "1.74" },
        { x: 2020, y: "0.73" },
        { x: 2021, y: "0.21" },
        { x: 2022, y: "1.62" },
        { x: 2023, y: "1.07" },
        { x: 2024, y: "1.07" }
      ]
    },
    {
      name: "Case 3",
      type: "scatter",
      zIndex: 10000,
      data: [
        { x: 2024, y: "16.31" }
      ]
    }
  ],
  yaxis: {
    stepSize: 5,
    min: 0,
    max: 20,
    labels: { show: true },
    axisBorder: { show: true },
    axisTicks: { show: true }
  },
  legend: { show: false },
  colors: ["#f55f40", "#01b0f5", "#0000ff"],
  plotOptions: { bar: { horizontal: false } },
  stroke: { width: [0, 4, 8] }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

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