Линия графика реакции Apexcharts не видна

Question

Я использую библиотеку apexcharts с React для реализации линейного графика. Он рендерится, но линия для отображения кривой не видна. Это может быть большой набор данных ряда.

Когда я уменьшу набор данных из ряда в приведенном ниже коде, тогда он правильно отобразит линейную диаграмму.

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>
  );
};

Полученный результат это:

Пожалуйста, помогите мне решить эту проблему.

Answer 1

Последнее значение x в вашем массиве рядов - это значение NaN, которое вызывает вашу проблему.

Я предполагаю,

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

должно быть

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

Вот код codepen рабочего графика (без использования реакции).

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