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

[JustDoItSascha]

Any updates on this, will this come?

[Dilshan97]

Any updates on this, will this come?

I try to find a solution to that. still, no solution was found for me. I just replaced the apexchart with chart js. now its woking fine.

[JustDoItSascha]

Yeah it's sad. Thought I could use ApexCharts for a new project because it looked like a promising competitor of Charts.js. But when such basic stuff is not implemented and issues get no attention, then it seems to be not the perfect fit (yet).