React Apexcharts Line Chart line not visible

Question

I am using apexcharts library with React for implementing a line chart. It renders but the line to display the curve is not visible. This may be a large set of series data.

When I reduce the set of data from the series in code below, then it displays the line chart properly.

const Dashboard = () => {
  const chartData = {
    options: {
      chart: {
        id: "basic-bar",
        type: "line",
        toolbar: {
          show: false
        }
      },
      xaxis: {
        type: "datetime"
      },
      stroke: {
        curve: "smooth"
      }
    },
    series: [
      {
        name: "Series 1",
        data: [
          {
            x: new Date("2020-03-17T00:00:00.025385Z").getTime(),
            y: 0
          },
          {
            x: new Date("2020-03-17T01:00:00.025385Z").getTime(),
            y: 5
          },
          {
            x: new Date("2020-03-17T02:00:00.025385Z").getTime(),
            y: 3
          },
          {
            x: new Date("2020-03-17T03:00:00.025385Z").getTime(),
            y: 2
          },
          {
            x: new Date("2020-03-17T04:00:00.025385Z").getTime(),
            y: 0
          },
          {
            x: new Date("2020-03-17T05:00:00.025385Z").getTime(),
            y: 0
          },
          {
            x: new Date("2020-03-17T06:00:00.025385Z").getTime(),
            y: 0
          },
          {
            x: new Date("2020-03-17T07:00:00.025385Z").getTime(),
            y: 56
          },
          {
            x: new Date("2020-03-17T08:00:00.025385Z").getTime(),
            y: 22
          },
          {
            x: new Date("2020-03-17T09:00:00.025385Z").getTime(),
            y: 35
          },
          {
            x: new Date("2020-03-17T10:00:00.025385Z").getTime(),
            y: 20
          },
          {
            x: new Date("2020-03-17T11:00:00.025385Z").getTime(),
            y: 25
          },
          {
            x: new Date("2020-03-17T12:00:00.025385Z").getTime(),
            y: 30
          },
          {
            x: new Date("2020-03-17T13:00:00.025385Z").getTime(),
            y: 32
          },
          {
            x: new Date("2020-03-17T14:00:00.025385Z").getTime(),
            y: 43
          },
          {
            x: new Date("2020-03-17T15:00:00.025385Z").getTime(),
            y: 41
          },
          {
            x: new Date("2020-03-17T16:00:00.025385Z").getTime(),
            y: 42
          },
          {
            x: new Date("2020-03-17T17:00:00.025385Z").getTime(),
            y: 56
          },
          {
            x: new Date("2020-03-17T18:00:00.025385Z").getTime(),
            y: 78
          },
          {
            x: new Date("2020-03-17T19:00:00.025385Z").getTime(),
            y: 50
          },
          {
            x: new Date("2020-03-17T20:00:00.025385Z").getTime(),
            y: 45
          },
          {
            x: new Date("2020-03-17T21:00:00.025385Z").getTime(),
            y: 10
          },
          {
            x: new Date("2020-03-17T22:00:00.025385Z").getTime(),
            y: 15
          },
          {
            x: new Date("2020-03-17T23:00:00.025385Z").getTime(),
            y: 5
          },
          {
            x: new Date("2020-03-17T24:00:00.025385Z").getTime(),
            y: 3
          }
        ]
      }
    ]
  };
  return (
    <div>
      <Chart
        options={chartData.options}
        series={chartData.series}
        type="line"
        width="100%"
        height={250}
      />
    </div>
  );
};

The rendered result is this:

Please help me to resolve this.

Answer 1

in stroke : { colors : [#000] //add your colors here } will make it visible you can also add show : true in stroke

Answer 2

Same issue can appear when some "y" values are null.

Answer 3

I was getting this error when length of series data was not matching with length of x-axis categories data, Just make sure x-axis categories data length matches the series data and it will solve the issue!

Answer 4

The last x value in your series array is a NaN value which is causing your issue.

I'm guessing

new Date("2020-03-17T24:00:00.025385Z").getTime()

should be

new Date("2020-03-18T00:00:00.025385Z").getTime()

Here's a codepen of the graph working (not using react).

console.log(new Date("2020-03-17T24:00:00.025385Z").getTime());