CODEWITHSUNDEEP
reactjshighcharts
Wilmer Demata
Wilmer Demata

Reputation: 95

How to properly set datetime as x-axis value on Highcharts(React JS)

I'm trying to make a graph with DateTime and number; xAxis being DateTime and yAxis as a number value. as I layout the data, I noticed that every time the value for the x-axis is something like this:

since I don't intend to make this post with a long code, please click this

series: [{
  data: [
      {x: new Date("2021-05-27T01:15Z"), y: 102},
      {x: new Date("2021-05-26T06:20Z"), y: 603},
      {x: new Date("2021-05-26T06:19Z"), y: 200},
      {x: new Date("2021-05-26T06:18Z"), y: 100},
      {x: new Date("2021-05-26T06:17Z"), y: 120},
      {x: new Date("2021-05-26T24:00Z"), y: 203}
  ],  
}]

}
// THIS CODE THROWS ReferenceError: Highcharts is not defined

I tried a different approach and instead, I put milliseconds in new Date():

 series: [{
    
      // number of articles published example
      //data:[1,2,3]
      data: [
          {x: new Date(1622078100000), y: 102},
          {x: new Date(1622010000000), y: 603},
          {x: new Date(1622009940000), y: 200},
          {x: new Date(1622009880000), y: 100},
          {x: new Date(1622009820000), y: 120},
          {x: new Date(1622073600000), y: 203}
      ],
      // pointInterval: 3600000,    
    }]


// THIS CODE ALSO THROWS ReferenceError: Highcharts is not defined

Please take note, I tried to play around with it to find the cause of error and end up with this data:

  data: [
          {x: new Date(16220), y: 102},
          {x: new Date(16220), y: 603},
          {x: new Date(16240), y: 200},
]
    


 //this code doesn't throw an error, but of course, the date is wrong and if I try to add 
//more object into the array, then the error message return

Anyone knows how to properly set a dateTime for Highcharts so it won't throw an error ? Thanks for your help

Error Message:

enter image description here

Upvotes: 1

Views: 1286

Answers (1)

Satyendra Jain
Satyendra Jain

Reputation: 26

Refer http://jsfiddle.net/Jainskumar7/0hndm6ja/ have the same dateTime on yAxis

series: [{
data: [[1621366784000,54],[1621368584000,55],[1621370384000,55],[1621372184000,56],[1621373984000,56],[1621375784000,56],[1621377583000,57],[1621379383000,57],[1621381183000,58],[1621382983000,59],[1621384783000,59],[1621386583000,60],[1621388383000,60],[1621390183000,60],[1621391983000,60],[1621393783000,60],[1621395583000,60],[1621397383000,59],[1621399183000,59],[1621400983000,59],[1621404583000,60],[1621406383000,60],[1621408183000,60],[1621409983000,59],[1621411783000,59],[1621413583000,58],[1621415383000,59],[1621417183000,59],[1621418983000,59],[1621420783000,58],[1621422583000,58],[1621424383000,58],[1621426183000,58],[1621427983000,58],[1621429782000,58],[1621431582000,58],[1621433382000,58],[1621435182000,58],[1621436982000,58],[1621438782000,58],[1621440582000,58],[1621442382000,58],[1621444182000,57],[1621595378000,49],[1621597178000,49],[1621598978000,49],[1621600778000,49],[1621602577000,48],[1621604377000,48],[1621606177000,47],[1621607977000,47],[1621705175000,52],[1621706975000,52],[1621708775000,52],[1621710575000,52],[1621712375000,52],[1621714175000,52],[1621715975000,52],[1621717774000,52],[1621719574000,52],[1621721375000,52],[1621723175000,52],[1621724975000,52],[1621726775000,52],[1621728575000,52],[1621730375000,51],[1621732175000,50],[1621733975000,50],[1621735775000,50],[1621737575000,50],[1621739375000,50],[1621741175000,50],[1621742975000,50],[1621744775000,50],[1621746574000,51],[1621748374000,51],[1621750174000,51],[1621751974000,51],[1621753774000,51],[1621755574000,51],[1621757374000,51],[1621759174000,51],[1621760974000,51],[1621762774000,52],[1621764574000,52],[1621924771000,44],[1621926571000,44],[1621928371000,43],[1621930171000,43]]

}]

Upvotes: 1

Related Questions