connect null values without breaking them in a line/area chart

[Dilshan97]

Description

I'm using X-axis categories as a list of dates like this. const categories = ["2024-07-28", "2024-07-29", "2024-07-30", "2024-07-31"];

also parallelly, use an array of data lists for data series like this. const data = [15, null, 28, 24];

by combination like this. "2024-07-28" -> 15 "2024-07-29" -> null "2024-07-30" -> 28 "2024-07-31" -> 24

also, I'm using annotations for the x-axis. here is the array of x-axis annotations

{
          x: '2024-07-29',
          id: '2024-07-29',
          borderColor: '#FF4560',
          borderWidth: 4,
          strokeDashArray: 0,
          label: {
            text: '2024-07-29'
          }
        },
        {
          x: '2024-07-31',
          id: '2024-07-31',
          borderColor: '#FF4560',
          borderWidth: 4,
          strokeDashArray: 0,
          label: {
            text: '2024-07-31'
          }
        }

I want to connect data points with lines. also need to show the annotations lines. There is no need to show the null data point, and all other data points should be connected.

Steps to Reproduce

1. use this full code to reproduce this issue.

const categories = ["2024-07-28", "2024-07-29", "2024-07-30", "2024-07-31"];
  const data = [15, null, 28, 24];

  const options = {
    chart: {
      type: 'line',
      height: 550,
      animations: {
        enabled: false
      },
      toolbar: {
        autoSelected: "pan",
        show: false,
      },
      zoom: {
        enabled: false,
      }
    },
    plotOptions: {
      bar: {
        horizontal: false,
        columnWidth: '55%'
      },
    },
    stroke: {
      curve: "straight",
      width: 2,
      connectNulls: true
    },
    markers: {
      size: 8, // Adjust line chart point size
      strokeWidth: 3,
      hover: {
        size: 12
      },
    },
    dataLabels: {
      enabled: false,
    },
    fill: {
      opacity: 1,
      type: "solid"
    },
    legend: {
      show: false,
      position: "top",
      horizontalAlign: "right",
    },
    tooltip: {
      enabled: true,
      theme: 'dark',
      marker: {
        show: true,
      },
      x: {
        show: true
      },
    },
    xaxis: {
      type: 'category',
      categories: categories,
      labels: {
        show: true
      },
      tooltip: {
        enabled: false,
      },
      tickPlacement: 'between',
    },
    series: [
      {
        name: 'Series 1',
        data: data,
      }
    ],
    annotations: {
      xaxis: [
        {
          x: '2024-07-29',
          id: '2024-07-29',
          borderColor: '#FF4560',
          borderWidth: 4,
          strokeDashArray: 0,
          label: {
            text: '2024-07-29'
          }
        },
        {
          x: '2024-07-31',
          id: '2024-07-31',
          borderColor: '#FF4560',
          borderWidth: 4,
          strokeDashArray: 0,
          label: {
            text: '2024-07-31'
          }
        }
      ]
    },
    yaxis: {},
  };

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

chart.render();

Expected Behavior

I need data points interconnected.

Actual Behavior

When data points are interconnected, the x-axis annotations that are related to the data series null value do not showing

Screenshots

Actual outcome

Expected outcome

Reproduction Link

https://codepen.io/Dilshn/pen/oNrZwXb