当我将highchart中的数据值设置为100时，这条线会断开，我的意思是：

看看当两个值都是100的时候，这条线是怎么断的，而且它的宽度和不是100的值不一样，这意味着它可能因为某种原因在顶部断了。我试过了所有的方法来修复这个问题，我试着用官方文档中的属性来修复它：https://api.highcharts.com/highcharts/，但没有运气。
下面是我的代码：

function PopularityGraph({ data }) {
  const [state, setState] = useState({ lineChart: {} });

  const splitEmptyData = series => {
    const index = series.findIndex(item => item.y !== 0);
    if (index > 0) {
      const dataNonEmpty = series.slice(index);
      const dataEmpty = series.slice(0, index).map(item => ({ ...item, y: dataNonEmpty[0].y }));
      return [{ data: dataNonEmpty }, { data: dataEmpty, dashStyle: "dot", states: { hover: { enabled: false } } }];
    } else {
      return [{ data: series }];
    }
  };

  useEffect(() => {
    const regressionResult = regression.linear(
      Object.keys(data).map((item, index) => {
        return [index, data[item]];
      })
    );

    const split = splitEmptyData(
      Object.keys(data).map(item => {
        return { x: parseInt(item), y: data[item] };
      })
    );

    setState({
      ...state,
      lineChart: {
        chart: {
          type: "line",
        },
        title: {
          text: null,
        },
        xAxis: {
          lineWidth: 0,
          type: "datetime",
          tickLength: 0,
          labels: {
            y: 30,
            formatter: function() {
              return dayjs.unix(this.value).format("MMM 'YY");
            },
          },
        },
        yAxis: [
          {
            lineWidth: 0,
            max: 100,
            min: 0,
            title: {
              text: "Popularity",
            },
            labels: {
              formatter: function() {
                return shortenNumbers(this.value);
              },
            },
          },
        ],

        plotOptions: {
          series: {
            states: { hover: { enabled: false } },
            marker: {
              enabled: false,
            },
            events: {
              legendItemClick: function(e) {
                e.preventDefault();
              },
            },
          },
        },
        legend: {
          enabled: false,
        },
        series: [
          {
            name: "Popularity",
            color: "#19a049",
            ...split[0],
          },
          {
            name: "Popularity",
            color: "#19a049",
            ...split[1],
          },
          {
            marker: { enabled: false },
            showInLegend: false,
            data: Object.keys(data).map((item, index) => {
              return [parseInt(item), index * regressionResult.equation[0] + regressionResult.equation[1]];
            }),
            type: "area",
            fillOpacity: 0.2,
            threshold: -Infinity,
            dashStyle: "dash",
            lineWidth: 1,
            enableMouseTracking: false,
            color: "#acf1c4",
          },
        ],
        tooltip: {
          useHTML: true,
          shared: true,
          crosshairs: {
            color: "#707580",
            dashStyle: "dash",
            width: 1.5,
          },
          formatter: function() {
            return `
            <div class="graph-tooltip has-shadow">
              <time class="year">${dayjs.unix(this.x).format("MMMM")} ${dayjs.unix(this.x).format("YYYY")}</time>
              <div class="channel-value">Popularity: ${
                split[1] && this.points[0].x <= split[1].data[split[1].data.length - 1].x
                  ? "No data available"
                  : "<strong>" + shortenNumbers(this.points[0].y) + "</strong>"
              }</div>
            </div>`;
          },
        },
      },
    });
  }, [data]);

  return (
    <div className="graph">
      <HighchartsReact highcharts={Highcharts} options={state.lineChart} />
    </div>
  );
}

PopularityGraph.propTypes = {
  data: PropTypes.object,
};

export default PopularityGraph;

唯一“有效”的“修复”是当我在yAxis属性中将max值设置为101时，但我的图形看起来像这样：

这不是我想要的，因为这样不仅左边的轴显示120为最大值，它也是从顶部移动太多，如果你知道我的意思。
如果有人知道是什么问题，我会很高兴地感谢它。
另外，英语不是我的主要语言，因此我为任何语法错误道歉。