How prevent scatter point trimmed on mixed charts graph in apexcharts?

The last scatter point is cut and is correctly inside the svg container.

Here a codepen with demo https://codepen.io/xechino/pen/gOJbgRa

How can I make the stitch come out complete without cutting it in half?

I've been looking at the documentation, searching StackOverflow and searching other sites but I can't find the solution to this problem?

Screenshot

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,
    forceNiceScale: true,
    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();

Solution

As you've noticed, it appears that the marker sizing isn't handling the mix chart type well on the last data point.

You can ensure that the marker is not cropped by specifying a marker size.

In your case, the full marker is shown when the marker when the size is set to 8. The marker sizes for the other series have been left at the default value of 0.

options = {
  ...
  stroke: { width: [0, 8, 4] },
  markers: { size: [0, 8, 0] },
  ...
}

Using the marker size, you could also change the stroke width for the second series to 0, potentially giving you slightly more control over the marker size.