Passing data from JSON to React component Apexchart timeline

Question

I'm creating a timeline with Apex Chart. I want to load data dynamically from a JSON. You can see how it looks like with hard coded data here.

My data.json looks like this:

[{
            "name": "Booked",
            "data": [
              {
                "x": "Lady Gita",
                "y": [
                  "new Date('2019-03-05').getTime(),",
                  "new Date('2019-03-08').getTime()"
                ]
              }
            ]
          },

          {
            "name": "Option",
            "data": [
              {
                "x": "Ardura",
                "y": [
                  "new Date('2019-03-10').getTime(),",
                  "new Date('2019-03-17').getTime()"
                ]
              }
            ]
 }]

I've also tried defining y like this:

"new Date('2019-03-05').getTime(), new Date('2019-03-08').getTime()"

And like this:

"new Date('2019-03-05').getTime()"
"new Date('2019-03-08').getTime()"

My code looks like this:

import React, { useState, Component } from 'react';
import ReactApexChart from "react-apexcharts";

import "./TimelineChart.css";
import data from "./pages/data.json";

const newData = data;

//I also tried:

//JSON.parse(newData);

//But the my timeline doesnt even show


    
 class ApexChart extends Component {

        constructor(props) {
          super(props);
        
          this.state = {
          
            series: [],
            options: {
              chart: {
                height: 450,
                type: 'rangeBar'
              },
              plotOptions: {
                bar: {
                  horizontal: true,
                  barHeight: '80%'
                }
              },
              xaxis: {
                type: 'datetime'
              },
              stroke: {
                width: 1
              },
              fill: {
                type: 'solid',
                opacity: 0.6
              },
              legend: {
                position: 'top',
                horizontalAlign: 'left'
              }
            },
          
          
          };
        };





  render() {
    return (

        
      <div className="app">
        <div className="row">
          <div className="mixed-chart">
            <ReactApexChart
   options={this.state.options}
   series={newData}
   type="rangeBar"
   height="350"
/>
          </div>
        </div>
      </div>
    );
  }
}
console.log(newData);
export default ApexChart;

My console output looks like this:

My chart looks like this:

As you can see my "name" and "x" values do show up on chart but there is no date ranges

Answer 1

New Date in this JSON should be Unix Timestamp.

"y": [   
         "new Date('2019-03-05').getTime(),",
         "new Date('2019-03-08').getTime()"
    ]

You can convert date and time to Unix Timestamp here

After converting format it should look like this:

"y": [
         1551744000000,
         1552003200000
     ]